/* readonly.css — ClaudeCoach 讲义只读站点样式
   1. --vscode-* 变量 fallback（浏览器无 VS Code 注入，style.css 全靠它）
   2. 隐藏所有交互元素（main.js 在 vscode=null 时仍渲染 DOM）
   3. SPA 导航栏 + iPad 布局
*/

/* ===== 1. VS Code CSS 变量 fallback =====
   从 style.css + design-system.css grep 收集的全部 --vscode-* 变量。 */
:root,
body.vscode-dark {
  --vscode-editor-background: #1e1e1e;
  --vscode-editor-foreground: #d4d4d4;
  --vscode-foreground: #d4d4d4;
  --vscode-descriptionForeground: #9d9d9d;
  --vscode-button-background: #0e639c;
  --vscode-button-foreground: #ffffff;
  --vscode-button-hoverBackground: #1177bb;
  --vscode-input-background: #313131;
  --vscode-input-foreground: #cccccc;
  --vscode-input-border: #3c3c3c;
  --vscode-sideBar-background: #252526;
  --vscode-panel-border: #2d2d30;
  --vscode-menu-background: #252526;
  --vscode-menu-foreground: #cccccc;
  --vscode-menu-border: #454545;
  --vscode-menu-selectionBackground: #04395e;
  --vscode-menu-selectionForeground: #ffffff;
  --vscode-list-activeSelectionBackground: #04395e;
  --vscode-list-activeSelectionForeground: #ffffff;
  --vscode-textLink-foreground: #4daafc;
  --vscode-textCodeBlock-background: #1e1e1e;
  --vscode-editor-selectionBackground: #264f78;
  --vscode-editor-font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
  --vscode-font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
  --vscode-font-size: 14px;
  --vscode-editor-font-size: 14px;
  --vscode-charts-yellow: #c4a000;
}
body.vscode-light {
  --vscode-editor-background: #ffffff;
  --vscode-editor-foreground: #1f1f1f;
  --vscode-foreground: #1f1f1f;
  --vscode-descriptionForeground: #616161;
  --vscode-button-background: #0078d4;
  --vscode-button-foreground: #ffffff;
  --vscode-button-hoverBackground: #006cbe;
  --vscode-input-background: #ffffff;
  --vscode-input-foreground: #1f1f1f;
  --vscode-input-border: #cecece;
  --vscode-sideBar-background: #f3f3f3;
  --vscode-panel-border: #e0e0e0;
  --vscode-menu-background: #ffffff;
  --vscode-menu-foreground: #1f1f1f;
  --vscode-menu-border: #e0e0e0;
  --vscode-menu-selectionBackground: #0064bd;
  --vscode-menu-selectionForeground: #ffffff;
  --vscode-list-activeSelectionBackground: #0064bd;
  --vscode-list-activeSelectionForeground: #ffffff;
  --vscode-textLink-foreground: #0066b8;
  --vscode-textCodeBlock-background: #f6f8fa;
  --vscode-editor-selectionBackground: #add6ff;
  --vscode-charts-yellow: #b58900;
}

/* ===== 2. 隐藏所有交互元素 ===== */
body.cc-readonly #chip,
body.cc-readonly #popover,
body.cc-readonly #toastContainer,
body.cc-readonly #btnRevert,
body.cc-readonly #btnReload,
body.cc-readonly .lecture-actions-left,
body.cc-readonly .lecture-status:empty,
body.cc-readonly .cc-suggest,
body.cc-readonly .lecture-img-delete-btn,
body.cc-readonly .cc-widget-btn-more,
body.cc-readonly .cc-widget-btn[data-action="reload"],
body.cc-readonly .cc-widget-btn[data-action="copy-source"],
body.cc-readonly .cc-widget-btn[data-action="toggle-source"],
body.cc-readonly .cc-widget-toolbar,
body.cc-readonly .cc-chart-btn,
body.cc-readonly .cc-chart-toolbar,
body.cc-readonly .lecture-undo-pill,
body.cc-readonly .lecture-context-menu,
body.cc-readonly .lecture-suggestion-bubble,
body.cc-readonly .cc-widget-console,
body.cc-readonly .cc-widget-error {
  display: none !important;
}

/* YouTube 缩略图隐私屏蔽：CSP img-src 'self' 拦 ytimg + CSS 清背景图双保险 */
body.cc-readonly .cc-video-thumb {
  background-image: none !important;
  background: var(--vscode-sideBar-background, #2d2d30) !important;
}

/* ===== 3. SPA 导航栏 + iPad 布局 ===== */
body.cc-readonly {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-areas: "nav main";
  min-height: 100vh;
  margin: 0;
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  font-family: var(--vscode-font-family);
  -webkit-text-size-adjust: 100%;
}
body.cc-readonly.cc-nav-collapsed {
  grid-template-columns: 0 1fr;
}
body.cc-readonly.cc-nav-collapsed #cc-nav {
  display: none;
}

#cc-nav {
  grid-area: nav;
  border-right: 1px solid var(--vscode-panel-border);
  background: var(--vscode-sideBar-background);
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: grid-column 200ms ease;
}
.cc-nav-header {
  position: sticky;
  top: 0;
  background: var(--vscode-sideBar-background);
  padding: 12px 12px;
  border-bottom: 1px solid var(--vscode-panel-border);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.cc-nav-title {
  font-weight: 600;
  flex: 1;
  font-size: 14px;
}
.cc-nav-btn {
  background: transparent;
  border: none;
  color: var(--vscode-foreground);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.cc-nav-btn:hover {
  background: var(--vscode-editor-selectionBackground);
}
.cc-nav-tree {
  padding: 4px 0 40px;
}
.cc-nav-loading,
.cc-nav-empty {
  padding: 16px;
  color: var(--vscode-descriptionForeground);
  font-size: 13px;
}
.cc-nav-course {
  margin: 0;
}
.cc-nav-course > summary {
  cursor: pointer;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  color: var(--vscode-foreground);
  list-style: none;
}
.cc-nav-course > summary::-webkit-details-marker {
  display: none;
}
.cc-nav-course > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 150ms ease;
  color: var(--vscode-descriptionForeground);
  font-size: 10px;
}
.cc-nav-course[open] > summary::before {
  transform: rotate(90deg);
}
.cc-nav-course > summary:hover {
  background: var(--vscode-editor-selectionBackground);
}
.cc-nav-topic-head {
  padding: 8px 24px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vscode-descriptionForeground);
  font-weight: 600;
}
.cc-nav-topic {
  list-style: none;
  padding: 0 0 6px;
  margin: 0;
}
.cc-nav-topic li {
  padding: 0;
}
.cc-nav-topic a {
  display: block;
  padding: 6px 24px;
  color: var(--vscode-foreground);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: background 80ms ease;
}
.cc-nav-topic a:hover {
  background: var(--vscode-editor-selectionBackground);
}
.cc-nav-topic a.active {
  border-left-color: var(--vscode-button-background);
  background: var(--vscode-list-activeSelectionBackground);
  color: var(--vscode-list-activeSelectionForeground);
}

.cc-main {
  grid-area: main;
  min-width: 0;
  overflow-x: hidden;
}
body.cc-readonly .lecture-header {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 32px 0;
}
body.cc-readonly main.lecture-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 32px 120px;
}

/* ===== 4. iPad Safari 适配 ===== */
/* 旧版 Safari 不支持 ResizeObserver → widget iframe 高度卡住，让内部可滚动降级 */
@supports not (resize: both) {
  body.cc-readonly .cc-widget-iframe {
    overflow: auto !important;
    min-height: 320px;
  }
}
/* 安全区（iPad 横屏刘海/圆角） */
@supports (padding: env(safe-area-inset-top)) {
  body.cc-readonly .cc-nav-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  body.cc-readonly .lecture-header {
    padding-top: calc(24px + env(safe-area-inset-top));
    padding-left: calc(32px + env(safe-area-inset-left));
    padding-right: calc(32px + env(safe-area-inset-right));
  }
  body.cc-readonly main.lecture-body {
    padding-left: calc(32px + env(safe-area-inset-left));
    padding-right: calc(32px + env(safe-area-inset-right));
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}
/* 窄屏（竖屏 iPad / 手机）导航变抽屉 */
@media (max-width: 820px) {
  body.cc-readonly {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }
  body.cc-readonly #cc-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    z-index: 100;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
  }
  body.cc-readonly:not(.cc-nav-open) #cc-nav {
    transform: translateX(-100%);
    display: block;
  }
  body.cc-readonly #cc-nav {
    transition: transform 200ms ease;
  }
  body.cc-readonly.cc-nav-collapsed #cc-nav {
    transform: translateX(-100%);
    display: block;
  }
}