/* aikc-code-editor-r2.css —— r62：编程闯关代码区「看得全、能滚动、不误写」
 *
 * 解决三件事：
 *   1) 代码超过 20 行时被裁掉、又没有滚动条 → 编辑器固定高度 + 内部滚动条（JS 会在 260px 到屏高 62% 之间自动增高）
 *   2) 「自定义输入」被当成代码编辑器撑得很大 → 不再接管它，改成小号虚线数据框
 *   3) 想写长代码 → 右上角「放大」按钮，全屏写，Esc 退出
 */

/* ---------- 代码编辑器本体 ---------- */
.aikc-cm-host {
  position: relative;
  margin: 0;
  background: #fff;
}

.aikc-cm-host .CodeMirror {
  /* 具体高度由 JS 按内容设置（240px ~ 屏高 62%），这里给兜底值 */
  height: 340px;
  min-height: 240px;
  max-height: none;
  border: 0;                 /* 外层 .coding-editor-shell 已经有描边，避免双层框 */
  border-radius: 0;
  font-family: "Consolas", "SFMono-Regular", "Menlo", "Courier New", monospace;
  font-size: 14.5px;
  line-height: 1.62;
  /* 右边留 12px 给自绘滚动条，代码不会钻到滚动条底下 */
  padding: 4px 12px 4px 0;
}

.aikc-cm-host .CodeMirror-scroll {
  min-height: 0;
}

/* 行号栏：窄一点，把宽度留给代码 */
.aikc-cm-host .CodeMirror-gutters {
  background: #f4f6f9;
  border-right: 2px solid #101828;
  border-radius: 0;
}
.aikc-cm-host .CodeMirror-linenumber {
  min-width: 24px;
  padding: 0 8px 0 6px;
  color: #8b95a7;
  font-size: 12.5px;
}
.aikc-cm-host .CodeMirror-line {
  padding-left: 10px;
}
.aikc-cm-host .CodeMirror-lines {
  padding: 6px 0;
}
.aikc-cm-host .CodeMirror-cursor {
  border-left: 2px solid #0b3d91;
}
.aikc-cm-host .CodeMirror-selected {
  background: #d7e6ff;
}
.aikc-cm-host .CodeMirror-activeline-background {
  background: rgba(47, 125, 224, .07);
}

/* 滚动条：CodeMirror 自带的是原生滚动条，Chrome 的「浮层滚动条」不悬停就看不见，
   所以这里把原生滚动条藏掉，改画一根常显的橙色滚动条（JS 负责同步位置 + 可拖动）。 */
.aikc-cm-host .CodeMirror-vscrollbar,
.aikc-cm-host .CodeMirror-hscrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.aikc-cm-host .CodeMirror-vscrollbar::-webkit-scrollbar,
.aikc-cm-host .CodeMirror-hscrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.aikc-cm-host .aikc-scroll-rail {
  position: absolute;
  top: 3px;
  right: 2px;
  bottom: 3px;
  z-index: 9;
  width: 10px;
  border-radius: 99px;
  background: #e8edf3;
  display: none;
}
.aikc-cm-host.has-overflow .aikc-scroll-rail {
  display: block;
}
.aikc-cm-host .aikc-scroll-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  min-height: 30px;
  border-radius: 99px;
  background: #f0a92c;
  cursor: grab;
  transition: background .15s ease;
}
.aikc-cm-host .aikc-scroll-thumb:hover,
.aikc-cm-host .aikc-scroll-thumb.dragging {
  background: #d8890f;
}
.aikc-cm-host .aikc-scroll-thumb.dragging {
  cursor: grabbing;
}

/* ---------- 自定义输入：小而清楚，绝不长得像代码框 ---------- */
.coding-editor-shell > label {
  display: grid;
  gap: 6px;
  padding: 10px 16px 12px;
  background: #fff9ec;
  border-top: 2px dashed rgba(23, 38, 59, .2);
  color: #7a6a4f;
  font-size: 13px;
  font-weight: 800;
}
.coding-editor-shell > label > textarea {
  width: 100%;
  height: 58px;
  min-height: 58px;
  max-height: 116px;
  padding: 8px 10px;
  border: 2px dashed #d8c08a;
  border-radius: 10px;
  background: #fffdf7;
  color: #4a4436;
  font-family: "Consolas", "SFMono-Regular", "Menlo", "Courier New", monospace;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.coding-editor-shell > label > textarea:focus {
  border-color: #f6ad2f;
  border-style: solid;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(246, 173, 47, .22);
}
.coding-editor-shell > label::after {
  content: "↑ 这里只放喂给程序的数据（例如样例输入），代码请写在上面的编辑器里";
  color: #9a7b56;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- 放大按钮 / 行数提示 ---------- */
.aikc-cm-host .aikc-zoom-btn,
.coding-editor-shell > nav > .aikc-zoom-btn {
  flex: none;
  margin-left: auto;
  border: 2px solid #0d1929;
  border-radius: 10px;
  background: #ffd863;
  color: #17263b;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 2px 2px 0 #0d1929;
}
.coding-editor-shell > nav > .aikc-zoom-btn + span {
  margin-left: 8px;
}
/* 放大按钮 + 行数提示 + 草稿标记 一起靠右 */
.coding-editor-shell > nav > .aikc-lines-badge + span {
  margin-left: 10px;
}
.coding-editor-shell > nav > .aikc-lines-badge {
  flex: none;
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 99px;
  background: #2b3a50;
  color: #c9d8ea;
  font-size: 11.5px;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}
.coding-editor-shell > nav > .aikc-lines-badge.has-overflow {
  background: #4b3a12;
  color: #ffd97a;
}

/* 放大态：整块编辑面板铺满屏幕 */
body.aikc-zoom-open {
  overflow: hidden;
}
body.aikc-zoom-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(14, 22, 34, .62);
  backdrop-filter: blur(2px);
}
.coding-editor-shell.aikc-zoom {
  position: fixed;
  inset: 16px;
  z-index: 9992;
  display: flex;
  flex-direction: column;
  max-height: none;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.coding-editor-shell.aikc-zoom > nav {
  flex: 0 0 auto;
}
.coding-editor-shell.aikc-zoom .aikc-cm-host {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.coding-editor-shell.aikc-zoom .aikc-cm-host .CodeMirror {
  width: 100%;
  height: 100% !important;
  min-height: 0;
  max-height: none;
}
.coding-editor-shell.aikc-zoom > label {
  flex: 0 0 auto;
  padding: 8px 16px 10px;
}
.coding-editor-shell.aikc-zoom > label > textarea {
  height: 46px;
  min-height: 46px;
}
.coding-editor-shell.aikc-zoom > .coding-actions {
  flex: 0 0 auto;
  padding: 10px 14px;
}

/* 窄屏：编辑器矮一点，按钮不挤 */
@media (max-width: 720px) {
  .aikc-cm-host .CodeMirror {
    font-size: 14px;
    line-height: 1.6;
  }
  .coding-editor-shell > nav > .aikc-zoom-btn {
    padding: 6px 9px;
    font-size: 12px;
  }
  .coding-editor-shell > nav > .aikc-lines-badge {
    display: none;
  }
  .coding-editor-shell > nav > button {
    white-space: nowrap;
  }
  .coding-editor-shell > nav > span {
    display: none;   /* 手机上先让位给语言切换和放大 */
  }
  .coding-editor-shell.aikc-zoom {
    inset: 8px;
  }
}