/* 创悟在线编辑器: 布局与样式复用旧版 CSS(layui/nav.css/fontello), 此处仅少量补充 */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ===== 导航尺寸: 按旧版线上实测数值精确对齐 ===== */
#nav-wrap {
  height: 44px;
  flex: none;
}

#nav {
  height: 44px;
  max-height: none;
  position: relative;
  z-index: 1100;
}

/* 左侧按钮: 36px 高, 文字 15px(与旧版实测一致) */
#nav-left-btn-list {
  overflow-x: auto;
  flex: 1;
  min-width: 0;
}

#nav-left-btn-list button {
  height: 36px !important;
  font-size: 15px !important;
}

/* 连接与重做之间留分组间隔(连接按钮与已连接徽标同规则) */
#li_connect-btn,
#conn-badge {
  margin-left: 105px !important;
}

#nav-left-btn-list button > a {
  font-size: 14px !important;
}

/* 右侧图标按钮: 36px 高 */
#nav-right-btn-list button {
  height: 36px !important;
}

/* 按钮样式: 透明背景, 无边框, 白色文字(绿色背景下) */
#nav-left-btn-list button,
#nav-right-btn-list button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

#nav #mixly-path {
  color: #fff !important;
}

/* 导航字体(旧版 Helvetica Neue 系) */
#nav {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
}

/* ===== 顶部菜单(旧版 layui 导航微调) ===== */
#nav {
  height: 100%;
}

#copyright {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  align-self: center;
  padding: 0 12px;
}

@media (max-width: 768px) {
  #copyright {
  color: #fff; display: none; }
}


/* 下拉打开态(无 layui.js, 手动切换) */
.layui-nav-item.layui-nav-itemed .layui-nav-child {
  display: block;
}

/* 图标按钮内的 a */
#nav-right-btn-list .layui-btn a {
  font-size: 14px;
  color: #fff;
}

/* ===== 工具箱 ===== */
.blocklyToolbox {
  width: 140px !important;
}

.blocklyToolboxCategoryLabel {
  font-size: 16px !important;
}

.blocklyText {
  font-size: 16px !important;
}

.blocklyFlyoutLabelText {
  font-size: 16px !important;
}

/* 缩放控件与背包(与旧版一致: 显示) */

/* ===== 代码列(侧边栏/模式切换控制宽度; 并排布局, 永不遮挡积木区) ===== */
#code-editor {
  transition: width 0.15s ease;
}

/* 侧边栏(v-bar): 隐藏代码列 → 积木区放大; 再点恢复 */
body.code-panel-hidden #code-editor {
  width: 0 !important;
  border-left: none;
}

/* 模式切换(code-area): 代码列占满, 积木列收起 */
body.code-mode #code-editor {
  width: 100% !important;
  display: flex !important;
}

body.code-mode #block-editor {
  display: none;
}

/* ===== 手机端(<768px): 同样并排(窄屏代码列 38%), 不用覆盖层 ===== */
@media (max-width: 768px) {
  #code-editor {
    display: flex;
    width: 38% !important;
    position: static;
  }

  body.code-panel-hidden #code-editor {
    display: none !important;
  }

  body.code-mode #code-editor {
    display: flex !important;
    width: 100% !important;
  }

  #app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 10px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    z-index: 80;
  }

  #td_middle {
    height: 160px !important;
  }
}

/* 桌面端: 隐藏手机底栏 */
@media (min-width: 768px) {
  #app-footer { display: none; }
}

.footer-btn {
  flex: 1;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 22px;
  background: #fff;
  color: #333;
  font-size: 15px;
}

.footer-btn--primary {
  background: #FB5607;
  border-color: #FB5607;
  color: #fff;
  font-weight: bold;
}

.footer-btn:active { opacity: 0.75; }

/* ===== 代码弹窗(文件>导出代码) ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 99998;
  display: flex;
  flex-direction: column;
}

.overlay-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.overlay.hidden { display: none; }

.overlay-head {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
}

.overlay-head span { flex: 1; }

.overlay-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  border-radius: 16px;
  padding: 7px 14px;
  font-size: 14px;
}

.overlay-btn--primary {
  background: #FB5607;
  border-color: #FB5607;
  color: #fff;
}

/* ===== 串口工具(旧版 串口 按钮移植) ===== */
#serial-tool {
  background: rgba(0, 0, 0, 0.45);
}

#serial-tool .overlay-panel {
  position: relative;
  flex: none;
  width: 640px;
  max-width: 96%;
  height: 480px;
  margin: 40px auto 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#serial-tool-recv {
  flex: 1;
  margin: 10px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  padding: 8px;
  resize: none;
  background: #f7f7f2;
}

.serial-tool-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 14px 12px;
}

.serial-tool-row--center {
  justify-content: center;
}

#serial-tool-send {
  flex: 1;
  height: 34px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 14px;
}

.serial-tool-row select {
  height: 34px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}

.serial-tool-row label {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* nav.css 全局禁用了文字选择, 输出区/串口监视/串口工具接收区恢复可选中复制 */
#sb-output,
#sb-monitor-output,
#serial-tool-recv {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ===== 大号字段编辑弹窗(参考极速配送) ===== */
.m-field-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.m-field-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 22px 24px;
  width: 100%;
  max-width: 300px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.m-field-title {
  font-size: 15px;
  color: #666;
  margin-bottom: 10px;
}

.m-field-value {
  font-size: 40px;
  font-weight: bold;
  color: #FB5607;
  line-height: 1.2;
  margin-bottom: 14px;
  word-break: break-all;
}

.m-field-input {
  width: 100%;
  font-size: 24px;
  text-align: center;
  border: 2px solid #FB5607;
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 14px;
  outline: none;
}

.m-field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.m-field-grid button {
  height: 44px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fafafa;
  font-size: 18px;
  color: #333;
}

.m-field-grid button:active { background: #FB5607; color: #fff; }

.m-field-actions {
  display: flex;
  gap: 10px;
}

.m-field-actions button {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 22px;
  font-size: 16px;
}

.m-field-ok { background: #FB5607; color: #fff; }
.m-field-cancel { background: #f0f0ea; color: #666; }

.m-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 14px;
  z-index: 99999;
  pointer-events: none;
}

@media (min-width: 768px) {
  .m-toast { bottom: 40px; }
}

.hidden { display: none !important; }

/* ===== 小程序环境: 隐藏桌面端专属项(USB烧录/部署BLE/文件操作/Python代码区) ===== */
.mp-env #li_burn-btn,
.mp-env #code-editor,
.mp-env.code-mode #code-editor,
.mp-env #btn-code-area,
.mp-env #li_deploy-ble-btn,
.mp-env #li_new-btn,
.mp-env #li_open-btn,
.mp-env #li_save-btn,
.mp-env #li_saveas-btn {
  display: none !important;
}

/* 小程序端: 连接/串口/状态栏/侧边栏由原生页承担, 菜单栏隐藏 */
.mp-env #li_connect-btn,
.mp-env #li_serial-btn,
.mp-env #btn-h-bar,
.mp-env #btn-v-bar,
.mp-env #conn-badge {
  display: none !important;
}

/* 小程序端: 状态窗口只保留「输出」标签, 去掉「串口」标签 */
.mp-env #tab-ace-serial {
  display: none !important;
}

/* 小程序端: 积木分类字体 13px(工具箱为 HTML, 不受工作区缩放影响) */
.mp-env .blocklyToolboxCategoryLabel {
  font-size: 13px !important;
}

/* 小程序端: 字体整体缩小 2 号(积木区文字除外: 积木大小参照极速配送, 用默认 16px × 缩放 0.694) */
.mp-env #nav-left-btn-list button { font-size: 13px !important; }
.mp-env #nav-left-btn-list button > a { font-size: 12px !important; }
.mp-env #nav-right-btn-list .layui-btn a { font-size: 12px !important; }
.mp-env #mixly-footer { font-size: 10px !important; }
.mp-env .footer-btn { font-size: 13px; }
.mp-env .overlay-head { font-size: 14px; }
.mp-env .overlay-btn { font-size: 12px; }
.mp-env .m-field-title { font-size: 13px; }
.mp-env .m-field-value { font-size: 38px; }
.mp-env .m-field-input { font-size: 22px; }
.mp-env .m-field-grid button { font-size: 16px; }
.mp-env .m-field-actions button { font-size: 14px; }
.mp-env .m-toast { font-size: 12px; }

/* 小程序端: 分类面板收窄 */
.mp-env .blocklyToolbox { width: 110px !important; }

/* ===== 小程序端菜单条布局: 返回 + Mixly/撤销/重做(居左) + 上传(右, 黄色按钮框) ===== */
#mp-back-btn { display: none; }

.mp-env #nav-left-btn-list {
  position: relative;
}

.mp-env #mp-back-btn {
  display: inline-block;
  padding: 0 6px !important;
}

.mp-env #li_upload-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* 按钮框样式参照航空运输运行按钮(黄底黑字圆角加粗) */
  background: #ffd23b !important;
  color: #000 !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  font-weight: bold !important;
  font-size: 14px !important;
}

.mp-env #li_upload-btn a {
  color: #000 !important;
  font-weight: bold !important;
}

.mp-env #li_upload-btn:active {
  transform: translateY(-50%) scale(0.96);
}