/* Diagrams and 3D scenes in Kilby's answers, in the chat and on a shared link's public page (kilby-diagrams.js;
   owner, 2026-10-26, docs/OWNER_DECISIONS.md "Diagrams on shared links"). Only Kilby's palette variables. */

/* A shared page's Copy reads the answer without its drawings (kilby-share-reader.js). */
.share-copying :is(.kilby-diagram, .kilby-scene) { display: none !important; }
/* On a shared page, the type an answer has in the chat (.msg), not the page's roomier reading text. */
.share-message :is(.kilby-diagram, .kilby-scene) { font-size: 15px; line-height: 1.42; letter-spacing: -0.01em; }

/* The frame rules carry the answer (.msg.bot in the chat, .share-message on a shared page) so they weigh what
   they did inside kilby.css. */
/* Diagrams (owner, 2026-10-26; docs/diagram-answer-mockup): drawn where Kilby wrote them, at a readable
   size (kilby-diagrams.js _fitDiagram sets the width). Kilby's colors override Mermaid's own, so a
   theme change recolors a drawn diagram at once. */
:is(.msg.bot, .share-message) .kilby-diagram { margin: 1.2rem 0; overflow-x: auto; overscroll-behavior-x: contain; }
:is(.msg.bot, .share-message) .kilby-diagram:not([data-drawn]) { min-height: 120px; }
:is(.msg.bot, .share-message) .kilby-diagram svg { display: block; height: auto; max-width: none; margin: 0 auto; }
.kilby-diagram svg :is(.node rect, .node polygon, .node circle, .node ellipse, .node path) { fill: var(--kilby-panel) !important; stroke: var(--kilby-border) !important; }
.kilby-diagram svg .cluster rect { fill: transparent !important; stroke: var(--kilby-border) !important; }
.kilby-diagram svg :is(.flowchart-link, .edgePath .path) { stroke: var(--kilby-faint) !important; }
.kilby-diagram svg :is(marker path, .arrowheadPath, .arrowMarkerPath) { fill: var(--kilby-faint) !important; stroke: var(--kilby-faint) !important; }
.kilby-diagram svg :is(.nodeLabel, .edgeLabel, .label, text) { color: var(--kilby-white) !important; fill: var(--kilby-white) !important; }
.kilby-diagram svg :is(.cluster-label, .cluster-label .nodeLabel) { color: var(--kilby-secondary) !important; fill: var(--kilby-secondary) !important; }
.kilby-diagram svg :is(.edgeLabel p, .edgeLabel span, .labelBkg) { background-color: var(--kilby-black) !important; }
.kilby-diagram svg .edgeLabel rect { fill: var(--kilby-black) !important; }

/* 3D scenes (owner, 2026-10-26: "This 3D mock-up looks great!"; docs/3d-answer-mockup): framed like a table,
   Kilby's walkthrough under the scene, the Watchlist 3D View's hint pill (.wl3d-hint) on it. While the answer
   streams, the frame holds the scene's space so nothing jumps when it is drawn. */
:is(.msg.bot, .share-message) .kilby-scene { margin: 1.2rem 0; border: 1px solid var(--kilby-border); border-radius: 12px; overflow: hidden; background: var(--kilby-black); }
:is(.msg.bot, .share-message) .kilby-scene:not([data-drawn]) { height: 640px; }
.kilby-scene .ks-title { padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--kilby-white); border-bottom: 1px solid var(--kilby-border); background: var(--kilby-panel); }
.kilby-scene .ks-stage { position: relative; height: 520px; touch-action: none; cursor: grab; }
.kilby-scene .ks-stage:active { cursor: grabbing; }
.kilby-scene .ks-stage canvas { display: block; }
.kilby-scene .ks-label { max-width: 220px; padding: 3px 8px; border-radius: 6px; font-size: 12px; line-height: 1.35; text-align: center;
  color: var(--kilby-white); background: var(--kilby-panel); border: 1px solid var(--kilby-border); }
.kilby-scene .ks-label.ks-link { color: var(--kilby-blue); font-size: 11.5px; }
/* How to zoom, shown briefly when the wheel scrolls the chat over a scene (kilby-scene.js). */
.kilby-scene .ks-zoom-note { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .3s; background: color-mix(in srgb, var(--kilby-black) 45%, transparent);
  font-size: 15px; font-weight: 600; color: var(--kilby-white); }
.kilby-scene .ks-zoom-note.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kilby-scene .ks-zoom-note { transition: none; } }
/* A label on a part's edge hangs below it on a short line (kilby-scene.js placeLabels). */
.kilby-scene .ks-hang { padding-top: 14px; }
.kilby-scene .ks-hang > .ks-label { position: relative; }
.kilby-scene .ks-hang > .ks-label::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 14px; background: var(--kilby-faint); }
.kilby-scene .ks-steps { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--kilby-border); background: var(--kilby-panel); }
/* Also under .msg.bot and .share-message, whose own paragraph rules would otherwise set the caption's margins. */
.kilby-scene .ks-caption, :is(.msg.bot, .share-message) .kilby-scene .ks-caption { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--kilby-white); min-height: 2.9em; }
.kilby-scene .ks-nav { display: flex; align-items: center; gap: 10px; flex: none; }
.kilby-scene .ks-nav[hidden] { display: none; }
.kilby-scene .ks-count { font-size: 13px; color: var(--kilby-faint); min-width: 3.4em; text-align: center; }
.kilby-scene .ks-nav button { font: inherit; font-size: 13.5px; font-weight: 500; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  color: var(--kilby-white); background: var(--kilby-black); border: 1px solid var(--kilby-border); }
.kilby-scene .ks-nav .ks-next { color: var(--kilby-on-accent); background: var(--kilby-blue); border-color: var(--kilby-blue); }
.kilby-scene .ks-nav button:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 899px) {
  :is(.msg.bot, .share-message) .kilby-scene:not([data-drawn]) { height: 560px; }
  .kilby-scene .ks-stage { height: 420px; }
  .kilby-scene .ks-steps { flex-direction: column; align-items: stretch; }
  .kilby-scene .ks-nav { justify-content: space-between; }
}

/* How to move it (the Watchlist 3D View and answers' scenes): a rotate icon and one line; fades after the first drag. */
.wl3d-hint { position: absolute; bottom: 12px; left: 12px; z-index: 3; pointer-events: none; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--kilby-panel); border: 1px solid var(--kilby-border);
  font-size: 12.5px; font-weight: 500; color: var(--kilby-white); transition: opacity .6s; }
.wl3d-hint svg { flex: none; color: var(--kilby-blue); }
.wl3d-hint.gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wl3d-hint { transition: none; } }