/* Creative canvas (creative-canvas.js): chat · board · inspector. The board is a dotted plane you pan and zoom;
   nodes are frosted cards like the story view; links are soft curves. Tokens only, so dark mode follows. */
.cv { display: grid; grid-template-columns: 340px minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.cv-chat { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px; border-right: 1px solid var(--glass-line, var(--line)); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.cv-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-3); }
.cv-mode button { border: 0; background: transparent; font: inherit; font-size: 12.5px; padding: 7px 8px; border-radius: 9px; color: var(--text-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.cv-mode button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
.cv-msgs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.cv-hello { padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.cv-hello p { margin: 6px 0 0; color: var(--text-2); font-size: 13px; }
.cv-msg { display: flex; flex-direction: column; gap: 6px; max-width: 92%; }
.cv-msg.u { align-self: flex-end; align-items: flex-end; }
.cv-bubble { padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line-2); }
.cv-msg.u .cv-bubble { background: var(--primary); color: var(--on-primary); border-color: transparent; border-bottom-right-radius: 4px; }
.cv-msg.a .cv-bubble { border-bottom-left-radius: 4px; }
.cv-msg-act { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-typing { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); }
.cv-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: cv-dot 1s infinite ease-in-out; }
.cv-typing i:nth-child(2) { animation-delay: .15s; } .cv-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cv-dot { 50% { transform: translateY(-4px); } }
.cv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-chips button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; }
.cv-chips button:hover { border-color: var(--accent); color: var(--text); }
.cv-compose { display: flex; gap: 8px; align-items: flex-end; }
.cv-compose textarea { flex: 1; resize: none; }
.cv-model { font-size: 11.5px; color: var(--text-3); margin: 0; }
.cv-spark { display: flex; flex-direction: column; gap: 10px; font-size: 13px; overflow: auto; }
.cv-spark p { margin: 0; line-height: 1.5; }
.cv-steps { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 4px; }

.cv-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cv-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--glass-line, var(--line)); background: color-mix(in srgb, var(--surface) 70%, transparent); flex-wrap: wrap; }
.cv-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cv-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.cv-title small { color: var(--text-3); font-size: 12px; }
.cv-back { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--text-2); }
.cv-back:hover { background: var(--surface-3); }
.cv-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.cv-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.cv-zoom { font-size: 12px; color: var(--text-2); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.cv-view { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab; touch-action: none;
  background-color: var(--surface-2);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-3) 32%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px; }
.cv-view.panning { cursor: grabbing; }
.cv-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cv-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cv-edges path { fill: none; stroke: color-mix(in srgb, var(--accent) 65%, var(--text-3)); stroke-width: 2; pointer-events: stroke; cursor: pointer; }
.cv-edges path:hover { stroke: var(--danger); stroke-width: 3; }
.cv-edges path.tmp { stroke-dasharray: 5 5; stroke: var(--text-3); }
.cv-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cv-empty > div { max-width: 380px; text-align: center; color: var(--text-2); background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 22px; border-radius: 20px; border: 1px solid var(--line); }
.cv-empty h3 { margin: 8px 0 4px; }
.cv-legend { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: var(--text-3); background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 3px 9px; border-radius: 99px; pointer-events: none; }

.cv-node { position: absolute; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 1px rgba(21, 23, 28, .03), 0 14px 30px -22px rgba(21, 23, 28, .35); cursor: default; user-select: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; }
.cv-node:hover { border-color: color-mix(in srgb, var(--text-3) 50%, var(--line)); }
.cv-node.sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), 0 18px 36px -22px rgba(21, 23, 28, .45); }
.cv-node.flash { animation: cv-flash 1.6s ease-out; }
@keyframes cv-flash { 0%, 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent); } }
.cv-nh { display: flex; align-items: center; gap: 8px; cursor: grab; min-width: 0; }
.cv-nh b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cv-role, .cv-kind { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); display: inline-flex; gap: 4px; align-items: center; }
.cv-t.role-brief .cv-role { background: var(--accent-soft); color: var(--accent-ink); }
.cv-t.role-script .cv-role { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos-ink); }
.cv-t.role-scene .cv-role { background: color-mix(in srgb, #6d7ce0 16%, var(--surface)); color: #5361c9; }
.cv-g .cv-kind { background: var(--primary); color: var(--on-primary); }
.cv-by { font-size: 10.5px; color: var(--accent-ink); flex: none; }
.cv-nb { font-size: 12.5px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.cv-prompt { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cv-warn { margin: 0; font-size: 11.5px; color: var(--danger); display: flex; gap: 4px; align-items: flex-start; }
.cv-ph { display: grid; place-items: center; border-radius: 12px; background: repeating-linear-gradient(-45deg, var(--surface-2) 0 10px, var(--surface-3) 10px 20px); color: var(--text-3); aspect-ratio: 9 / 16; max-height: 170px; }
.cv-ph.ratio-1x1 { aspect-ratio: 1; } .cv-ph.ratio-4x5 { aspect-ratio: 4 / 5; } .cv-ph.ratio-16x9 { aspect-ratio: 16 / 9; }
.cv-res { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; }
.cv-res.n2, .cv-res.n3, .cv-res.n4 { grid-template-columns: 1fr 1fr; }
.cv-res img, .cv-res video { width: 100%; max-height: 260px; object-fit: cover; display: block; border-radius: 8px; background: var(--surface-3); }
.cv-aud { display: grid; place-items: center; height: 64px; border-radius: 10px; background: var(--surface-3); color: var(--text-2); }
.cv-m img, .cv-m video, .cv-m audio { width: 100%; border-radius: 10px; display: block; }
.cv-nf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cv-chip { font-size: 11px; color: var(--text-2); background: var(--surface-3); padding: 2px 8px; border-radius: 99px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-st { font-size: 11px; color: var(--text-2); display: inline-flex; gap: 4px; align-items: center; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-st.bad { color: var(--danger); }
.cv-g.st-running, .cv-g.st-queued { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.cv-port { position: absolute; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid color-mix(in srgb, var(--accent) 70%, var(--text-3)); }
.cv-port.in { left: -7px; pointer-events: none; }
.cv-port.out { right: -7px; cursor: crosshair; }
.cv-port.out:hover { background: var(--accent); transform: scale(1.25); }

.cv-inspect { width: 330px; border-left: 1px solid var(--glass-line, var(--line)); background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.cv-inspect[hidden] { display: none; }
.cv-ih { display: flex; align-items: center; justify-content: space-between; }
.cv-ih b { font-size: 15px; }
.cv-iact { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-iact .danger { color: var(--danger); }
.cv-ires { display: grid; gap: 10px; }
.cv-ires > div { display: flex; flex-direction: column; gap: 4px; }
.cv-ires img, .cv-ires video { width: 100%; border-radius: 12px; }

.cv-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cv-board-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: var(--glass, var(--surface)); border: 1px solid var(--glass-line, var(--line)); box-shadow: var(--lift, var(--shadow)); color: var(--text); text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.cv-board-card:hover { transform: translateY(-2px); box-shadow: var(--lift-hover, var(--shadow-md)); }
.cv-board-art { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; display: grid; place-items: center; color: var(--accent-ink);
  background: radial-gradient(circle, color-mix(in srgb, var(--text-3) 30%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px, color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.cv-board-card small { color: var(--text-3); }
.cv-newf { display: flex; flex-direction: column; gap: 10px; }
.cv-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; }
.cv-lib button { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; }
.cv-lib button:hover { border-color: var(--accent); }
.cv-lib img, .cv-lib video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.cv-lib small { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1100px) { .cv { grid-template-columns: 290px minmax(0, 1fr); } .cv-inspect { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: var(--shadow-lg); } .cv { position: relative; } }
@media (max-width: 760px) { .cv { grid-template-columns: 1fr; grid-template-rows: 46% 54%; } .cv-chat { border-right: 0; border-bottom: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .cv-typing i, .cv-node.flash { animation: none; } }