/* ==========================================
   代码编辑器样式 - CodeMirror 定制
   ========================================== */

@import './fonts.css';


/* 代码编辑区域容器 */
.code-section {
    margin-top: 12px;
}

/* 代码头部 - 语言标签栏 */
.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.code-lang {
    color: #00bea7;
    font-weight: 600;
    font-size: 13px;
}

/* 编辑器容器 */
.editor-container {
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.6);
    border-radius: 8px;
    overflow: hidden;
}

/* ==========================================
   CodeMirror 核心样式
   ========================================== */

.CodeMirror-wrap {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

/* 编辑器主体 - 透明背景 */
.CodeMirror {
    height: 320px;
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-family: Consolas, 'Courier New','Alibaba PuHuiTi', 'Alibaba PuHuiTi Subset', monospace !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #d6deeb;
    line-height: 1.5;
}

/* 滚动区域透明 */
.CodeMirror-scroll {
    padding: 12px;
    background: transparent !important;
}

.CodeMirror-sizer {
    background: transparent !important;
}

/* 行号区域 */
.CodeMirror-lines {
    padding-bottom: 20px !important;
}

.CodeMirror-gutters {
    background: rgba(229,231,233) !important;
    padding-right: 15px;
}

.CodeMirror-linenumber {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
}

/* 光标 */
.CodeMirror-cursor {
    border-left: 2px solid #00bea7 !important;
    animation: blink 1s step-start infinite;
}

/* 选中区域 */
.CodeMirror-selected {
    background: rgba(0, 190, 167, 0.3) !important;
}

.CodeMirror-focused .CodeMirror-selected {
    background: rgba(0, 190, 167, 0.4) !important;
}

/* 激活行高亮 */
.CodeMirror-activeline-background {
    background: rgba(0, 190, 167, 0.05) !important;
}

.CodeMirror-activeline-gutter {
    background: rgba(0, 190, 167, 0.1) !important;
}

/* ==========================================
   语法高亮配色 - VS Code Light 风格
   ========================================== */

/* 关键字 - 紫色 */
.cm-keyword {
    color: #4242ff !important;
    font-weight: normal;
}

/* 函数定义 - 蓝色 */
.cm-def {
    color: #795e26 !important;
}

/* 变量名 - 浅灰白 */
.cm-variable {
    color: #000000 !important;
}

.cm-variable-2 {
    color: #5700a8 !important;  /* self, cls 等特殊变量 */
}

/* 字符串 - 绿色 */
.cm-string,
.cm-string-2 {
    color: #a31515 !important;
}

/* 数字 - 橙色 */
.cm-number {
    color: #098658 !important;
}

/* 注释 - 灰色斜体 */
.cm-comment {
    color: #002BE2 !important;
}

/* 运算符 - 青色 */
.cm-operator {
    color: #000000 !important;
}

/* 布尔值/None - 红色 */
.cm-atom {
    color: #0000ff !important;
}

/* 内置函数 - 黄色 */
.cm-builtin {
    color: #a3761d !important;
}

/* 装饰器 - 橙色 */
.cm-meta {
    color: #00b1a8 !important;
}

/* 括号 - 白色 */
.cm-bracket {
    color: #000000 !important;
}

/* 属性 - 青色 */
.cm-property {
    color: #009191 !important;
}

.cm-attribute {
    color: #795e26 !important;
}

/* 标签 - 蓝色 */
.cm-tag {
    color: #267f99 !important;
}

/* 错误标记 */
.cm-error {
    color: #cd3131 !important;
    text-decoration: underline wavy #cd3131;
}

/* 匹配括号高亮 */
.CodeMirror-matchingbracket {
    color: #00bea7 !important;
    font-weight: bold;
    outline: 1px solid rgba(0, 190, 167, 0.5);
}

.CodeMirror-nonmatchingbracket {
    color: #ff5370 !important;
}

/* ==========================================
   滚动条样式
   ========================================== */

.CodeMirror-vscrollbar::-webkit-scrollbar,
.CodeMirror-hscrollbar::-webkit-scrollbar,
.CodeMirror-scroll::-webkit-scrollbar {
    height: 10px;
    width: 8px;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-track,
.CodeMirror-hscrollbar::-webkit-scrollbar-track,
.CodeMirror-scroll::-webkit-scrollbar-track {
    background: transparent !important;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 6px;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover,
.CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* 水平滚动条 */
.CodeMirror-scroll::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* ==========================================
   底部按钮区域
   ========================================== */

.code-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0 0;
}

.code-execute-btn {
    width: 100%;
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    background: #00bea7;
    color: #ffffff;
    font-size: 19px;
    font-family: var(--ui-font-family);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 6px 18px rgba(0, 190, 167, 0.35);
}

.code-execute-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 190, 167, 0.45);
}

.code-execute-btn:active {
    transform: translateY(0);
    opacity: 0.92;
}

/* 执行按钮禁用状态 */
.code-execute-btn:disabled {
    background: rgba(0, 190, 167, 0.4);
    cursor: not-allowed;
    box-shadow: none;
}

/* ==========================================
   占位符样式（如果有使用）
   ========================================== */

.CodeMirror-placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================
   只读区域样式
   ========================================== */

.CodeMirror-readonly .CodeMirror-lines {
    opacity: 0.6;
}

.CodeMirror-readonly .CodeMirror-cursor {
    display: none;
}

/* ==========================================
   打字机效果样式
   ========================================== */

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 打字时特殊光标效果 */
.CodeMirror.typing .CodeMirror-cursor {
    border-left: 3px solid #00bea7;
    animation: none;
}

.typewriter-complete {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* 打字时禁止交互 */
.CodeMirror.typing {
    pointer-events: none !important;
}

/* 打字完成后允许滚动查看 */
.CodeMirror.typewriter-complete {
    pointer-events: auto !important;
}