/* The course builder board. Same family as the Talkify agent canvas builder:
   ink top bar, shelf on the left, dot grid board, cards with ports, gradient
   bezier wires with a travelling pulse, copilot on the right with the
   inspector drawer sliding over it. The wire IS the progression rule. */

.cb {
  --cb-bg: #eef2f7;
  --cb-dots: #c9d3e0;
  --cb-panel: #ffffff;
  --cb-line: var(--line);
  --cb-ink: var(--ink);
  --cb-video: #1560f5;
  --cb-slides: #0f8f9a;
  --cb-page: #4b6b8a;
  --cb-interactive: #6a4ee0;
  --cb-check: #178a55;
  --cb-exam: #d33b35;
  --cb-tutor: #b25d09;
  --cb-admin: #5c6b7d;
  display: grid;
  grid-template-rows: 54px auto 1fr;
  height: calc(100vh - 30px);
  min-height: 640px;
  overflow: hidden;
  color: var(--cb-ink);
}

/* ---- top ink bar ---- */
.cb-top {
  background: var(--navy); color: #e3e8f5; display: flex; align-items: center; gap: 14px; padding: 0 16px;
}
.cb-top .back { color: #aab4d6; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cb-top .back:hover { color: #fff; text-decoration: none; }
.cb-top .title { display: flex; flex-direction: column; line-height: 1.15; }
.cb-top .title b { font-family: var(--display); font-weight: 600; color: #fff; font-size: 15px; }
.cb-top .title span { font-size: 11.5px; color: #93a0c4; }
.cb-top .sp { flex: 1; }
.cb-top .meta { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: #c3cbe4; }
.cb-top .meta .status { color: #e3e8f5; }
.cb-top .seg { border-color: rgba(255,255,255,0.25); }
.cb-top .seg button { color: #c3cbe4; }
.cb-top .seg button + button { border-left-color: rgba(255,255,255,0.18); }
.cb-top .seg button.on { background: rgba(255,255,255,0.16); color: #fff; }
.cb-top .btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }
.cb-top .btn:hover { background: rgba(255,255,255,0.14); }
.cb-top .btn.primary { background: var(--blue); border-color: var(--blue); }
.cb-top .btn.primary:hover { background: #2f74ff; }
.cb-top .autosave { font-size: 12px; color: #93a0c4; display: inline-flex; align-items: center; gap: 6px; }

/* ---- three columns ---- */
.cb-body { display: grid; grid-template-columns: 264px 1fr 340px; min-height: 0; }

/* ---- shelf ---- */
.cb-shelf { background: var(--cb-panel); border-right: 1px solid var(--cb-line); display: flex; flex-direction: column; min-height: 0; }
.cb-shelf .shelf-search { margin: 12px 12px 6px; }
.cb-shelf .shelf-scroll { overflow: auto; padding: 4px 8px 16px; }
.cb-group { margin-top: 8px; }
.cb-group-title { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; color: var(--muted); cursor: pointer; }
.cb-group-title b { font-weight: 500; color: var(--ink); }
.cb-group-title .n { margin-left: auto; color: var(--faint); font-size: 11.5px; }
.cb-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; cursor: grab;
  border: 1px solid transparent;
}
.cb-item:hover { background: var(--surface-2); border-color: var(--line); }
.cb-item .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 15px; flex: 0 0 auto; }
.cb-item .t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cb-item .t b { font-weight: 500; font-size: 13px; color: var(--ink); }
.cb-item .t span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-item .cost { margin-left: auto; font-size: 11px; color: var(--purple); white-space: nowrap; }
.ic.video { background: var(--cb-video); } .ic.slides { background: var(--cb-slides); } .ic.page { background: var(--cb-page); }
.ic.interactive { background: var(--cb-interactive); } .ic.check { background: var(--cb-check); } .ic.exam { background: var(--cb-exam); }
.ic.tutor { background: var(--cb-tutor); } .ic.admin { background: var(--cb-admin); } .ic.module { background: var(--navy); }

/* ---- board ---- */
.cb-stage { position: relative; overflow: auto; background: var(--cb-bg); min-height: 0; }
.cb-board {
  position: relative; width: 1360px; height: 960px; transform-origin: 0 0;
  background-image: radial-gradient(var(--cb-dots) 1.1px, transparent 1.2px);
  background-size: 22px 22px;
}
.cb-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cb-wire { fill: none; stroke-width: 2.25; stroke: url(#wireGrad); }
.cb-wire.pass { stroke: var(--cb-check); }
.cb-wire.watch { stroke: var(--cb-video); }
.cb-wire.approve { stroke: var(--cb-tutor); }
.cb-wire.fail { stroke: var(--cb-exam); stroke-dasharray: 6 5; }
.cb-wire.date { stroke: var(--cb-page); stroke-dasharray: 2 5; }
.cb-pulse { fill: none; stroke: #fff; stroke-width: 2.25; stroke-dasharray: 14 320; stroke-linecap: round; animation: cbPulse 2.6s linear infinite; opacity: 0.95; }
@keyframes cbPulse { to { stroke-dashoffset: -334; } }
.cb-wire-label {
  position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: 2px 8px; font-size: 11.5px; color: var(--ink); white-space: nowrap; box-shadow: var(--shadow-1); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.cb-wire-label i { font-size: 13px; }
.cb-wire-label.pass { color: var(--cb-check); } .cb-wire-label.watch { color: var(--cb-video); }
.cb-wire-label.approve { color: var(--cb-tutor); } .cb-wire-label.fail { color: var(--cb-exam); } .cb-wire-label.date { color: var(--cb-page); }

/* module lanes */
.cb-lane {
  position: absolute; border: 1.5px dashed #b9c6d8; border-radius: 22px; background: rgba(255,255,255,0.35);
}
.cb-lane .lane-title {
  position: absolute; top: -14px; left: 18px; background: var(--navy); color: #fff; font-family: var(--display); font-weight: 600;
  font-size: 13px; padding: 4px 12px; border-radius: 8px; display: inline-flex; gap: 8px; align-items: center;
}
.cb-lane .lane-title span { font-weight: 400; color: #aab4d6; font-size: 12px; }
.cb-lane .lane-title { cursor: pointer; }
.cb-lane .lane-title .open { margin-left: 6px; color: #fff; font-weight: 500; font-size: 12px; border-left: 1px solid rgba(255,255,255,0.25); padding-left: 10px; }
.cb-lane .lane-title:hover .open { text-decoration: underline; }
.cb-node .foot .open { color: var(--blue); font-weight: 500; }
.cb-node .foot .open:hover { text-decoration: underline; }

/* node cards */
.cb-node {
  position: absolute; width: 236px; background: var(--cb-panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-1); cursor: grab; user-select: none;
}
.cb-node.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,96,245,0.18), var(--shadow-2); }
.cb-node.dragging { cursor: grabbing; box-shadow: var(--shadow-2); opacity: 0.95; }
.cb-node.warn { border-color: #f3c38b; }
.cb-node .head { display: flex; align-items: center; gap: 9px; padding: 10px 12px 8px; }
.cb-node .head .ic { width: 26px; height: 26px; border-radius: 7px; color: #fff; display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; }
.cb-node .head .kind { font-size: 11px; color: var(--muted); line-height: 1.1; }
.cb-node .head .name { font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.2; }
.cb-node .body { padding: 0 12px 10px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.cb-node .body .status { font-size: 12px; }
.cb-node .body .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cb-node .body .meta span { display: inline-flex; align-items: center; gap: 4px; }
.cb-node .foot { border-top: 1px solid var(--line); padding: 7px 12px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.cb-node .foot .tokens { margin-left: auto; font-size: 11.5px; }
.cb-node .warnline { background: var(--amber-soft); color: var(--amber); font-size: 11.5px; padding: 5px 12px; display: flex; gap: 6px; align-items: center; }
.cb-port {
  position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2.5px solid var(--line-strong); cursor: crosshair; z-index: 2;
}
.cb-port.in { left: -8px; top: 50%; transform: translateY(-50%); }
.cb-port.out { right: -8px; top: 50%; transform: translateY(-50%); border-color: var(--blue); }
.cb-port.out.fail { top: calc(50% + 22px); border-color: var(--cb-exam); }
.cb-port:hover { transform: translateY(-50%) scale(1.35); box-shadow: 0 0 0 4px rgba(21,96,245,0.18); }
.cb-node.sm { width: 200px; }
.cb-node .mini-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.cb-node .mini-bar span { display: block; height: 100%; background: var(--green); }

/* zoom bar */
.cb-zoom { position: absolute; left: 14px; bottom: 14px; display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-1); overflow: hidden; z-index: 5; }
.cb-zoom button { border: 0; background: none; padding: 6px 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.cb-zoom button + button { border-left: 1px solid var(--line); }
.cb-zoom button:hover { background: var(--surface-2); color: var(--ink); }
.cb-legend { position: absolute; right: 14px; bottom: 14px; background: rgba(255,255,255,0.92); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 11.5px; color: var(--muted); display: flex; gap: 14px; z-index: 5; }
.cb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cb-legend i { width: 18px; height: 0; border-top: 2.5px solid currentColor; display: inline-block; }
.cb-legend .pass { color: var(--cb-check); } .cb-legend .watch { color: var(--cb-video); } .cb-legend .approve { color: var(--cb-tutor); } .cb-legend .fail { color: var(--cb-exam); } .cb-legend .next { color: #6b7d94; }

/* ---- copilot column and inspector ---- */
.cb-right { position: relative; background: var(--cb-panel); border-left: 1px solid var(--cb-line); min-height: 0; overflow: hidden; }
.cb-copilot { display: flex; flex-direction: column; height: 100%; }
.cb-copilot .cp-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cb-copilot .cp-head .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--purple); color: #fff; display: grid; place-items: center; }
.cb-copilot .cp-head b { font-family: var(--display); font-weight: 600; }
.cb-copilot .cp-head small { display: block; color: var(--muted); font-size: 11.5px; }
.cb-copilot .cp-feed { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.cb-msg { max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.cb-msg.me { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.cb-msg.ai { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cb-msg .acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cb-copilot .cp-input { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.cb-copilot .cp-input .box { display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--line-strong); border-radius: 12px; padding: 8px 8px 8px 12px; }
.cb-copilot .cp-input textarea { flex: 1; border: 0; resize: none; font: inherit; font-size: 13px; outline: none; height: 40px; }
.cb-copilot .cp-input .hint { font-size: 11.5px; color: var(--faint); }
.cb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-chips button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 9px; font-size: 12px; color: var(--body); cursor: pointer; }
.cb-chips button:hover { border-color: var(--blue); color: var(--blue); }

.cb-inspector {
  position: absolute; inset: 0; background: var(--cb-panel); transform: translateX(100%); transition: transform .2s ease;
  display: flex; flex-direction: column; z-index: 3;
}
.cb-inspector.open { transform: translateX(0); }
.cb-inspector .in-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cb-inspector .in-head .ic { width: 28px; height: 28px; border-radius: 8px; color: #fff; display: grid; place-items: center; }
.cb-inspector .in-head b { font-family: var(--display); font-weight: 600; display: block; line-height: 1.2; }
.cb-inspector .in-head small { color: var(--muted); font-size: 11.5px; }
.cb-inspector .in-head .close { margin-left: auto; }
.cb-inspector .in-body { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.cb-inspector .in-foot { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; gap: 8px; }
.cb-inspector .in-foot .ask { flex: 1; }
.in-section { display: flex; flex-direction: column; gap: 10px; }
.in-section > h4 { font-size: 12.5px; color: var(--muted); font-weight: 500; font-family: var(--sans); }

/* ---- outline list view (mirrors the board) ---- */
.cb-outline { padding: 20px 28px; max-width: 980px; }
.cb-outline .module { margin-bottom: 18px; }
.cb-outline .module-head { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.cb-outline .module-head b { font-family: var(--display); font-size: 15px; }
.cb-outline .step { display: grid; grid-template-columns: 24px 30px 1fr auto auto auto; align-items: center; gap: 12px; padding: 9px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; }
.cb-outline .step .grip { color: var(--faint); cursor: grab; }
.cb-outline .step .ic { width: 28px; height: 28px; border-radius: 8px; color: #fff; display: grid; place-items: center; font-size: 14px; }
.cb-outline .step .rule { font-size: 12px; color: var(--muted); }

@media (max-width: 1100px) {
  .cb-body { grid-template-columns: 1fr; }
  .cb-shelf, .cb-right { display: none; }
}