/* ==========================================================================
   DSH 面板 UI 优化补丁  v1
   针对：设备画面页（.screenlayers / .inner-sidebar / .log-viewer）+ 远程键盘
   方式：纯覆盖，不改打包产物；删除 assets/1.html 里的 <link> 即可完全还原
   作用域：带 data-v-fc0266af 的组件（设备画面页 scoped 样式）
   ========================================================================== */

/* ============ ① 画面容器：干掉 1000/350/470px 像素硬编码，窄屏纵向堆叠 ============ */
.content-wrapper[data-v-fc0266af]{
  flex-wrap:wrap !important;
  gap:16px !important;
  align-items:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.tabs-wrapper[data-v-fc0266af]{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
.tabs-wrapper[data-v-fc0266af] .n-tabs-tab{
  padding:0 14px !important;
  font-size:14px !important;
}
.image-container[data-v-fc0266af]{
  width:100% !important;
  margin-top:12px !important;
  min-width:0 !important;
}
.image-box-group[data-v-fc0266af]{
  width:100% !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}
.image-box[data-v-fc0266af]{
  width:100% !important;
  min-width:0 !important;
  flex:1 1 320px !important;
}
.image-wrapper[data-v-fc0266af]{
  width:100% !important;
  max-width:560px !important;
}
/* 画面 + 按钮栏容器：允许换行 —— 够宽时左右并排，窄屏时按钮栏自动落到画面下方。
   不依赖媒体查询，任何宽度都不会再把按钮挤出屏幕。 */
.image-wrapper.with-sidebar[data-v-fc0266af]{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  width:100% !important;
  max-width:none !important;
  flex:1 1 100% !important;
  min-width:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  gap:14px !important;
}
.image-wrapper.with-sidebar[data-v-fc0266af] > .screenlayers{
  flex:1 1 460px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
}
.image-wrapper.with-sidebar[data-v-fc0266af] > .inner-sidebar{
  flex:0 0 150px !important;
  width:150px !important;
  max-width:100% !important;
}
.image-slot[data-v-fc0266af]{width:100% !important}

/* 画面本体：给个干净边框，跟键盘明显分开，不再糊成一团 */
.screenlayers[data-v-fc0266af]{
  width:100% !important;
  min-width:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#0b0e14 !important;
  box-shadow:0 6px 22px rgba(0,0,0,.28) !important;
  border:1px solid #2a3244 !important;
  box-sizing:border-box !important;
}
.screenlayers img[data-v-fc0266af]{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}
.mousecanvas[data-v-fc0266af]{z-index:9 !important}

/* ============ ② 右侧控制按钮栏：字体放大、命中区加大、深色卡片化 ============ */
.inner-sidebar[data-v-fc0266af]{
  width:150px !important;
  background:#12161f !important;
  border:1px solid #2a3244 !important;
  border-radius:14px !important;
  gap:12px !important;
  padding:14px 10px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.28) !important;
  box-sizing:border-box !important;
}
.inner-sidebar[data-v-fc0266af] .n-button{
  width:100% !important;
  min-height:42px !important;
  border-radius:10px !important;
  font-size:14px !important;
  font-weight:600 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.25) !important;
}
.button-row[data-v-fc0266af]{
  gap:8px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  width:100% !important;
}
.button-row[data-v-fc0266af] .n-button{
  min-height:40px !important;
  border-radius:10px !important;
  font-size:13.5px !important;
  padding:0 14px !important;
}
.button-container[data-v-fc0266af]{
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-bottom:12px !important;
}
.button-container[data-v-fc0266af] .n-button{
  min-height:40px !important;
  border-radius:10px !important;
  font-size:14px !important;
}

/* ============ ③ 下方指令输入行：不再 470px 溢出 ============ */
.image2-input-wrapper[data-v-fc0266af]{
  width:100% !important;
  margin-top:14px !important;
  padding:0 2px !important;
  box-sizing:border-box !important;
}
.image2-input-row[data-v-fc0266af]{
  display:flex !important;
  width:100% !important;
  max-width:760px !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
.image2-input-row[data-v-fc0266af] .n-input-wrapper,
.image2-input-row[data-v-fc0266af] .n-input{
  width:auto !important;
  flex:1 1 240px !important;
  min-width:0 !important;
  min-height:40px !important;
}
.image2-input-row[data-v-fc0266af] .n-button{
  width:auto !important;
  flex:0 0 auto !important;
  min-width:140px !important;
  min-height:40px !important;
  border-radius:10px !important;
  font-size:14px !important;
}

/* ============ ④ 键盘记录 / 日志：等宽字体、行卡片化，一眼看清 ============ */
.log-viewer[data-v-fc0266af]{
  font-size:14px !important;
  line-height:1.85 !important;
  max-height:min(62vh,560px) !important;
  background:#fafbfd !important;
  color:#1f2430 !important;
  border:1px solid #dbe1ea !important;
  border-radius:12px !important;
  padding:12px !important;
  box-shadow:inset 0 1px 3px rgba(16,24,40,.05) !important;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono","Courier New",monospace !important;
}
.log-line[data-v-fc0266af]{
  background:#fff !important;
  border:1px solid #e6ebf2 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  padding:9px 11px !important;
  margin:6px 0 !important;
  color:#252b38 !important;
  word-break:break-word !important;
  white-space:pre-wrap !important;
}
.log-line[data-v-fc0266af]:hover{background:#f3f7ff !important;border-color:#c3d7ff !important}

/* ============ ⑤ 远程键盘 #main-show：从「绝对定位盖住画面」改为「排在画面下方」 ============
   注意：绝不给 display 加 !important —— 侧栏「微信键盘」按钮靠 JS 改 display 收起/展开 */
#main-show{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  background:linear-gradient(180deg,#151a26 0%,#0e121b 100%) !important;
  border:1px solid #2a3244 !important;
  border-top:none !important;
  border-radius:0 0 14px 14px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.35) !important;
  padding:10px 12px 14px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  z-index:20 !important;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
}
#main-show .dsh-kb-head{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:2px 2px 10px !important;
  color:#c7d0e0 !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.2px !important;
  flex-wrap:nowrap !important;
}
#main-show .dsh-kb-head > span:nth-child(2){
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
#main-show .dsh-kb-dot{
  width:8px;height:8px;border-radius:50%;
  background:#3b7bff;box-shadow:0 0 8px #3b7bff;flex:0 0 auto;
}
#main-show .dsh-kb-hint{
  margin-left:auto !important;
  font-weight:400 !important;
  color:#7c88a0 !important;
  font-size:11.5px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
}
#keyboard{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  background:transparent !important;
  font-family:inherit !important;
}
.dsh-key{
  height:clamp(40px,8.5vw,52px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:clamp(17px,4.4vw,21px) !important;
  font-weight:600 !important;
  color:#e8edf7 !important;
  background:linear-gradient(180deg,#242c3d,#1a2130) !important;
  border:1px solid #333d52 !important;
  border-radius:10px !important;
  cursor:pointer !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:transform .06s ease,background .15s ease,box-shadow .15s ease !important;
}
.dsh-key:hover{
  background:linear-gradient(180deg,#2c3650,#212a3c) !important;
  border-color:#42506b !important;
}
.dsh-key:active{
  transform:scale(.95) !important;
  background:linear-gradient(180deg,#3b7bff,#2560d8) !important;
  border-color:#5b93ff !important;
  color:#fff !important;
  box-shadow:0 0 0 3px rgba(59,123,255,.22) !important;
}
.dsh-key-empty{
  background:transparent !important;
  border-color:transparent !important;
  pointer-events:none !important;
}
.dsh-key-del{
  font-size:14px !important;
  color:#ffb3b3 !important;
  background:linear-gradient(180deg,#3a2028,#2b171e) !important;
  border-color:#5a2c38 !important;
}
.dsh-key-del:active{
  background:linear-gradient(180deg,#e5484d,#c02b30) !important;
  border-color:#ff6b6f !important;
  color:#fff !important;
}

/* ============ ⑥ 手机 / 窄屏：侧栏横排、按钮铺满，彻底告别挤成一团 ============ */
@media (max-width: 900px){
  .content-wrapper[data-v-fc0266af]{gap:12px !important}
  .image-wrapper[data-v-fc0266af]{max-width:none !important}

  /* 按钮栏已换行到画面下方，改成横向铺满的按钮组 */
  .image-wrapper.with-sidebar[data-v-fc0266af] > .inner-sidebar{
    flex:1 1 100% !important;
    width:100% !important;
    max-width:100% !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px !important;
    border-radius:12px !important;
  }
  .inner-sidebar[data-v-fc0266af] .n-button{
    width:auto !important;
    flex:1 1 30% !important;
    min-width:100px !important;
    min-height:46px !important;
    font-size:14.5px !important;
  }
  .button-row[data-v-fc0266af]{
    flex:1 1 100% !important;
    justify-content:center !important;
  }
  .button-row[data-v-fc0266af] .n-button{
    flex:1 1 40% !important;
    min-height:46px !important;
  }
  .tabs-wrapper[data-v-fc0266af] .n-tabs-tab{
    padding:0 10px !important;
    font-size:13.5px !important;
  }
  .log-viewer[data-v-fc0266af]{
    font-size:13.5px !important;
    line-height:1.9 !important;
    max-height:none !important;
    padding:10px !important;
  }
  #main-show{padding:10px !important}
  #keyboard{gap:7px !important}
}

@media (max-width: 420px){
  #keyboard{gap:6px !important}
  .dsh-key{border-radius:9px !important}
}