/* ─── Bootstrap overrides ────────────────────────────────────────────── */
body { background: var(--bg); color: var(--fg); }
.container { max-width: 1040px; }

/* ─── Design tokens (matches index.css HSL palette) ──────────────────── */
:root {
  --bg:           hsl(210, 40%, 98%);
  --fg:           hsl(215, 28%, 17%);
  --card:         hsl(0, 0%, 100%);
  /* Brand palette aligned with datacurso.com: primary = warm coral (was a harsh
     dark red that clashed with the brand), secondary/brand = the brand purple. */
  --primary:      hsl(10, 81%, 63%);
  --primary-fg:   hsl(0, 0%, 100%);
  --primary-soft: hsl(10, 81%, 96%);
  --brand:        hsl(260, 37%, 42%);
  --brand-soft:   hsl(260, 40%, 96%);
  --muted:        hsl(215, 25%, 96%);
  --muted-fg:     hsl(215, 16%, 47%);
  --border:       hsl(215, 20%, 88%);
  --success:      hsl(142, 70%, 40%);
  --success-fg:   hsl(0, 0%, 100%);
  --radius:       0.75rem;
  /* Semantic tokens (ui-refactor §7) */
  --danger:        hsl(10 81% 48%);   --danger-soft:   hsl(10 81% 48% / .10);
  --info:          hsl(212 90% 50%); --info-soft:     hsl(212 90% 50% / .10);
  --success-strong: hsl(142 70% 40%); --success-soft: hsl(142 70% 40% / .14);
  --warn:          hsl(38 92% 50%);  --warn-soft:     hsl(38 92% 50% / .14);
  /* Motion tokens (ui-refactor §8) */
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   320ms;
  --ease:     cubic-bezier(.2, .8, .2, 1);
  --hold-mark: 1100ms;
  --shadow-card:  0 1px 3px hsl(215, 28%, 17%, 0.06), 0 1px 2px hsl(215, 28%, 17%, 0.04);
  --shadow-elevated: 0 10px 30px -10px hsl(10, 81%, 42%, 0.25);
  --surface-2:     hsl(215, 20%, 94%);    /* slightly darker than --muted, for nested surfaces */
  --shadow-card:   0 1px 2px hsl(215 28% 17% / .05);   /* override: softer than current */
  --shadow-elevated: 0 4px 16px -4px hsl(215 28% 17% / .10);  /* override: neutral, not red */
}

/* ─── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

svg { display: block; flex-shrink: 0; }
.hidden { display: none !important; }

/* ─── Layout ──────────────────────────────────────────────────────────── */
.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.aicoursecreation-main .container {
  max-width: 1680px;
}

/* Remove left container padding in planning mode for edge-to-edge chat */
.aicoursecreation-main:has(.courseai-workspace.is-planning) .container {
  padding-left: 0;
  padding-right: 0;
}

/* ─── NAVBAR (fixed-top, like reportbuilder/edit.php) ────────────────── */
.aicoursecreation-navbar {
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px hsl(215, 28%, 17%, 0.08);
  height: 56px;
}

.aicoursecreation-navbar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.aicoursecreation-navbar h1 {
  font-weight: 600;
  color: var(--fg);
}

/* Navbar menu trigger: logo → hamburger on hover */
.aicoursecreation-navbar-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  width: 36px;
  height: 36px;
  transition: background .15s;
}

.aicoursecreation-navbar-trigger:hover {
  background: var(--muted);
}

.aicoursecreation-navbar-trigger .courseai-nav-logo,
.aicoursecreation-navbar-trigger .courseai-nav-menuicon {
  position: absolute;
  transition: opacity .2s ease;
}

.aicoursecreation-navbar-trigger .courseai-nav-logo {
  opacity: 1;
}

.aicoursecreation-navbar-trigger .courseai-nav-menuicon {
  opacity: 0;
}

.aicoursecreation-navbar-trigger:hover .courseai-nav-logo {
  opacity: 0;
}

.aicoursecreation-navbar-trigger:hover .courseai-nav-menuicon {
  opacity: 1;
}

/* ─── MAIN ────────────────────────────────────────────────────────────── */
.app-main { padding: 56px 0 80px; }
.aicoursecreation-main { padding: 56px 0 80px; }

.app-main,
.aicoursecreation-main {
  padding-top: 24px;
}

/* Workspace layout: chat/form left, progress right */
.courseai-workspace {
  display: block;
}

.courseai-workspace.is-planning {
  /* Wide-ish by default — the conversation/feed is the primary surface. Kept in
     PX (not vw) so the splitter, which reads/writes this property in px, can drag
     smoothly and reach the default. Splitter clamps to the same [320,720] range. */
  --cg-left-w: 560px;
  display: grid;
  grid-template-columns: clamp(320px, var(--cg-left-w), 720px) 10px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - 100px);
  overflow: hidden;
}

.courseai-workspace.is-planning .context-wrap {
  max-width: none;
  margin: 0;
  position: sticky;
  top: 0;
  max-height: 100%;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding-right: 0;
  border-right: none;
}

/* ─── RESIZABLE SPLITTER ──────────────────────────────────────────────── */
.cg-splitter {
  display: none;
}

.courseai-workspace.is-planning .cg-splitter {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  background: var(--border);
  position: relative;
  min-height: 0;
  transition: background .15s;
  user-select: none;
}

.courseai-workspace.is-planning .cg-splitter::before {
  content: '';
  display: block;
  width: 2px;
  height: 48px;
  border-radius: 2px;
  background: var(--muted-fg);
  opacity: 0.4;
  transition: opacity .15s, background .15s;
}

.courseai-workspace.is-planning .cg-splitter:hover,
.courseai-workspace.is-planning .cg-splitter:focus-visible {
  background: var(--brand-soft);
}

.courseai-workspace.is-planning .cg-splitter:hover::before,
.courseai-workspace.is-planning .cg-splitter:focus-visible::before {
  background: var(--brand);
  opacity: 0.8;
}

.courseai-workspace.is-planning .cg-splitter:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.courseai-workspace.cg-resizing {
  user-select: none;
  cursor: col-resize;
}

.courseai-workspace.cg-resizing .cg-splitter::before {
  background: var(--brand);
  opacity: 1;
}

.courseai-workspace.is-planning .context-head {
  text-align: left;
}

/* ─── CONTEXT FORM ────────────────────────────────────────────────────── */
.context-wrap {
  max-width: 768px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 32px;
}

.context-head {
  text-align: center;
  margin-bottom: 20px;
}
.context-head h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.context-head p {
  font-size: 13.5px;
  color: var(--muted-fg);
}

/* Card */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: visible;
  transition: border-color .15s, box-shadow .15s;
}

/* Textarea */
.prompt-textarea {
  display: block;
  width: 100%;
  min-height: 148px;
  max-height: 260px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.65;
  font-family: inherit;
  color: var(--fg);
  background: var(--card);
  border: none;
  outline: none;
  resize: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.prompt-textarea::placeholder { color: hsl(215, 20%, 65%); }

/* Chips row */
.chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 12px 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.chip-syllabus {
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid hsl(260, 37%, 42%, 0.3);
}
.chip-guideline {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid hsl(10, 81%, 42%, 0.3);
}
.chip-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border-radius: 50%;
  color: inherit;
  line-height: 1;
  transition: background .12s;
}
.chip-syllabus .chip-btn:hover  { background: hsl(260, 37%, 42%, 0.15); }
.chip-guideline .chip-btn:hover { background: hsl(10, 81%, 42%, 0.15); }

/* Toolbar */
.card-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  background: hsl(215, 25%, 96%, 0.4);
  border-radius: 0 0 var(--radius) var(--radius);
}

.tbar-left {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 32px;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--muted-fg);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
  line-height: 1;
}
.tbar-btn:hover { background: hsl(215, 25%, 90%); color: var(--fg); }

.tbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Language select */
.tbar-select {
  height: 32px;
  padding: 0 8px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: var(--muted-fg);
  cursor: pointer;
  outline: none;
  transition: border-color .12s, color .12s;
  appearance: none;
  -webkit-appearance: none;
}
.tbar-select:hover  { border-color: hsl(215, 20%, 70%); color: var(--fg); }
.tbar-select:focus  { border-color: var(--primary); color: var(--fg); }

/* Toggle switch (Imágenes) */
.tbar-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  cursor: pointer;
  margin: 0;
  transition: background .12s;
  user-select: none;
}
.tbar-toggle-wrap:hover { background: hsl(215, 25%, 90%); }

.tbar-toggle-label {
  font-size: 13px;
  color: var(--muted-fg);
  transition: color .15s;
}
.tbar-toggle-wrap:hover .tbar-toggle-label { color: var(--fg); }
.tbar-toggle-wrap.on .tbar-toggle-label    { color: var(--fg); }

.toggle-track {
  width: 30px;
  height: 17px;
  border-radius: 9999px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px hsl(215, 28%, 17%, 0.25);
  transition: transform .2s;
}
.tbar-toggle-wrap.on .toggle-track  { background: var(--primary); }
.tbar-toggle-wrap.on .toggle-thumb  { transform: translateX(13px); }

.tbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kbd-hint {
  font-size: 11.5px;
  color: hsl(215, 16%, 65%);
}

.btn-generate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, opacity .12s;
  line-height: 1;
}
.btn-generate:hover             { background: hsl(10, 76%, 56%); }
.btn-generate:disabled          { opacity: .45; cursor: not-allowed; }
.btn-generate:disabled:hover    { background: var(--primary); }

/* Guideline count badge inside toolbar button */
.guideline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ─── FORM TIP ────────────────────────────────────────────────────────── */
.form-tip {
  text-align: center;
  font-size: 12px;
  color: hsl(215, 16%, 65%);
  margin-top: 12px;
}

/* ─── Spinner animation ──────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
}

/* ─── GUIDELINES POPOVER ──────────────────────────────────────────────── */
.popover-wrap { position: relative; display: inline-flex; }

.popover-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px hsl(215, 28%, 17%, 0.15);
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
}
.popover-panel.open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.pop-search-row {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
}
.pop-search-inner { position: relative; }
.pop-search-inner svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-fg);
  pointer-events: none;
}
.pop-search-inner input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fg);
  background: var(--card);
  outline: none;
  transition: border-color .15s;
}
.pop-search-inner input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsl(10, 81%, 42%, 0.15);
  outline: none;
}

.pop-note {
  font-size: 11px;
  color: var(--muted-fg);
  margin-top: 6px;
}

.pop-list {
  list-style: none;
  padding: 6px;
  max-height: 256px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.pop-item {
  display: flex;
  align-items: center;
  padding: 6px 6px;
  border-radius: 8px;
  transition: background .1s;
  gap: 4px;
}
.pop-item:hover    { background: var(--muted); }
.pop-item.selected { background: var(--primary-soft); }

/* The main clickable area (radio + text) */
.pop-select-btn {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 4px 4px;
  min-width: 0;
  font-family: inherit;
  border-radius: 6px;
}

.pop-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid hsl(215, 16%, 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .12s, background .12s;
}
.pop-item.selected .pop-radio {
  background: var(--primary);
  border-color: var(--primary);
}

.pop-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-fg);
  display: none;
}
.pop-item.selected .pop-dot { display: block; }

.pop-item-text { flex: 1; min-width: 0; }
.pop-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.pop-item-cat {
  font-size: 11px;
  color: var(--muted-fg);
  margin-top: 2px;
  display: block;
}

/* Eye button on the right */
.pop-eye-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  color: var(--muted-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
  line-height: 1;
}
.pop-eye-btn:hover {
  background: hsl(215, 25%, 90%);
  color: var(--fg);
}

.pop-empty {
  text-align: center;
  padding: 24px;
  font-size: 13px;
  color: var(--muted-fg);
}

/* ─── Guideline preview modal ─────────────────────────────────────────── */
.preview-dialog { max-width: 560px; }

.preview-modal-content {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px hsl(215, 28%, 17%, 0.18) !important;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Circle-X close button */
.preview-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 50%;
  transition: background .12s;
  z-index: 10;
}
.preview-close:hover { background: var(--primary-soft); }

/* Header area */
.preview-header {
  padding: 24px 48px 16px 24px;
  border-bottom: none;
}

.preview-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.preview-title span {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.3;
}

.preview-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Outlined category badge (matches shadcn Badge variant="outline") */
.preview-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 9999px;
  border: 1.5px solid var(--border);
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.5;
}

.preview-subtitle-text {
  font-size: 13px;
  color: var(--muted-fg);
}

/* Body with bordered description box */
.preview-body {
  padding: 0 24px 24px;
}

.preview-desc-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.preview-desc-box p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted-fg);
  margin: 0;
}

/* Planning view */
.plan-markdown {
  font-size: 14px;
  line-height: 1.75;
  color: var(--fg);
  min-height: 32px;
  word-break: break-word;
}
.plan-markdown h1 { font-size: 20px; font-weight: 700; margin: 0 0 14px; letter-spacing: -0.01em; }
.plan-markdown h2 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.plan-markdown h3 { font-size: 14px; font-weight: 700; margin: 16px 0 6px; }
.plan-markdown p  { margin: 0 0 10px; }
.plan-markdown ul,
.plan-markdown ol { padding-left: 22px; margin: 0 0 10px; }
.plan-markdown li { margin-bottom: 4px; }
.plan-markdown strong { font-weight: 700; }
.plan-markdown code {
  background: var(--muted);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.plan-markdown pre {
  background: var(--muted);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.plan-markdown pre code { background: none; padding: 0; }
.plan-markdown hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.plan-markdown blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  margin: 0 0 10px;
  color: var(--muted-fg);
}

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

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--primary);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: blink 0.7s step-end infinite;
}

.plan-actions {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.plan-action-hint {
  font-size: 13px;
  color: var(--muted-fg);
  margin: 0;
  flex: 1;
}

.plan-action-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btn-plan-approve {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, opacity .12s;
}
.btn-plan-approve:hover:not(:disabled) { background: hsl(10, 76%, 56%); }
.btn-plan-approve:disabled { opacity: .45; cursor: not-allowed; }
.planning-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

/* Centered loading spinner for initial planning phase */
.planning-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 24px;
  text-align: center;
}

.planning-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3.5px solid hsl(215, 20%, 88%);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.planning-loading-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-fg);
  margin: 0;
}

/* ─── Loading skeletons — mimic the real planning UI shape ────────────────
   Used in three spots that all read the same: the reload overlay (both
   columns), the first-generation center loader (#planningLoading), and the
   first-generation left loader (#cgLeftSkeleton). They occupy only the content
   area (never a full-screen blocking spinner) and preview the layout that will
   appear: a checklist (circle + line) on the left and activity cards (type
   chip + title + description lines) in the center. */

/* Primitives */
.cg-sk-line {
  display: block;
  height: 11px;
  border-radius: 6px;
}

.cg-sk-checks-wrap {
  padding: 4px 0 8px;
}

.cg-sk-checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cg-sk-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}

.cg-sk-check__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.cg-sk-check__name {
  flex: 1;
  height: 11px;
  border-radius: 6px;
}

.cg-sk-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
}

.cg-sk-section-head__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.cg-sk-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border, hsl(215 20% 88%));
  border-radius: var(--radius, .75rem);
  margin-bottom: 12px;
}

.cg-sk-card__chip {
  width: 56px;
  height: 24px;
  border-radius: 7px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.cg-sk-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cg-sk-label {
  width: 38%;
  height: 9px;
  border-radius: 5px;
  margin-bottom: 12px;
  opacity: .7;
}

/* Reload overlay — spans the two-column workspace */
.cg-resume-skeleton {
  display: grid;
  grid-template-columns: clamp(280px, 440px, 620px) 10px minmax(0, 1fr);
  gap: 0;
  padding: 24px 0;
  width: 100%;
}

.cg-resume-skeleton__side {
  display: flex;
  flex-direction: column;
  padding: 8px 24px 8px 4px;
  border-right: 1px solid var(--border, hsl(215 20% 88%));
}

.cg-resume-skeleton__main {
  grid-column: 3;
  padding: 8px 4px 8px 24px;
}

/* First-generation center skeleton — a left-aligned card stack in the center
   column, shown while the first instruction streams. */
.cg-center-skeleton {
  padding: 8px 2px;
}

@media (max-width: 900px) {
  .cg-resume-skeleton {
    grid-template-columns: 1fr;
  }
  .cg-resume-skeleton__side {
    border-right: 0;
    border-bottom: 1px solid var(--border, hsl(215 20% 88%));
  }
  .cg-resume-skeleton__main {
    grid-column: 1;
    padding-left: 4px;
  }
}

.planning-stream-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.pc-completion-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

/* Celebration badge: just the party-popper (no disc). On completion the popper
   FIRES — colourful confetti bursts far outward from the cone (the .pc-confetti
   particles below), while the cone itself settles in gently. */
.pc-completion-icon {
  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: cg-completion-appear .35s ease-out both;
}

.pc-completion-emoji {
  font-size: 46px;
  line-height: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
}

/* Confetti layer. The pieces are created and animated by JS (Web Animations API)
   in showCompletionView so they get real physics — an outward burst that arcs down
   under gravity, spinning and fading. Overflow is visible so they clear the disc. */
.pc-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
@keyframes cg-completion-appear {
  0%   { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-completion-icon { animation: none; }
}

.pc-completion-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--fg);
}

.pc-completion-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-fg);
  max-width: 520px;
}

.pc-completion-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Modest buttons in the brand line — a flat coral primary (no heavy gradient/shadow)
   and a quiet outline secondary, matching the add/decision buttons elsewhere. */
.btn-completion-primary,
.btn-completion-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 150px;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}

.btn-completion-primary {
  border: none;
  background: var(--primary);
  color: var(--primary-fg);
  cursor: pointer;
}

.btn-completion-primary:hover:not(:disabled) {
  background: hsl(10 76% 56%);
}

.btn-completion-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-completion-secondary {
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--muted-fg);
  cursor: pointer;
}

.btn-completion-secondary:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: hsl(10 85% 97%);
}

.btn-completion-secondary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .pc-completion-card {
    padding: 24px 16px;
  }

  .pc-completion-icon {
    width: 72px;
    height: 72px;
  }

  .pc-completion-title {
    font-size: 22px;
  }

  .pc-completion-summary {
    font-size: 15px;
  }

  .btn-completion-primary,
  .btn-completion-secondary {
    width: 100%;
    min-width: 0;
    font-size: 15px;
    height: 44px;
  }

  .pc-completion-actions {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .pc-completion-title {
    font-size: 20px;
  }

  .pc-completion-summary {
    font-size: 14px;
  }
}

.pc-card-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 22px 20px;
}

.pc-icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsl(10 81% 42% / .10);
}

.pc-spin {
  width: 22px;
  height: 22px;
  color: var(--primary);
  animation: spin 1s linear infinite;
}

.pc-spin.done { animation: none; }

#planningCheckIcon {
  width: 20px;
  height: 20px;
  color: var(--primary);
}
.pc-info { flex: 1; min-width: 0; }

.pc-step {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted-fg);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.pc-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 3px;
  line-height: 1.35;
}

.pc-subtitle {
  font-size: 13px;
  color: var(--muted-fg);
  margin: 0 0 14px;
  line-height: 1.4;
  min-height: 18px;
}

.pc-progress-wrap { padding: 22px 22px 16px; }
.pc-progress-row { display: flex; justify-content: space-between; margin-bottom: 5px; }
.pc-progress-label { font-size: 12px; color: var(--muted-fg); }
.pc-progress-pct { font-size: 12px; font-weight: 700; color: var(--fg); }

.pc-bar-track {
  height: 6px;
  background: var(--muted);
  border-radius: 99px;
  overflow: hidden;
}

.pc-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width .35s ease;
}

.pc-toggle-row {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: 0;
}

.pc-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-fg);
  cursor: pointer;
  font-family: inherit;
  transition: color .12s, background .12s;
}
.pc-toggle-btn:hover { background: var(--muted); color: var(--fg); }

.pc-chevron {
  flex-shrink: 0;
  transition: transform .2s ease;
}

.pc-details-panel {
  border-top: 1px solid var(--border);
  padding: 16px 22px;
}

.ps-section {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  animation: fade-in-up 0.25s ease both;
}
.ps-section:first-child { padding-top: 0; }
.ps-section:last-child { border-bottom: none; padding-bottom: 0; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ps-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.ps-section-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: hsl(10, 81%, 42%, 0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

.ps-section-info { flex: 1; min-width: 0; }

.ps-section-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 2px;
  line-height: 1.4;
}

.ps-section-desc {
  font-size: 12.5px;
  color: var(--muted-fg);
  margin: 0;
  line-height: 1.5;
}

.ps-section-count {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--muted-fg);
  white-space: nowrap;
  padding-top: 3px;
}

.ps-activities {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-activity {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--muted);
  border-radius: 7px;
  padding: 7px 10px;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}

@keyframes ps-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ps-skeleton-line {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, hsl(210 15% 88%) 25%, hsl(210 20% 94%) 50%, hsl(210 15% 88%) 75%);
  background-size: 200% 100%;
  animation: ps-skeleton-shimmer 2.4s linear infinite;
}

.ps-skeleton-line--section {
  width: clamp(160px, 45%, 340px);
  height: 16px;
}

.ps-skeleton-line--activity {
  width: 100%;
  height: 14px;
}

.ps-activity--pending {
  background: hsl(210 20% 95%);
  border-color: hsl(210 20% 90%);
  opacity: .9;
}

.ps-activity--pending .ps-badge {
  display: none;
}

.ps-activity--pending .ps-badge-text {
  visibility: hidden;
}

.ps-activity--pending .ps-activity-name {
  color: transparent;
  display: block;
  width: 100%;
  height: 14px;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(90deg, hsl(210 15% 88%) 25%, hsl(210 20% 94%) 50%, hsl(210 15% 88%) 75%);
  background-size: 200% 100%;
  animation: ps-skeleton-shimmer 2.4s linear infinite;
}

.ps-section--pending .ps-section-name {
  color: transparent;
}

.ps-activity--in_progress {
  background: var(--muted);
  border-color: transparent;
}

.ps-activity--done {
  background: var(--muted);
  border-color: transparent;
}

.ps-status-indicator {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}

.ps-status-indicator svg {
  width: 10px;
  height: 10px;
  fill: none;
  display: none;
}

.ps-status-indicator .check-icon {
  stroke: var(--fg);
  stroke-width: 3;
}

.ps-status-indicator .spinner-icon {
  stroke: var(--muted-fg);
  stroke-width: 2.5;
  animation: courseai-spin .8s linear infinite;
}

.ps-status-indicator--in_progress svg.spinner-icon {
  display: block;
}

.ps-status-indicator--done svg.check-icon {
  display: block;
}

.ps-activity-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.ps-activity-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
}

.ps-image-progress {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 0;
  margin-left: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: hsl(215 26% 32%);
  background: hsl(215 24% 88%);
}

.ps-activity-desc {
  font-size: 12px;
  color: var(--muted-fg);
  line-height: 1.45;
}

/* Moodle Custom Sections style: a soft per-purpose COLORED icon chip + a NEUTRAL
   type label (no filled rainbow pill). The color lives only on the small icon
   chip, so the row reads like a real Moodle course item without being noisy. */
.ps-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 0;
  background: transparent;
  color: var(--muted-fg, hsl(215 16% 42%));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 1px;
}

/* The icon becomes a small rounded chip; its background is the purpose tint. */
.ps-badge-icon {
  width: 24px;
  height: 24px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  background: var(--muted, hsl(215 25% 95%));
}

.ps-badge-text {
  display: inline-block;
  line-height: 1;
  color: var(--muted-fg, hsl(215 16% 42%));
}

/* Soft per-purpose tint on the icon chip only (Moodle-like, calm). */
.dp-purpose-content .ps-badge-icon       { background: hsl(170 55% 90%); }
.dp-purpose-assessment .ps-badge-icon    { background: hsl(10 81% 92%); }
.dp-purpose-collaboration .ps-badge-icon { background: hsl(142 50% 90%); }
.dp-purpose-communication .ps-badge-icon { background: hsl(38 80% 90%); }

/* ─────────────────────────────────────────────────────────────
   §3  Preview panel — Moodle topics-format course view
   ───────────────────────────────────────────────────────────── */

/* Outer card shell */
/* No outer box: the review area is NOT a card. The status line and the sections
   share the same alignment; no border wraps everything. */
.prv-card {
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Discreet status line (not a prominent card): small, transparent, no border. */
.prv-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 10px;
  border-bottom: none;
  background: transparent;
  transition: none;
}

.prv-header--done {
  background: transparent;
}

.prv-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 0;
  background: hsl(var(--primary-hsl, 8 72% 42%) / .12);
  color: var(--primary);
}

.prv-icon-wrap svg {
  width: 13px;
  height: 13px;
}

.prv-header--done .prv-icon-wrap {
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid var(--muted-fg);
  color: var(--muted-fg);
}

@keyframes prv-spin {
  to { transform: rotate(360deg); }
}

.prv-spin {
  animation: prv-spin 0.8s linear infinite;
}

.prv-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.prv-header-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-fg);
  margin: 0;
}

/* The live status line changes text on every event; clamp it to ONE line with an
   ellipsis so its height never changes (a wrapping 2nd line made the whole panel
   below jump/vibrate as the text length varied). */
.prv-header-sub {
  font-size: 12px;
  color: var(--muted-fg);
  margin: 0;
  opacity: .85;
  max-width: 100%;
  min-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Section row: Moodle topic card ── */
.prv-section-row {
  border-bottom: 1px solid var(--border);
  background: var(--card);
  transition: background var(--t-fast) var(--ease);
}

.prv-section-row:last-child {
  border-bottom: none;
}

/* Subtle left accent — echoes Moodle's topic stripe */
.prv-section-row:not(:first-child) {
  border-left: 3px solid transparent;
}

.prv-section-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}

.prv-section-btn:hover {
  background: hsl(215 30% 97%);
}

/* ── Action buttons: hidden by default, reveal on row hover ── */
.dp-item-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

/* Reveal when the parent row / button is hovered or focused-within */
.prv-section-btn:hover .dp-item-actions,
.prv-section-btn:focus-within .dp-item-actions {
  opacity: 1;
}

.dp-item-actions--image {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  z-index: 2;
}

.dp-action-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: hsl(215 35% 97%);
  color: hsl(215 18% 46%);
  font-size: 12px;
  cursor: pointer;
  transition: all .12s;
  box-shadow: 0 1px 2px hsl(215 28% 17% / .04);
}

.dp-action-icon {
  width: 14px;
  height: 14px;
  display: block;
  filter: brightness(0) saturate(100%);
  opacity: .5;
}

.dp-action-btn:hover {
  color: hsl(215 28% 34%);
  box-shadow: 0 2px 5px hsl(215 28% 17% / .08);
}

.dp-action-btn:focus,
.dp-action-btn:focus-visible {
  outline: 2px solid hsl(10 81% 50% / .35);
  outline-offset: 1px;
}

.dp-item-actions--image .dp-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: hsl(0 0% 100% / .96);
}

.dp-item-actions--image .dp-action-btn:hover {
  color: hsl(10 81% 42%);
}

/* Topic number badge — compact circle */
.prv-section-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted-fg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}

.prv-section-info {
  flex: 1;
  min-width: 0;
}

/* Section title: strong, readable, Moodle-like topic heading */
.prv-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

/* Activity count: subtle meta pill */
.prv-section-meta {
  font-size: 11.5px;
  color: var(--muted-fg);
  margin: 0;
  line-height: 1.5;
}

.prv-section-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prv-chevron {
  flex-shrink: 0;
  color: var(--muted-fg);
  transition: transform .18s;
}

.prv-chevron--open {
  transform: rotate(90deg);
}

/* Section body: indented activity list */
.prv-section-body {
  padding: 4px 16px 16px 54px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Activity row: Moodle activityname row style ── */
.prv-activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: transparent;
  padding: 10px 10px;
  transition: background var(--t-fast) var(--ease), opacity .2s;
  width: 100%;
  border: none;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
}

.prv-activity-item:focus,
.prv-activity-item:focus-visible {
  outline: none;
  box-shadow: none;
}

.prv-activity-item--pending {
  opacity: .32;
}

.prv-activity-item--done {
  opacity: 1;
  animation: fade-in-up .22s ease both;
}

.prv-activity-text {
  flex: 1;
  min-width: 0;
}

.prv-activity-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 1px;
  line-height: 1.3;
}

.prv-activity-desc {
  font-size: 11.5px;
  color: var(--muted-fg);
  margin: 0;
  line-height: 1.5;
}

.dp-ai-inline {
  border-top: 1px dashed var(--border);
  background: var(--bg);
  padding: 8px 10px 10px;
}

.dp-image-wrap > .dp-ai-inline {
  margin: 0 0 8px;
  border-radius: 8px;
}

.prv-section-row > .dp-ai-inline {
  margin: 0 20px 6px 58px;
  border-radius: 8px;
}

.dp-ai-textarea {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  font-family: inherit;
  color: var(--fg);
  background: var(--card);
}

.dp-ai-textarea:focus,
.dp-ai-textarea:focus-visible {
  outline: none;
  border-color: hsl(10 81% 42% / .45);
  box-shadow: 0 0 0 2px hsl(10 81% 50% / .16);
}

.dp-ai-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dp-ai-btn {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.dp-ai-btn--secondary {
  background: var(--card);
  color: var(--muted-fg);
}

.dp-ai-btn--primary {
  background: hsl(10 81% 42%);
  border-color: hsl(10 81% 42%);
  color: hsl(0 0% 100%);
}

/* Regenerating state — loading pulse */
.dp-item-regenerating {
  opacity: 0.6;
  pointer-events: none;
  animation: dp-pulse 1.2s ease-in-out infinite;
}

/* Disabled action buttons while planning is streaming */
.dp-action-btn--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@keyframes dp-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}

.dp-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin: 0 0 8px;
}

.dp-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* Book subchapter: indented under its parent chapter so the chapter → subchapter
   nesting reads at a glance (Moodle books nest exactly 1 level). The muted, smaller
   number reinforces that it's a child. No guide line. */
.dp-item--sub {
  margin-left: 26px;
}

.dp-item--sub .dp-item-num {
  font-size: 11px;
  opacity: 0.75;
}

.dp-item--sub .dp-item-title {
  font-weight: 500;
}

.dp-item-num {
  flex-shrink: 0;
  font-family: monospace;
  font-size: 12px;
  color: var(--muted-fg);
  min-width: 16px;
}

.dp-item-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 1px;
  line-height: 1.3;
}

.dp-item-sub {
  font-size: 11.5px;
  color: var(--muted-fg);
  margin: 0;
  line-height: 1.4;
}

.dp-q-type {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--muted-fg);
  margin-top: 2px;
  white-space: nowrap;
}

.dp-images-container {
  margin-top: 12px;
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
}

.dp-images-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.dp-images-header-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.dp-images-header-icon {
  display: inline-flex;
  align-items: center;
  color: var(--muted-fg);
  margin-left: 2px;
}

.dp-images-header-icon svg {
  width: 16px;
  height: 16px;
}

.dp-images-header-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted-fg);
}

.dp-images-header-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  padding: 2px 8px;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dp-image-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.dp-image-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: none;
  border-radius: 12px;
  background: hsl(0 0% 100%);
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow .15s;
  position: relative;
}

.dp-image-card:hover {
  box-shadow: 0 2px 4px hsl(10 81% 20% / .08);
}

.dp-image-body {
  min-width: 0;
  flex: 1;
  position: relative;
  padding-right: 34px;
}

.dp-image-placement {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted-fg);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dp-image-description {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: hsl(215 15% 30%);
}

/* ============================================================
   §7 Planning controls — add section/activity + drag-and-drop
   ============================================================ */

/* "+ Add …" trigger button */
.dp-add-control {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  text-align: left;
}

.dp-add-control:hover {
  border-color: var(--brand, hsl(260 37% 42%));
  color: var(--brand, hsl(260 37% 42%));
  background: hsl(260 37% 42% / .05);
}

.dp-add-control:focus,
.dp-add-control:focus-visible {
  outline: 2px solid hsl(260 37% 42% / .35);
  outline-offset: 1px;
}

.dp-add-control--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.dp-add-control__icon {
  font-size: 16px;
  line-height: 1;
  color: var(--primary);
  flex-shrink: 0;
}

/* Wrapper that holds the add-section button + its inline panel */
.dp-add-section-wrap {
  margin-top: 14px;
}

/* "Add section" reads like Moodle's: wide, centered, 2px dashed, rounded. At REST it
   is a subtle dashed outline with accent text (no fill); it uses the SAME accent as
   the other add buttons for a single, cohesive palette (Moodle uses one accent too). */
.dp-add-section-wrap .dp-add-control {
  justify-content: center;
  padding: 14px;
  border-width: 2px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--primary);
  transition: background-color .15s, border-color .15s, color .15s;
}
/* On hover it FILLS with a light accent tint and a SOLID accent border — exactly like
   Moodle's "Add section" turning filled on hover (dashed → solid + light background). */
.dp-add-section-wrap .dp-add-control:hover {
  background: hsl(10 85% 94%);
  border-style: solid;
  border-color: var(--primary);
  color: var(--primary);
}

/* Inline panel override for add controls (no section indentation needed) */
.dp-add-section-wrap .dp-ai-inline {
  border-radius: 8px;
  margin-top: 4px;
}

/* Wrapper for add-activity within a section body */
.dp-add-activity-wrap {
  margin-top: 2px;
}

.dp-add-activity-wrap .dp-ai-inline {
  border-radius: 8px;
  margin-top: 4px;
}

/* Section row is a positioning context for the simple plan renderer. */
.prv-section-row {
  position: relative;
}

/* Visual feedback during drag */
.dp-dragging {
  opacity: 0.45;
  outline: 2px dashed hsl(10 81% 42% / .45);
  outline-offset: 2px;
  border-radius: 8px;
}

.dp-drag-over {
  outline: 2px solid hsl(10 81% 42% / .6);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ============================================================
   Proposals UI — free-text feedback interpretation block
   ============================================================ */

.plan-proposals {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-proposals-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

/* Clarification box */
.plan-proposals-clarification {
  background: hsl(260 37% 42% / .07);
  border: 1px solid hsl(260 37% 42% / .25);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-proposals-clarification-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand, hsl(260 37% 42%));
  text-transform: uppercase;
  letter-spacing: .04em;
}

.plan-proposals-clarification-text {
  margin: 0;
  font-size: 13px;
  color: var(--fg);
  line-height: 1.5;
}

/* Radio group */
.plan-proposals-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Individual proposal card (label wraps radio + text) */
.plan-proposal-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  user-select: none;
  background: var(--bg, #fff);
  margin: 0;
}

.plan-proposal-card:hover {
  border-color: var(--brand, hsl(260 37% 42%));
  background: hsl(260 37% 42% / .04);
}

.plan-proposal-card:has(.plan-proposal-radio:checked) {
  border-color: var(--brand, hsl(260 37% 42%));
  background: hsl(260 37% 42% / .07);
}

.plan-proposal-radio {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--brand, hsl(260 37% 42%));
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Moodle/Bootstrap paints a default BLUE focus ring (box-shadow) on form inputs.
   Override it with a brand-coloured ring so the checked proposal reads on-brand,
   not blue. The live card lives in .plan-proposals-group (NOT .plan-proposals), so
   target the element classes directly + !important to beat Moodle's base rule. */
.plan-proposal-radio:focus,
.plan-proposal-radio:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px hsl(260 37% 42% / .35) !important;
}

/* Moodle base list/label styles override our card border to a grey bottom rule,
   so the SELECTED card lost its brand outline. Force the brand border here. */
.plan-proposal-card {
  border: 1px solid var(--border, #dee2e6) !important;
}

.plan-proposal-card:has(.plan-proposal-radio:checked) {
  border-color: var(--brand, hsl(260 37% 42%)) !important;
  background: hsl(260 37% 42% / .07) !important;
}

/* Destructive selected card keeps the coral (primary) accent. */
.plan-proposal--destructive:has(.plan-proposal-radio:checked) {
  border-color: var(--primary, hsl(10 81% 63%)) !important;
  background: hsl(10 81% 63% / .09) !important;
}

.plan-proposal-summary {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.45;
  flex: 1;
}

/* Destructive variant */
.plan-proposal--destructive {
  border-color: hsl(10 81% 70%);
}

.plan-proposal--destructive:hover {
  border-color: var(--primary, hsl(10 81% 42%));
  background: hsl(10 81% 42% / .05);
}

.plan-proposal--destructive:has(.plan-proposal-radio:checked) {
  border-color: var(--primary, hsl(10 81% 42%));
  background: hsl(10 81% 42% / .08);
}

.plan-proposal-destructive-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: hsl(10 81% 42% / .12);
  color: var(--primary, hsl(10 81% 42%));
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

/* "Something else" option */
.plan-proposal-other-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-proposal-card--other {
  border-style: dashed;
}

.plan-proposal-other-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fg);
  background: var(--bg, #fff);
  resize: vertical;
  min-height: 68px;
  transition: border-color .12s;
  box-sizing: border-box;
}

.plan-proposal-other-textarea:focus {
  outline: none;
  border-color: var(--brand, hsl(260 37% 42%));
}

/* Action button row */
.plan-proposals-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-proposals-apply {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background: var(--brand, hsl(260 37% 42%));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, opacity .12s;
}

.btn-proposals-apply:hover:not(:disabled) {
  background: hsl(260 37% 36%);
}

.btn-proposals-apply:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.btn-proposals-dismiss {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-fg, hsl(215 15% 50%));
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, color .12s, opacity .12s;
}

.btn-proposals-dismiss:hover:not(:disabled) {
  border-color: var(--fg);
  color: var(--fg);
}

.btn-proposals-dismiss:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Fallen (no-longer-possible) proposals list */
.plan-proposals-fallen {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-proposals-fallen-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted-fg, hsl(215 15% 50%));
}

.plan-proposals-fallen-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-proposals-fallen-item {
  font-size: 12px;
  color: var(--muted-fg, hsl(215 15% 50%));
  line-height: 1.4;
}

.plan-proposals-fallen-summary {
  font-weight: 500;
}

.plan-proposals-fallen-reason {
  font-style: italic;
}

/* ─── Proposals inside the LEFT decision-log feed (Claude-style picker) ──
   Same controls as the center block, but a compact card that sits at the end of
   the feed — right where the user wrote the feedback. */
.cg-feed-proposals {
  margin: 10px 0 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cg-feed-proposals .plan-proposals-title {
  font-size: 12.5px;
}

.cg-feed-proposals .plan-proposals-group {
  gap: 6px;
}

.cg-feed-proposals .plan-proposal-card {
  padding: 9px 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.cg-feed-proposals .plan-proposal-summary {
  font-size: 12.5px;
  min-width: 0;
}

.cg-feed-proposals .plan-proposal-destructive-badge {
  margin-left: auto;
}

.cg-feed-proposals .plan-proposal-other-textarea {
  font-size: 12.5px;
  min-height: 56px;
}

.cg-feed-proposals .plan-proposals-btn-row {
  margin-top: 2px;
}

.cg-feed-proposals .btn-proposals-apply,
.cg-feed-proposals .btn-proposals-dismiss {
  height: 32px;
  font-size: 12.5px;
}

/* ─── Proposals INSIDE the decision card — flat, no nested boxes ──────────
   The decision card is already the single container, so the proposals block
   must not be another card, the clarification must not be a tinted box, and
   options are divider-separated rows (V0/Claude clarification style). */
.cg-decision-overlay .cg-feed-proposals {
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 10px;
}
.cg-decision-overlay .plan-proposals-clarification {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 4px;
}
.cg-decision-overlay .plan-proposals-clarification-label {
  color: var(--muted-fg);
}
.cg-decision-overlay .plan-proposals-group {
  gap: 0;
  border-top: 1px solid var(--border);
}
.cg-decision-overlay .plan-proposal-card {
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 12px 4px;
}
.cg-decision-overlay .plan-proposal-card:hover,
.cg-decision-overlay .plan-proposal-card:has(.plan-proposal-radio:checked) {
  border-color: transparent;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
}
.cg-decision-overlay .plan-proposal-other-wrap {
  gap: 0;
}
.cg-decision-overlay .plan-proposal-card--other {
  border-bottom: none;
}
/* Pencil affordance before "Something else", like the reference. */
.cg-decision-overlay .plan-proposal-card--other .plan-proposal-summary::before {
  content: '\270E\00a0';
  color: var(--muted-fg);
}
.cg-decision-overlay .plan-proposal-other-textarea {
  margin-top: 4px;
}

/* Center elements a selected proposal will affect — highlighted only while that
   option is checked (see ui-proposals onSelectionChange). Subtle, Moodle-like:
   a thin outline (no layout shift) instead of a heavy ring; a faint tint when
   the action deletes content. NEVER applied to the left checklist. */
.cg-affected {
  outline: 2px solid var(--brand, hsl(260 37% 42%));
  outline-offset: 1px;
  border-radius: 10px;
  transition: outline-color .15s ease, background-color .15s ease;
}

.cg-affected.cg-affected--destructive {
  outline-color: var(--primary, hsl(10 81% 42%));
  background-color: hsl(10 81% 42% / .05);
}

/* ─── Chat history: initial prompt display ────────────────────────────── */
.courseai-chat-history {
  margin-bottom: 12px;
}

.courseai-chat-history-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-bottom: 6px;
}

/* User message bubble — calm neutral, not pink */
.courseai-chat-message--user {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
}

.courseai-chat-message--user p {
  margin: 0;
}

/* Adjustment history messages */
.courseai-adjustment-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* Checklist items */
.courseai-checklist {
  margin-top: 10px;
}
/* The uppercase "COURSE SECTIONS" label is gone in §7.1; if any legacy round
   checklist still emits one, keep it hidden so the thread stays label-free. */
.courseai-checklist-label {
  display: none;
}
.courseai-checklist-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--fg);
  line-height: 1.4;
}

/* §7.1 — the section checklist is a grouped assistant turn block in the thread.
   Full-width flat card aligned with AI turns; avatar header + section list. */
/* No wrapping card: the step group is just the header + a list of independent,
   full-width section items (no border/background/padding box around them). */
.cg-thread-checklist {
  margin-top: 6px;
}
.cg-thread-checklist .courseai-checklist-list {
  gap: 6px;
}

/* Grouped-turn header: ✨ avatar + title row */
.cg-group-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cg-group-avatar {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
/* No glyph → no empty box / stray gap. */
.cg-group-avatar:empty {
  display: none;
}
.cg-group-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  line-height: 1.4;
}

/* NOTE: the compact chat card, textarea, toolbar and toolbar-left are styled
   canonically in chatui.css (seamless Claude-style composer). The duplicate rules
   that used to live here were removed — their toolbar had a border-top divider and
   a grey background strip that made the composer look like two stacked boxes. */

/* NOTE: the send button (.btn-compact-regenerate) and .compact-toolbar-right are
   styled canonically in chatui.css (circular V0 send button). The old rounded-rect
   pill rules that used to live here were removed because they conflicted by load
   order and produced a weird half-rect/half-red button. */

/* ─── Stop / Resume execution-control buttons ────────────────────────── */
.btn-stop-resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, color .12s, background .12s;
  line-height: 1;
}
.btn-stop {
  background: transparent;
  color: var(--danger, #c0392b);
  border-color: var(--danger, #c0392b);
}
.btn-stop:hover {
  background: var(--danger-soft, rgba(192, 57, 43, 0.08));
  border-color: var(--danger, #c0392b);
}
.btn-resume {
  background: var(--primary, hsl(215, 65%, 48%));
  color: #fff;
  border-color: transparent;
}
.btn-resume:hover {
  background: var(--primary-hover, hsl(215, 65%, 42%));
  border-color: transparent;
}
body.cg-execution-stopped .btn-compact-regenerate { display: none; }

/* ─── Reduced-motion override (ui-refactor §8) ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Mark animations (ui-refactor §7 / §8) ──────────────────────────── */

/* danger flash: pulse outline + soft background, holds for --hold-mark */
@keyframes cg-flash-danger {
  0%   { outline-color: transparent; background-color: transparent; }
  15%  { outline-color: var(--danger); background-color: var(--danger-soft); }
  80%  { outline-color: var(--danger); background-color: var(--danger-soft); }
  100% { outline-color: var(--danger); background-color: var(--danger-soft); }
}

.cg-mark-danger {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
  background-color: var(--danger-soft);
  animation: cg-flash-danger var(--hold-mark, 1100ms) var(--ease, ease) forwards;
}

/* info flash: pulse outline + soft background, holds for --hold-mark */
@keyframes cg-flash-info {
  0%   { outline-color: transparent; background-color: transparent; }
  15%  { outline-color: var(--info); background-color: var(--info-soft); }
  80%  { outline-color: var(--info); background-color: var(--info-soft); }
  100% { outline-color: var(--info); background-color: var(--info-soft); }
}

.cg-mark-info {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  background-color: var(--info-soft);
  animation: cg-flash-info var(--hold-mark, 1100ms) var(--ease, ease) forwards;
}

/* success enter: scale + fade + soft background */
@keyframes cg-enter-success {
  0%   { opacity: 0; transform: scale(.98); background-color: transparent; }
  40%  { opacity: 1; transform: scale(1);   background-color: var(--success-soft); }
  80%  { background-color: var(--success-soft); }
  100% { background-color: var(--success-soft); }
}

.cg-mark-success {
  outline: 2px solid var(--success-strong);
  outline-offset: 2px;
  background-color: var(--success-soft);
  animation: cg-enter-success var(--hold-mark, 1100ms) var(--ease, ease) forwards;
}

/* ─── Collapse-and-fade (used by markRemoving) ────────────────────────── */
.cg-removing {
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition:
    opacity    var(--t-slow, 320ms) var(--ease, ease),
    max-height var(--t-slow, 320ms) var(--ease, ease),
    padding    var(--t-slow, 320ms) var(--ease, ease),
    margin     var(--t-slow, 320ms) var(--ease, ease);
}

/* ─── Skeleton shimmer ────────────────────────────────────────────────── */
@keyframes cg-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.cg-skeleton {
  background: linear-gradient(
    90deg,
    var(--muted, hsl(215 25% 96%))          0%,
    var(--border, hsl(215 20% 88%))         40%,
    var(--muted, hsl(215 25% 96%))         60%,
    var(--muted, hsl(215 25% 96%))        100%
  );
  background-size: 200% 100%;
  animation: cg-shimmer 2.4s ease-in-out infinite;
  border-radius: var(--radius, .75rem);
  color: transparent;
}

/* ─── Indeterminate stream bar ────────────────────────────────────────── */
@keyframes cg-stream-sweep {
  0%   { left: -40%; }
  100% { left: 110%; }
}

.cg-stream-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.cg-stream-bar::after {
  content: '';
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--brand, hsl(260 37% 42%)) 50%,
    transparent 100%
  );
  animation: cg-stream-sweep 1.2s var(--ease, ease) infinite;
}

/* ─── Activity detail skeleton lines ──────────────────────────────────── */
.cg-skeleton-line {
  display: block;
  height: 10px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.cg-skeleton-line:last-child {
  margin-bottom: 0;
  width: 65%;
}

@media (prefers-reduced-motion: reduce) {
  .cg-skeleton {
    animation: none;
    background: var(--muted, hsl(215 25% 96%));
  }
}

/* ─── Conversation thread (§7.1) ───────────────────────────────────────────
   One continuous chronological chat. The initial prompt is the first user turn;
   AI planning/actions follow as flat turns with a ✨ icon. No uppercase section
   labels, minimal borders, calm palette, comfortable density. */
.cg-thread {
  scroll-behavior: smooth;
}

.cg-log {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The two feed halves sit in one visual thread; keep the rhythm continuous. */
.cg-thread-feed:not(:empty) + .cg-thread-checklist:not(.hidden),
.cg-thread-checklist:not(.hidden) {
  margin-top: 0;
}

/* Continuation feed below the checklist: only takes space once it has turns. */
#cgLogAfter.cg-thread-feed:not(:empty) {
  margin-top: 10px;
}

/* ── A single turn ─────────────────────────────────────────────────────── */
.cg-log-entry {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 12px;
  background: transparent;
  padding: 4px 2px;
}

/* Subtle AI vs user distinction (§7.1): user turns get a faint inset card with a
   left accent; AI turns stay flat. Not opposed bubbles — just enough to read. */
.cg-log-entry--turn-user {
  /* Neutral zinc card (V0 look) — a warm-neutral grey combines with the red
     accent, unlike the cool bluish --muted which read as "off". No border: the
     fill + radius define it cleanly. */
  background: hsl(240, 5%, 96%);
  border: none;
  border-radius: 16px;
  padding: 16px 20px;
}

.cg-log-entry--turn-ai {
  padding: 4px 2px 4px 0;
}

/* Legacy color bar: kept in the DOM for semantics but only shown on the
   non-turn status kinds (danger/info/success) as a thin accent. */
.cg-log-bar {
  display: none;
}
.cg-log-entry--danger .cg-log-bar,
.cg-log-entry--info .cg-log-bar,
.cg-log-entry--success .cg-log-bar {
  display: block;
  flex-shrink: 0;
  width: 3px;
  border-radius: 3px;
  align-self: stretch;
}
.cg-log-entry--danger  .cg-log-bar { background: var(--danger); }
.cg-log-entry--info    .cg-log-bar { background: var(--info); }
.cg-log-entry--success .cg-log-bar { background: var(--success-strong); }

/* Entry body: icon + message + timestamp */
.cg-log-body {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.cg-log-actor {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted-fg);
}
/* User turns carry their own card affordance; drop the redundant 👤 glyph. */
.cg-log-entry--turn-user .cg-log-actor {
  display: none;
}

.cg-log-msg {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cg-log-entry--turn-ai .cg-log-msg {
  color: var(--fg);
}

/* AI-output plain-text block (server-side thread replay): the full planning
   transcript step (sections + activities + descriptions + detailed_plan) is
   rendered verbatim as an AI turn. white-space:pre-wrap (inherited above)
   preserves newlines and indentation; tab-size keeps nested plan lines aligned.
   The existing fade/expand clamp (.cg-log-entry--clamped) handles long blocks. */
.cg-log-entry--turn-ai .cg-log-msg {
  tab-size: 2;
  -moz-tab-size: 2;
}

/* Markdown-rendered transcript turn (planned structure): the body is real HTML
   from `marked`, not preformatted text, so it must flow normally (override the
   pre-wrap above) and use scoped, COMPACT typography — headings never read
   oversized, lists stay tight — coherent with the rest of the chat panel. The
   existing clamp (.cg-log-entry--clamped, 160px + "Show more") keeps long
   transcripts from ever filling the panel. */
.cg-log-msg.cg-log-md {
  white-space: normal;
  tab-size: initial;
}
.cg-log-md > :first-child { margin-top: 0; }
.cg-log-md > :last-child { margin-bottom: 0; }
.cg-log-md h1,
.cg-log-md h2,
.cg-log-md h3,
.cg-log-md h4,
.cg-log-md h5,
.cg-log-md h6 {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  margin: 0.8em 0 0.25em;
  color: var(--fg);
}
.cg-log-md h3 { font-size: 1.04em; }
.cg-log-md p { margin: 0.35em 0; }
.cg-log-md ul,
.cg-log-md ol { margin: 0.3em 0; padding-left: 1.25em; }
.cg-log-md li { margin: 0.12em 0; }
.cg-log-md li > ul,
.cg-log-md li > ol { margin: 0.12em 0; }

/* Hierarchical numbering for ordered lists in the transcript (1, 1.1, 1.2, 2, …):
   suppress the native marker and render nested counters, so book subchapters read
   as 1.1/1.2 and every list keeps its numbering — one item per line. Flat lists just
   show 1, 2, 3. */
.cg-log-md ol {
  counter-reset: cg-li;
  list-style: none;
  padding-left: 0;
}
.cg-log-md ol ol { padding-left: 1.4em; }
.cg-log-md ol > li { counter-increment: cg-li; }
.cg-log-md ol > li::before {
  content: counters(cg-li, ".") ". ";
  color: var(--muted-fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: 0.35em;
}
.cg-log-md strong { font-weight: 700; }
.cg-log-md em { font-style: italic; color: var(--muted-fg); }
/* Approved-plan summary: one condensed element holds EVERY section, so each
   section heading (### name) must clearly outrank the bold activity titles
   (**title**) nested under it — otherwise sections and activities look identical
   (same size/weight). Scoped to the summary so the generic transcript is untouched. */
.cg-approved-summary .cg-log-md h3 {
  font-size: 1.25em;
  font-weight: 800;
  margin-top: 1.25em;
  padding-top: 0.6em;
  border-top: 1px solid var(--border);
}
.cg-approved-summary .cg-log-md > h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* Once the plan is approved the course is created and is no longer editable from
   this wizard, so the composer must stay gone — through generation, completion and
   reload. A declarative body class wins over whatever inline display any later
   setCompactChatState('enabled') sets (timing-proof, like body.cg-plan-reviewed). */
body.cg-plan-approved #compactChatCard { display: none !important; }
.cg-log-md code {
  font-family: var(--font-mono, monospace);
  font-size: 0.92em;
  background: var(--muted, rgba(0, 0, 0, .05));
  padding: 0.05em 0.3em;
  border-radius: 4px;
}
.cg-log-md hr { border: 0; border-top: 1px solid var(--border); margin: 0.6em 0; }
.cg-log-md a { color: var(--primary, inherit); }

.cg-log-ts {
  flex-shrink: 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--muted-fg);
  white-space: nowrap;
  opacity: .7;
  transition: opacity var(--t-fast, 120ms);
}
/* On user turns the timestamp is tiny and muted — only reveal fully on hover. */
.cg-log-entry--turn-user .cg-log-ts {
  opacity: 0;
}
.cg-log-entry--turn-user:hover .cg-log-ts {
  opacity: .6;
}

/* ── Long-message fade + expand (§7.1) ─────────────────────────────────── */
/* A turn is clamped only when its body actually overflows; the JS adds
   .cg-log-entry--clamped and appends the toggle button. */
.cg-log-entry--clamped {
  flex-wrap: wrap;
}
.cg-log-entry--clamped .cg-log-msg {
  max-height: 160px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.cg-log-entry--clamped.is-expanded .cg-log-msg {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.cg-log-toggle {
  flex: 0 0 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 2px 0 0;
  padding: 3px 8px;
  border: none;
  background: transparent;
  /* Calm, muted "Show more" — not the loud red accent (reserved for primary
     actions); a secondary control should not pull focus. */
  color: var(--muted-fg);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.cg-log-toggle:hover {
  background: var(--muted, hsl(215 25% 96%));
}
.cg-log-toggle-chevron {
  font-size: 13px;
  line-height: 1;
  transition: transform .15s ease;
}
.is-expanded .cg-log-toggle-chevron {
  transform: rotate(180deg);
}

/* "AI is analyzing your request" progress entry (free-text feedback). */
.cg-log-spin {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-top: 2px;
  border: 2px solid var(--border, hsl(215 20% 88%));
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.cg-log-thinking .cg-log-msg {
  color: var(--muted-fg);
}

/* The working/thinking indicator is always ONE short line, so its spinner must
   sit vertically CENTERED with the text. The feed default (align-items:flex-start
   + a 2px nudge on the spinner) top-aligns it, which left the spinner floating
   above the text — glaring now that it lives in the anchored bottom card. */
.cg-log-thinking .cg-log-body {
  align-items: center;
}
.cg-log-thinking .cg-log-spin {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cg-log-entry { transition: none; }
  .cg-thread { scroll-behavior: auto; }
  .cg-log-toggle-chevron { transition: none; }
  .cg-log-spin { animation: none; }
  .cg-log-ts { transition: none; }
}

/* ─── Scroll architecture: ONE scroll per column, pinned chat, integrated bars ── */

/* No page scroll while planning — the workspace fills the viewport exactly. */
html:has(.courseai-workspace.is-planning),
body:has(.courseai-workspace.is-planning) { overflow: hidden; }
.aicoursecreation-main:has(.courseai-workspace.is-planning),
.app-main:has(.courseai-workspace.is-planning) { padding-bottom: 0; }

/* Left column is a flex column: the chat-scroll region grows and scrolls,
   while the compact chat stays pinned at the bottom (never scrolls away). */
.courseai-workspace.is-planning .context-wrap {
  flex-direction: column;
  overflow: hidden;
}
.courseai-workspace.is-planning .courseai-context-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
}

/* ─── Decision card (WU4) ──────────────────────────────────────────────── */
/* The plan-review decision sits at the BOTTOM of the chat column, in the
   composer's slot — it replaces ONLY the input field, NOT the message thread,
   which stays visible and scrollable above (like V0's question card). `order`
   pins it last in the flex column; the composer is hidden while it shows. */
.cg-decision-overlay {
  order: 10;
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.cg-decision-card {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cg-decision-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

.cg-decision-subtitle {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-fg);
  margin: -6px 0 0;
}

.cg-decision-body {
  min-height: 0;
  overflow-y: auto;
}

/* No proposals → no empty slot eating the card's flex gap. */
.cg-decision-body:empty {
  display: none;
}

.cg-decision-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.cg-decision-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .15s;
}

.cg-decision-btn--accept {
  background: var(--primary, #6b4eff);
  color: var(--primary-fg, #fff);
  border: none;
}

.cg-decision-btn--accept:hover {
  opacity: 0.88;
}

.cg-decision-btn--adjust {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
}

.cg-decision-btn--adjust:hover {
  background: var(--muted);
}

/* Slim "you can still accept" bar shown inside the composer after Adjust, so the
   user can always change their mind and accept the current plan. */
/* A standalone card ABOVE the composer (separate element), with a gap between
   them — not glued to the chat box. */
.cg-accept-bar {
  flex: 0 0 auto;
  align-self: flex-start;
  width: calc(100% - 4px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.cg-accept-bar-text {
  font-size: 12.5px;
  color: var(--muted-fg);
  line-height: 1.4;
}
.cg-accept-bar-btn {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
}
.cg-accept-bar-btn:hover {
  opacity: 0.88;
}

/* ─── Working-status slot (bottom pinned) ──────────────────────────────────
   During an action re-stream the composer is hidden; without a bottom element
   the "assistant is working" feedback (a feed turn) would float above an empty
   void down to the panel edge. This slot lives in the composer's bottom slot so
   the feedback reads as an anchored status bar. Empty the rest of the time. */
.cg-working-slot {
  flex: 0 0 auto;
  width: calc(100% - 4px);
  margin-top: 8px;
}
.cg-working-slot:empty {
  display: none;
  margin-top: 0;
}
/* The thinking entry, when hosted here, becomes a slim card (not a flat feed
   turn) so it visually anchors the bottom like the composer/accept bar do. */
.cg-working-slot .cg-log-thinking {
  margin: 0;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.courseai-workspace.is-planning .courseai-chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.courseai-workspace.is-planning .compact-chat-card {
  flex: 0 0 auto;
  margin-top: 8px;
  /* The scroll reserves 4px on the right for its scrollbar; match that so the
     composer aligns with the message thread and never sits under the scrollbar. */
  width: calc(100% - 4px);
}

/* Right column: the single scroll container for the whole preview. */
.courseai-workspace.is-planning .planning-wrap {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: none;
  margin: 0;
  padding: 8px 22px 28px;
}
/* The preview is a flex column; without this the fixed-height container would
   SHRINK the cards to fit (clipping content via .prv-card overflow:hidden) and
   never overflow. Pinning children to their content height lets the column
   actually overflow and scroll. */
.courseai-workspace.is-planning .planning-wrap > * {
  flex-shrink: 0;
}

/* Integrated, thin scrollbars on the two scroll regions only. */
.courseai-workspace.is-planning .courseai-chat-scroll,
.courseai-workspace.is-planning .planning-wrap {
  scrollbar-width: thin;
  scrollbar-color: hsl(215 18% 80%) transparent;
}
.courseai-workspace.is-planning .courseai-chat-scroll::-webkit-scrollbar,
.courseai-workspace.is-planning .planning-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.courseai-workspace.is-planning .courseai-chat-scroll::-webkit-scrollbar-track,
.courseai-workspace.is-planning .planning-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.courseai-workspace.is-planning .courseai-chat-scroll::-webkit-scrollbar-thumb,
.courseai-workspace.is-planning .planning-wrap::-webkit-scrollbar-thumb {
  background: hsl(215 16% 86%);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.courseai-workspace.is-planning .courseai-chat-scroll::-webkit-scrollbar-thumb:hover,
.courseai-workspace.is-planning .planning-wrap::-webkit-scrollbar-thumb:hover {
  background: hsl(215 16% 72%);
  background-clip: padding-box;
}

/* ============================================================
   §8 Detailed preview — EXACT Custom Sections replica
   The center preview emits core_courseformat markup so the loaded
   Boost theme styles it natively (.section-item border, .activity
   separator, .activity-grid layout, .activityiconcontainer purpose
   tint). The rules below only cover gaps Boost does not provide in
   the popup wizard context (no .editing body, no inplace controls):
   action-control reveal-on-hover, pending/done dim, description and
   detail slots, and container neutralisation so we do not double-card.
   ============================================================ */

/* The host #prvSections wraps the ul.course-content scaffold. Neutralise it
   so Boost's .section-item provides the only card chrome (no nested padding
   that would offset the replica). */
#prvSections.cg-course-replica {
  /* Align the section list flush with the discreet status line above (same 2px
     left inset) — sections must not look nested inside an outer box. */
  padding: 0 2px 8px;
}
#prvSections .course-content.course-section-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Boost gives the first .course-section a top margin; collapse it at the top. */
#prvSections .course-content > .course-section:first-child {
  margin-top: 0;
}

/* Collapse toggle chevron icon sizing inside the section header. */
#prvSections .icons-collapse-expand .icon {
  width: 14px;
  height: 14px;
  margin: 0;
}
#prvSections .icons-collapse-expand {
  flex-shrink: 0;
}

/* Section progress / image meta — small muted badges in the header. */
#prvSections .cg-section-meta,
#prvSections .cg-image-pill {
  font-weight: 500;
  font-size: 11px;
}

/* Action controls (AI adjust + delete). In PLANNING they are ALWAYS visible: a
   hover-only reveal left the collapse chevron sitting alone with phantom empty
   space beside it (where the invisible buttons still took room), which read as
   misaligned. Keeping them shown fills that space and the row reads cleanly. */
#prvSections .cg-item-actions {
  display: inline-flex;
  align-items: center;
  /* A touch more breathing room between the row controls (was cramped at 6px). */
  gap: 9px;
}
#prvSections .cg-item-actions .dp-action-btn {
  opacity: 1;
  transition: background-color var(--t-fast, .12s) var(--ease, ease),
              color var(--t-fast, .12s) var(--ease, ease);
  /* Flat, like Moodle's row controls — the base drop shadow made them look like
     raised, shadowed chips, which read as noisy in the clean preview. */
  box-shadow: none;
}
/* Clear (but light) hover feedback so it is obvious which control is about to be
   clicked: the chip fills a shade darker and its glyph deepens. No shadow. */
#prvSections .cg-item-actions .dp-action-btn:hover {
  box-shadow: none;
  background: hsl(215 26% 90%);
  color: hsl(215 28% 28%);
}
#prvSections .cg-item-actions .dp-action-btn:hover .dp-action-icon {
  opacity: .7;
}
/* The collapse chevron (collapsible-content indicator) sits LAST in the cluster
   (rightmost) in BOTH phases, so it is consistently flush-right — in generation
   the action buttons are gone and only this chevron remains, aligned at the end. */
#prvSections .cg-activity-chevron {
  order: 10;
}
/* Disabled-while-streaming controls stay hidden regardless. */
#prvSections .cg-item-actions .dp-action-btn.dp-action-btn--disabled {
  opacity: 0;
}

/* Activity pending/done dim — Boost has no streaming concept. */
#prvSections .activity-item.cg-activity--pending {
  opacity: .4;
  transition: opacity .2s var(--ease, ease);
}
#prvSections .activity-item.cg-activity--done {
  opacity: 1;
}

/* ── Generation phase: reuse the plan cards as a read-only LIVE progress view ──
   Scoped to body.cg-generating so the editable planning view is never touched.
   The cg-gen-* status class lands on the activity <li> (.activity-wrapper). The
   card looks DISABLED (dimmed + desaturated) while its content is pending/being
   created, and ACTIVATES (full opacity + colour) the moment it is created — with a
   spinner on the icon while in progress and a green check when done. Edit
   affordances are hidden; expandable activities STAY clickable. Drag-and-drop is
   off the whole phase (state.isStreaming gates the wirer). */
/* Generation is read-only: drop the edit controls (AI-adjust + delete) and the
   add buttons. But KEEP the collapse chevron — activities with content stay
   expandable — so hide only the .dp-action-btn inside the cluster, not the whole
   cluster (which also holds the chevron). The chevron then sits alone, flush-right. */
body.cg-generating #prvSections .cg-item-actions .dp-action-btn,
body.cg-generating #prvSections .dp-add-activity-wrap,
body.cg-generating #prvSections .dp-add-section-wrap { display: none !important; }
body.cg-generating #prvSections .activity-item.cg-activity--has-detail { cursor: pointer !important; }
body.cg-generating #prvSections .activity-icon { position: relative; }

/* Sections are NOT draggable during generation: default cursor, and no hover
   outline. Plain (non-collapsible) activities also keep the default cursor. */
body.cg-generating #prvSections .course-section .section-item,
body.cg-generating #prvSections .course-section-header,
body.cg-generating #prvSections .course-section .section-item .activity-item:not(.cg-activity--has-detail) {
  cursor: default !important;
}
/* No blue/red hover or focus ring during generation — the rows are read-only
   progress, so a prominent hover affordance is misleading. */
body.cg-generating #prvSections .course-section .section-item:hover { outline: none !important; }
body.cg-generating #prvSections .activity-item:hover,
body.cg-generating #prvSections .activity-item:focus,
body.cg-generating #prvSections .activity-item:focus-visible,
body.cg-generating #prvSections .cg-affected {
  outline: none !important;
  box-shadow: none !important;
}

/* PENDING — the whole card is "off": desaturated (grayscale) + slightly faded.
   Grayscale (not heavy opacity) keeps the collapse chevron/content readable. */
body.cg-generating #prvSections .cg-gen-pending .activity-item {
  opacity: .82;
  filter: grayscale(1);
  transition: opacity .35s ease, filter .35s ease;
}
/* IN PROGRESS — do NOT grayscale the whole card: a filter on .activity-item would
   also grey the coral spinner below (it is a descendant). Only mute the TEXT so it
   still reads as not-yet-final, while the icon + spinner keep the brand colour to
   mark "this one is being built now". A soft overall opacity keeps it gentle. */
body.cg-generating #prvSections .cg-gen-active .activity-item {
  opacity: .9;
  transition: opacity .35s ease, filter .35s ease;
}
body.cg-generating #prvSections .cg-gen-active .activity-name-area,
body.cg-generating #prvSections .cg-gen-active .cg-activity-desc-slot,
body.cg-generating #prvSections .cg-gen-active .cg-activity-detail {
  filter: grayscale(1);
  opacity: .85;
}
/* IN PROGRESS — a small spinner on the icon in the brand coral, kept SOFT (light
   coral ring + slightly dimmed by the card opacity) so it is present but not loud. */
body.cg-generating #prvSections .cg-gen-active .activity-icon::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid hsl(10 81% 63% / .3);
  border-top-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  animation: spin .8s linear infinite;
}
/* DONE — the card "turns on" (full colour) + a sober check badge on the icon
   (same muted tone as the section checklist check, NOT a loud green). */
body.cg-generating #prvSections .cg-gen-done .activity-item {
  opacity: 1;
  filter: none;
}
body.cg-generating #prvSections .cg-gen-done .activity-icon::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #fff;
  border: 1.5px solid var(--muted-fg);
  box-shadow: 0 0 0 2px #fff;
  /* Same crisp SVG checkmark as the section checklist check (stroke = --muted-fg
     hsl(215 16% 47%) ≈ #65758b), not a cramped text glyph. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365758b' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
/* Activities with detail are clickable to expand, but the whole row is also
   draggable (the preview is always editable). Keep the drag (move) cursor for
   consistency across ALL activities — Boost gives the first one `move`, and this
   used to override the rest to `pointer`, so only the first showed the drag
   affordance. The chevron/controls keep their own pointer cursor. */
/* During PLANNING the cards are draggable → keep the move (drag) cursor. The
   generation phase overrides this to default/pointer (read-only), see the
   body.cg-generating rules above. */
#prvSections .activity-item.cg-activity--has-detail {
  cursor: move;
}

/* ── Section drag affordance (mirror of Boost's editable .activity-item) ──
   Sections are reorderable too (init-view.js wires DnD on .course-section). Boost
   only shows the move cursor/outline via `.editing .course-section-header.draggable`,
   but the `.draggable` class is added by Moodle's reactive engine, which we do NOT
   run in this AMD popup. So we scope our own rules on the replica.

   Hovering the SECTION (header or its card chrome, but NOT an inner activity) gives
   the whole section a move cursor and a hover outline. The `:not(:has(.activity:hover))`
   guard (same technique Boost uses for activities) suppresses the section highlight
   while the cursor is over an inner activity, so the two never double-highlight. */
#prvSections .course-section .section-item {
  cursor: move;
}
#prvSections .course-section .section-item .activity-item,
#prvSections .course-section .section-item .activity-item .a,
#prvSections .course-section .section-item .icons-collapse-expand,
#prvSections .course-section .section-item .cg-item-actions,
#prvSections .course-section .section-item .dp-add-activity-wrap,
#prvSections .course-section .section-item .dp-add-section-wrap {
  cursor: default;
}
/* Inner activities keep their move (drag) cursor during planning (Boost .editing
   affordance). Generation overrides to default/pointer via body.cg-generating. */
#prvSections .course-section .section-item .activity-item.cg-activity--has-detail,
#prvSections .course-section .section-item .activity-item:hover {
  cursor: move;
}
/* Hover outline on the section card — suppressed while hovering an inner activity
   OR a nested subsection, so only ONE element (the innermost hovered card)
   highlights at a time. */
#prvSections .course-section .section-item:hover:not(:has(.activity:hover)):not(:has(.cg-subsection:hover)) {
  outline: 2px solid hsl(10 81% 42% / .45);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Section highlight ("remarcado") alignment — same fix as the activity rows above.
   The cg-mark-* highlight was drawn on the OUTER li.course-section (sharp 0-radius
   corners, outline +2px OUTWARD), while the section hover outline sits on the inner
   .section-item (2px, offset -2px, 8px radius). The sharp outer highlight stuck out
   4px past the rounded inset hover border. Draw the highlight on the SAME
   .section-item box the hover uses so the two coincide exactly. */
#prvSections .course-section.cg-mark-success,
#prvSections .course-section.cg-mark-info,
#prvSections .course-section.cg-mark-danger {
  outline: none;
  background-color: transparent;
  animation: none;
}
#prvSections .course-section.cg-mark-success .section-item {
  outline: 2px solid var(--success-strong);
  background-color: var(--success-soft);
}
#prvSections .course-section.cg-mark-info .section-item {
  outline: 2px solid var(--info);
  background-color: var(--info-soft);
}
#prvSections .course-section.cg-mark-danger .section-item {
  outline: 2px solid var(--danger);
  background-color: var(--danger-soft);
}
#prvSections .course-section.cg-mark-success .section-item,
#prvSections .course-section.cg-mark-info .section-item,
#prvSections .course-section.cg-mark-danger .section-item {
  outline-offset: -2px;
  border-radius: 8px;
}
/* Boost paints the activity hover/focus outline in Moodle's blue (#0f6cbf). Recolour
   it to the brand accent so it matches the buttons — in Moodle this row outline is the
   same colour as the buttons on hover, not a foreign blue. */
#prvSections .activity-item:hover,
#prvSections .activity-item:focus-within,
#prvSections .activity-item.focus-control:focus-within {
  outline-color: var(--primary);
}

/* Highlight ("remarcado") alignment ─────────────────────────────────────────
   The add/change/delete highlight (cg-mark-*) was drawn on the OUTER wrap
   (li.activity: sharp 0-radius corners, outline pushed +2px OUTWARD), while the
   hover outline lives on the INNER .activity-item (2px, offset 0, 16px radius).
   The two boxes differ in size, corner radius and offset, so when a just-added
   row is hovered the sharp outer highlight stuck out past the rounded hover
   border — the "desastre" the user saw. Fix: strip the outline from the wrap and
   draw the highlight on the SAME .activity-item box the hover uses (same 2px
   width, offset 0, inherited 16px radius). Now hover and highlight occupy the
   EXACT same box: one clean rounded outline, neither ever sticking out past the
   other. The outline AND the soft background BOTH move to .activity-item — leaving
   the background on the outer wrap made a sharp-cornered fill that overflowed past
   the rounded outline. The wrap's own outline/background/animation are cleared. */
#prvSections .activity.cg-mark-success,
#prvSections .activity.cg-mark-info,
#prvSections .activity.cg-mark-danger {
  outline: none;
  background-color: transparent;
  animation: none;
}
#prvSections .activity.cg-mark-success .activity-item {
  outline: 2px solid var(--success-strong);
  background-color: var(--success-soft);
}
#prvSections .activity.cg-mark-info .activity-item {
  outline: 2px solid var(--info);
  background-color: var(--info-soft);
}
#prvSections .activity.cg-mark-danger .activity-item {
  outline: 2px solid var(--danger);
  background-color: var(--danger-soft);
}
#prvSections .activity.cg-mark-success .activity-item,
#prvSections .activity.cg-mark-info .activity-item,
#prvSections .activity.cg-mark-danger .activity-item {
  outline-offset: 0;
}

/* Proposal-selection highlight (.cg-affected) alignment — same fix as the marks and
   the hover. .cg-affected is added to the OUTER wrap, but the hover outline lives on
   the inner .activity-item/.section-item, so a hovered selected row showed the purple
   affected outline (wrap box, 10px radius) misaligned around the coral hover outline
   (inner box, 16px radius). Draw the affected outline on the SAME inner box the hover
   uses so the two coincide exactly. */
#prvSections .activity.cg-affected,
#prvSections .course-section.cg-affected {
  outline: none;
  background-color: transparent;
}
#prvSections .activity.cg-affected .activity-item {
  outline: 2px solid var(--brand, hsl(260 37% 42%));
  outline-offset: 0;
}
#prvSections .course-section.cg-affected .section-item {
  outline: 2px solid var(--brand, hsl(260 37% 42%));
  outline-offset: -2px;
  border-radius: 8px;
}
#prvSections .activity.cg-affected--destructive .activity-item {
  outline-color: var(--primary, hsl(10 81% 63%));
  background-color: hsl(10 81% 63% / .06);
}
#prvSections .course-section.cg-affected--destructive .section-item {
  outline-color: var(--primary, hsl(10 81% 63%));
  background-color: hsl(10 81% 63% / .06);
}

/* Streamed description slot (Moodle .activity-description grid area). */
#prvSections .cg-activity-desc-slot {
  grid-area: altcontent;
  /* Boost's .activity-description carries a 1px solid top border, which drew an
     ugly line between the activity NAME and its description (Moodle's real course
     view has no such line — the description flows straight under the name). Drop it. */
  border-top: none;
}
#prvSections .cg-activity-desc {
  font-size: 12px;
  color: var(--muted-fg);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* The description is Markdown, so it can carry emphasis, code and links. Give
   them weight against the muted body colour, and keep a link recognisable. */
#prvSections .cg-activity-desc strong,
.dp-item-sub strong {
  font-weight: 600;
  color: var(--fg);
}
#prvSections .cg-activity-desc em,
.dp-item-sub em {
  font-style: italic;
}
#prvSections .cg-activity-desc code,
.dp-item-title code,
.dp-item-sub code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.92em;
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
  border-radius: 3px;
  padding: 0 3px;
}
#prvSections .cg-activity-desc a,
.dp-item-sub a {
  color: inherit;
  text-decoration: underline;
}

/* Collapsible detail slot (chapters / questions / images). */
#prvSections .cg-activity-detail {
  grid-area: afterlink;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
#prvSections .cg-activity-chevron {
  display: inline-flex;
  color: var(--muted-fg);
  transition: transform .18s;
}
#prvSections .cg-activity-chevron--open {
  transform: rotate(90deg);
}

/* Add-section / add-activity controls are now <li> in the section lists;
   strip list styling so the dashed buttons read like Moodle's add-section. */
#prvSections .dp-add-section-wrap,
#prvSections .dp-add-activity-wrap,
#prvSections .dp-add-subsection-wrap {
  list-style: none;
}
#prvSections .dp-add-section-wrap {
  margin-top: 14px;
}
#prvSections ul.section .dp-add-activity-wrap {
  margin-top: 8px;
}

/* ── Replicate Moodle's course EDIT view: DASHED separators + roomier spacing ──
   The wizard page has no `body.editing`, so Boost paints the plain STUDENT view:
   a 1px SOLID separator between activities and tight section spacing. The user
   wants the EDIT view instead — where activities are split by a DASHED divider
   (Boost `.divider hr` = `$divider-width dashed $divider-color` = 2px dashed
   gray-300 #dee2e6) and sections sit further apart. Match those exact values.
   Applies to BOTH planning and generation (same #prvSections cards). */
#prvSections .course-section .activity {
  border-top: 2px dashed #dee2e6;
  margin-top: 10px;
  padding-top: 10px;
}
/* Dashed line ALSO above the first activity (between the section header and the
   first row), exactly like the edit view — Boost drops the first row's border. */
#prvSections .course-section .section .activity:first-child {
  border-top: 2px dashed #dee2e6;
  margin-top: 12px;
  padding-top: 12px;
}
/* Bigger gap between sections (edit view separates the section cards clearly). */
#prvSections .course-content > .course-section:not(:first-child) {
  /* ~32px ≈ Moodle's composed between-section gap in the edit view (section
     spacer + the divider element's own vertical margins). */
  margin-top: 32px;
}

/* ── On-hover "add activity" divider button (Moodle edit-view affordance) ──
   A "+" centered on the dashed line above each activity. Hovering the divider gap
   reveals it; clicking inserts a new activity at THAT slot (position-aware), so the
   user can add BETWEEN rows, not only at the end. Mirrors Boost's
   `.divider .divider-content` + `.btn.add-content`, wired to our add-activity flow.
   The zone is a child of the .activity wrap (rides along on reorder). */
#prvSections .course-section .activity {
  position: relative;
}
#prvSections .cg-insert-zone {
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
#prvSections .cg-insert-btn {
  opacity: 0;
  transition: opacity .12s ease, background-color .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Flat (wider than tall), like Moodle's divider "+" — a square chip looked bulky
     and, being taller than the gap, crowded the cards ("super pegado"). */
  width: 30px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  /* Soft at REST, solid on HOVER — like Moodle's add buttons (light tint that fills
     to the solid accent when hovered). */
  background: hsl(10 85% 91%);
  color: hsl(10 62% 42%);
  cursor: pointer;
  /* No halo — the opaque button covers the dashed line where it sits; a white
     box-shadow halo read as an ugly shadow around the button. */
  box-shadow: none;
  transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}
#prvSections .cg-insert-zone:hover .cg-insert-btn,
#prvSections .cg-insert-btn:focus-visible {
  opacity: 1;
}
#prvSections .cg-insert-btn:hover {
  background: var(--primary);
  color: var(--primary-fg);
}
/* Hovering the divider recolors the row's OWN dashed separator (the exact
   grey line the "+" sits on) instead of painting a second line — a separate
   overlay could sit a few pixels off inside nested subsections and read as
   two parallel lines. */
#prvSections .course-section .activity {
  transition: border-top-color .12s ease;
}

#prvSections .course-section .activity:has(> .cg-insert-zone .cg-insert-btn:hover),
#prvSections .course-section .activity:has(> .cg-insert-zone:focus-within) {
  border-top-color: var(--primary);
}

/* The insert divider is a PLANNING-only edit affordance. Generation is read-only. */
body.cg-generating #prvSections .cg-insert-zone {
  display: none !important;
}

/* Inline add-panel: opens right at the clicked "+" divider (between two rows),
   where the user clicked — not in the section's bottom panel. */
#prvSections .dp-inline-add {
  margin: 10px 0;
}
#prvSections .dp-inline-add .dp-ai-inline {
  margin: 0;
}

/* ── On-hover "add SECTION" divider between sections (Moodle's between-sections
   add affordance) ── Same "+" button, but it sits in the GAP above each section
   and inserts a new section at that slot. Only BETWEEN sections, so the divider
   above the very first section is hidden. */
#prvSections .course-section {
  position: relative;
}
#prvSections .cg-insert-zone--section {
  position: absolute;
  /* Span the full 32px gap above the section so the line + button sit in the MIDDLE
     of the gap, not crowded against either card. */
  top: -32px;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
/* On hover the whole divider appears: a dashed line spanning the gap WITH the "+"
   centered on it (exactly like Moodle's between-sections divider). Between section
   cards there is no static line, so it is drawn here and revealed on hover. The line
   and the button share the accent colour, so the button merges seamlessly into the
   line (Moodle's blue line → blue button), no white halo needed. */
#prvSections .cg-insert-zone--section::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  border-top: 2px dashed var(--primary);
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 0;
}
#prvSections .cg-insert-zone--section:hover::before,
#prvSections .cg-insert-zone--section:focus-within::before {
  opacity: 1;
}
/* The "+" sits ON the line (above the dashed rule). */
#prvSections .cg-insert-zone--section .cg-insert-btn {
  position: relative;
  z-index: 1;
}
/* Moodle shows dividers only BETWEEN sections — no "insert above the very top". */
#prvSections .course-content > .course-section:first-child .cg-insert-zone--section {
  display: none;
}

/* ── Bottom "Add activity" = Moodle's section-closing add button ──
   Moodle centers a SOLID button on the section's closing dashed line (the line
   runs on both sides). We have a single button, so it sits in the MIDDLE of that
   last divider — not a full-width dashed box (the previous look the user rejected). */
#prvSections .dp-add-activity-wrap,
#prvSections .dp-add-subsection-wrap {
  position: relative;
  display: block;
  margin-top: 14px;
  padding-top: 2px;
}
/* The closing dashed line, behind the centered button. Anchored near the button's
   vertical centre (top offset), so opening the add panel below never shifts it. */
#prvSections .dp-add-activity-wrap::before,
#prvSections .dp-add-subsection-wrap::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  border-top: 2px dashed #c8ccd1;
  transition: border-top-color .12s ease;
  z-index: 0;
}

/* Line changes colour only when the BUTTON is hovered, not the whole zone. */
#prvSections .dp-add-activity-wrap:has(.dp-add-control:hover)::before,
#prvSections .dp-add-activity-wrap:focus-within::before,
#prvSections .dp-add-subsection-wrap:has(.dp-add-control:hover)::before,
#prvSections .dp-add-subsection-wrap:focus-within::before {
  border-top-color: var(--primary);
}
#prvSections .dp-add-activity-wrap .dp-add-control,
#prvSections .dp-add-subsection-wrap .dp-add-control {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: none;
  border-radius: 6px;
  /* Soft at REST, solid on HOVER — like Moodle's "Add an activity or resource"
     button (a light tint that fills to the solid accent + white text on hover). */
  background: hsl(10 85% 91%);
  color: hsl(10 62% 42%);
  /* Flat like Moodle's add button — tight vertical padding + controlled line-height
     so the icon does not inflate the height (was noticeably taller than Moodle's). */
  padding: 4px 14px;
  font-size: 13px;
  line-height: 1.35;
  /* No shadow/halo — the opaque button already covers the dashed line where it sits
     (the line shows on both sides). A white box-shadow "halo" read as an ugly shadow. */
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease;
}
#prvSections .dp-add-activity-wrap .dp-add-control:hover,
#prvSections .dp-add-subsection-wrap .dp-add-control:hover {
  background: var(--primary);
  color: var(--primary-fg);
}
#prvSections .dp-add-activity-wrap .dp-add-control .dp-add-control__icon,
#prvSections .dp-add-subsection-wrap .dp-add-control .dp-add-control__icon {
  /* Follow the button text colour: coral at rest, white on hover. */
  color: inherit;
  font-size: 14px;
}
/* The add panel opens full-width below the centered button (not centered/shrunk). */
#prvSections .dp-add-activity-wrap .dp-ai-inline,
#prvSections .dp-add-subsection-wrap .dp-ai-inline {
  position: relative;
  z-index: 1;
  margin-top: 8px;
}

/* ── Subsections: nested Moodle section cards inside a section's cmlist.
   The row reuses the section-item markup, so Boost styles it natively; here
   only the nesting indent and spacing are adjusted. ── */
/* All subsections: 32px gap between them, indented 28px from parent. */
#prvSections .cg-subsection {
  list-style: none;
  margin: 32px 8px 32px 28px;
}
/* Last subsection before the "+" control: tighter bottom gap. */
#prvSections .cg-subsection:has(+ .dp-add-subsection-wrap) {
  margin-bottom: 8px;
}

/* The nested card never shows the between-sections "+" divider gap. */
#prvSections .cg-subsection .cg-insert-zone--section {
  display: none;
}

/* ── Between-subsections insert divider ──
   Moodle behaviour: line always visible (border grey), button hidden.
   Zone hover → button appears (grey). Button hover → line + button accent. */
#prvSections .cg-subsection .cg-insert-zone--subsection {
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
/* Line: always visible, same weight and colour as Moodle's section dividers. */
#prvSections .cg-subsection .cg-insert-zone--subsection::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed #c8ccd1;
  transition: border-color .15s ease;
  z-index: 0;
}
/* Button hover → line takes accent. */
#prvSections .cg-subsection .cg-insert-zone--subsection:has(.cg-insert-btn:hover)::before {
  border-top: 2px dashed var(--primary);
}
/* Button: HIDDEN by default. Zone hover → appears in standard colour.
   Button hover → accent colour (same as line). */
#prvSections .cg-subsection .cg-insert-zone--subsection .cg-insert-btn {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Zone hover → button appears in its normal look (primary outline). */
#prvSections .cg-subsection .cg-insert-zone--subsection:hover .cg-insert-btn {
  opacity: 1;
}

/* ── Bottom "Add subsection" control ── Shares the closing add-activity button
   look (see the shared selectors in that block), indented to the subsection
   column. */
#prvSections .dp-add-subsection-wrap {
  margin-left: 28px;
  margin-right: 8px;
  margin-top: 4px;
  list-style: none;
}

body.cg-generating #prvSections .dp-add-subsection-wrap {
  display: none !important;
}

/* The standalone "+ Add activity" row collapses into the "+" menu (its wrap
   stays in the DOM as the reconciler/append anchor). */
#prvSections .dp-add-activity-wrap.dp-add-wrap--merged {
  display: none !important;
}

/* Native-style "+" divider: a bare round button centered on a dashed line.
   The line is visible at rest (grey, like every closing line) and paints in
   the accent colour on hover, exactly like Moodle's divider. */
#prvSections .dp-add-subsection-wrap {
  text-align: center;
}

#prvSections .dp-add-subsection-wrap::before {
  top: 50%;
  transition: border-top-color .12s ease;
}

/* Handled by the :has(.dp-add-control:hover) rule above. */

#prvSections .dp-add-subsection-wrap .cg-insert-btn {
  opacity: 1;
  position: relative;
  z-index: 1;
}

/* ── "+ Add" dropdown (Activity or resource / Subsection), mirroring the real
   course's "+" menu between items. ── */
#prvSections .dp-add-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--border, #dee2e6);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  z-index: 30;
}

#prvSections .dp-add-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: #333;
}

#prvSections .dp-add-menu__item:hover {
  background: #f2f2f5;
}

#prvSections .dp-add-menu__icon {
  display: inline-flex;
  color: #555;
}

/* ── "+" options menu (ChatGPT-style toolbar) ──────────────────────────── */
.plus-menu-wrap {
  position: relative;
  display: inline-flex;
}

.plus-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-fg, #6c757d);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.plus-menu-btn:hover,
.plus-menu-btn[aria-expanded="true"] {
  background: var(--muted);
  color: var(--fg, #212529);
}

.plus-menu-item:hover svg:first-child,
.plus-menu-item:focus-visible svg:first-child {
  color: var(--fg, #212529);
}

.plus-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px hsl(215, 28%, 17%, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 60;
}

.plus-menu-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Compact toolbar (planning phase) sits at the bottom: its menu opens upward. */
.plus-menu-panel--up {
  top: auto;
  bottom: calc(100% + 8px);
}

.plus-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.plus-menu-item:hover,
.plus-menu-item:focus-visible {
  background: var(--muted);
}

.plus-menu-item svg:first-child {
  flex-shrink: 0;
  color: var(--muted-fg, #6c757d);
}

.plus-menu-item__label {
  flex: 1 1 auto;
  white-space: nowrap;
}

.plus-menu-item__value {
  font-size: 0.78rem;
  color: var(--muted-fg, #6c757d);
}

.plus-menu-item__chevron {
  flex-shrink: 0;
  color: var(--muted-fg, #6c757d);
}

/* Toggle rows reuse the .tbar-toggle-wrap machinery inside a menu row. */
.plus-menu-item--toggle {
  user-select: none;
}

.plus-menu-item--toggle .toggle-track {
  margin-left: auto;
}

/* Guidelines popover: downward variant (main form, matches the "+" menu). */
.popover-panel--down {
  top: calc(100% + 8px);
  bottom: auto;
}

/* Explicit close button on popovers. */
.pop-close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-fg, #6c757d);
  cursor: pointer;
  z-index: 2;
}

.pop-close-btn:hover,
.pop-close-btn:focus-visible {
  background: var(--muted);
  color: var(--fg, #212529);
}

/* Leave room for the close button above the search input. */
.popover-panel .pop-search-row {
  padding-right: 38px;
}

/* Language rows inside the searchable language popover. */
.pop-item--lang .pop-select-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.pop-lang-check {
  display: inline-flex;
  width: 14px;
  flex-shrink: 0;
  color: var(--muted-fg, #6c757d);
  visibility: hidden;
}

.pop-item--lang.selected .pop-lang-check {
  visibility: visible;
}

/* ── Pre-planning subsections decision card ────────────────────────────── */
.cg-subsections-decision .plan-proposals-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cg-subsections-option {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* The wizard card lives inline at the end of the chat feed. */
.cg-subsections-decision {
  margin-top: 10px;
}

/* Footer: back link (stage 2) on the left, confirm on the right. */
.cg-subsections-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.cg-subsections-confirm {
  margin-left: auto;
}

.cg-subsections-confirm:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.cg-subsections-back {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--muted-fg, #6c757d);
  font-size: .85rem;
  cursor: pointer;
}

.cg-subsections-back:hover {
  color: var(--brand, hsl(260 37% 42%));
  text-decoration: underline;
}
