/* ==========================================
   课程面板 — Z0 层（GUI 组件）
   坐标系：面板左上角为原点 (0,0)，内部用 flex 分配空间
   与其他 Z0 组件的叠放顺序由内部的 z-index 控制，不是新层级
   ========================================== */

/* ----- 面板主容器：固定右下角，尺寸 650x450，允许拖拽 resize ----- */
#lesson-panel {
  position: fixed;
  right: 20px;                /* 距视口右边 20px */
  bottom: 20px;               /* 距视口下边 20px */
  width: 650px;
  height: 450px;
  z-index: 3;                 /* 同属 Z0 层，只是浮于主面板 (z-index:2) 之上 */
  background: #1e1e1e;
  color: #d4d4d4;
  border: 2px solid #61afef;
  border-radius: 8px;
  box-shadow: -4px 4px 15px rgba(0,0,0,0.7);
  font-family: 'Segoe UI', Consolas, monospace;
  overflow: hidden;           /* 内容不超出圆角区域 */
  resize: both;               /* 用户可手动拖拽改变大小 */
  min-width: 300px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
}

/* ----- 标题栏：固定高度 40px，始终可见 ----- */
#lesson-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  height: 40px;
  background: #2d2d2d;
  border-bottom: 1px solid #444;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;             /* 即使面板高度不足，标题栏也不被压缩 */
}
#lesson-title {
  color: #61afef;
  font-weight: bold;
}
#lesson-toggle-btn {
  background: none;
  border: none;
  color: #abb2bf;
  font-size: 18px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}

/* ----- 内容区：默认隐藏（折叠状态），展开时才显示 ----- */
#lesson-content {
  flex: 1;                    /* 占据标题栏以外的全部剩余高度 */
  display: none !important;   /* 强制隐藏，防止被其他样式干扰 */
  overflow: hidden;
  padding: 10px;
  gap: 10px;
}

/* ----- 左侧课程列表容器：固定宽度 200px ----- */
#lesson-list-wrapper {
  width: 200px;
  background: #252526;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  overflow-y: auto;           /* 课程较多时可滚动 */
  flex-shrink: 0;             /* 不被压缩 */
}
#lesson-list {
  padding: 5px 0;
}

/* 列表占位提示文字 */
.lesson-loading {
  padding: 10px;
  color: #abb2bf;
}

/* 课程条目（由 JS 动态生成，样式统一在此定义） */
.lesson-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #3c3c3c;
  color: #e5c07b;
  font-size: 13px;
  transition: background 0.1s;
}
.lesson-item:hover {
  background: #2c313a;
}

/* ----- 右侧代码查看区：占据剩余宽度，垂直分两行 ----- */
#lesson-code-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

#lesson-py-label {
  color: #98c379;
  font-size: 12px;
  font-weight: bold;
}
#lesson-js-label {
  color: #e5c07b;
  font-size: 12px;
  font-weight: bold;
  margin-top: 4px;
}

/* 两个代码查看器（只读文本框） */
#lesson-py-viewer,
#lesson-js-viewer {
  width: 100%;
  height: 45%;                /* 各占代码区 45% 高度 */
  background: #1e1e1e;
  color: #d4d4d4;
  border: 1px solid #3c3c3c;
  padding: 8px;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  resize: none;
  white-space: pre;
  overflow: auto;
}

/* ========== 折叠 / 展开状态控制 ========== */
/* 折叠时：面板强制变为 40px 高，内容隐藏，禁止 resize */
#lesson-panel.collapsed {
  height: 40px !important;
  min-height: 40px !important;
  resize: none !important;
}
#lesson-panel.collapsed #lesson-content {
  display: none !important;
}
/* 折叠时标题栏底部边框可去掉，视觉更简洁 */
#lesson-panel.collapsed #lesson-header {
  border-bottom: none;
}

/* 展开时：内容区以 flex 显示 */
#lesson-panel.expanded #lesson-content {
  display: flex !important;
}