/* ============================================================
 * CodeEditor 带行号的代码编辑/展示组件
 * 用法：textarea 外套一层 .code-editor 容器（由 code-editor.js 自动包裹）
 * 对应 JS：/js/code-editor.js  CodeEditor.wrap(textarea, options)
 * ============================================================ */

.code-editor {
    display: flex;
    align-items: stretch;
    background: #fff;
    /* 容器可拖拽调高（拖拽柄在右下角），内容内部滚动 */
    resize: vertical;
    overflow: hidden;
    min-height: 160px;
}

/* 覆盖 .tool-panel textarea 的 min-height/resize：高度由容器统一控制，内容内部滚动 */
.tool-panel .code-editor textarea,
.code-editor textarea {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    resize: none;
}

/* 行号列：字体/行高由 JS 同步 textarea 的计算样式，保证任意页面逐行对齐 */
.code-gutter {
    flex: 0 0 auto;
    min-width: 40px;
    padding: 14px 6px 14px 10px;
    font-family: 'Fira Code', Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    text-align: right;
    color: #9aa4b2;
    background: #f6f8fa;
    border-right: 1px solid #edf0f3;
    user-select: none;
    overflow: hidden;   /* 超出行数裁剪，scrollTop 由 JS 与 textarea 同步 */
}

.code-gutter .gl {
    display: block;     /* 高度由行高自然撑开，与 textarea 逐行对齐 */
    padding: 0 4px;
    border-radius: 4px;
}

.code-gutter .gl.err {
    background: #dc2626;
    color: #fff;
    font-weight: 600;
}

/* 错误定位提示条：放在 .code-editor 之后、面板底部 */
.err-hint {
    display: none;
    padding: 8px 14px;
    font-size: 12px;
    color: #b91c1c;
    background: #fef2f2;
    border-top: 1px solid #fecaca;
}

.err-hint.show {
    display: block;
}

/* ---------- 折叠查看器（只读输出框，字体由 JS 同步 textarea） ---------- */

.code-view {
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 16px;
    white-space: pre;       /* 保留前导缩进 */
    color: #1f2328;
    background: #fff;
}

.code-view .cv-line {
    min-height: 1em;        /* 空行占位 */
}

/* 折叠箭头：占固定宽度槽位，无箭头行留空保持行号对齐 */
.code-gutter.foldable {
    padding-left: 4px;
}

.code-gutter.foldable .gl {
    padding: 0 4px 0 0;
}

.fold-arrow {
    display: inline-block;
    width: 14px;
    text-align: center;
    cursor: pointer;
    color: #6b7280;
    user-select: none;
}

.fold-arrow:hover {
    color: #111827;
}

/* 折叠后的行数徽章，点击也可展开 */
.cv-fold-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #57606a;
    background: #eef1f4;
    border: 1px solid #dde2e8;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}

.cv-fold-badge:hover {
    background: #e2e7ec;
}

/* 移动端：编辑区降高，行号列收窄 */
@media (max-width: 768px) {
    .code-gutter { min-width: 32px; padding-left: 6px; }
    .code-gutter.foldable { min-width: 44px; padding-left: 2px; }
}