/* diagram editor. All rules are scoped under .dge so it can be embedded.
   Tokens, sizes and radii are schema's (../schema/web/app.css), so both tools
   look like one product. */
.dge {
  --bg: #ffffff;          /* panels, cards, popovers, inputs */
  --bg2: #f4f5f7;         /* wells, code pane */
  --bg3: #eef0f3;         /* hover */
  --bg-active: #e4e7eb;
  --line: #e1e4e8;        /* hairlines between regions */
  --line-strong: #c9ced5; /* control borders */
  --fg: #1c2026; --muted: #5b636e; --faint: #858d98;
  --accent: #0a62d0; --accent-solid: #0a62d0; --accent-fg: #ffffff; --accent-bg: #e8f0fd;
  --focus-ring: 0 0 0 3px #0a62d033;
  --danger: #c62a31; --ok: #1b7f3a; --pin: #6f45d6;
  --canvas: #f4f5f7; --dot: #d3d8de;
  --shadow-1: 0 1px 2px rgba(20,24,30,.06);
  --shadow: 0 1px 2px rgba(20,24,30,.06), 0 8px 24px rgba(20,24,30,.14);
  --scrim: rgba(20,24,30,.28);
  --r-1: 3px; --r-2: 5px; --r-3: 8px; --r-4: 12px;
  --h-sm: 24px; --h-md: 28px; --h-lg: 32px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 320px; overflow: hidden;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  color: var(--fg); background: var(--bg); box-sizing: border-box;
}
.dge[data-theme="dark"] {
  --bg: #16191e; --bg2: #0f1114; --bg3: #1f232a; --bg-active: #292e36;
  --line: #262b32; --line-strong: #3a414b;
  --fg: #e3e7ec; --muted: #9ba4af; --faint: #6c757f;
  --accent: #6aa6f9; --accent-solid: #2f6fdb; --accent-bg: #172538;
  --focus-ring: 0 0 0 3px #6aa6f940;
  --danger: #f07a7f; --ok: #5cc47a; --pin: #ab91f8;
  --canvas: #0f1114; --dot: #242930;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 0 0 1px rgba(255,255,255,.02), 0 10px 28px rgba(0,0,0,.55);
  --scrim: rgba(0,0,0,.5);
}
.dge *, .dge *::before, .dge *::after { box-sizing: border-box; }
.dge button, .dge select, .dge input, .dge textarea { font: inherit; color: inherit; }
.dge button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-md); padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--r-2); background: transparent; cursor: pointer; white-space: nowrap;
}
.dge button:hover { background: var(--bg3); }
.dge button:active { background: var(--bg-active); }
.dge button:disabled { color: var(--faint); cursor: default; }
.dge button.on { background: var(--accent-bg); color: var(--accent); }
.dge button.dge-primary, .dge .dge-actions button.primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-fg); font-weight: 600; }
.dge button.dge-primary:hover, .dge .dge-actions button.primary:hover { filter: brightness(1.08); }
.dge button.danger { color: var(--danger); }
.dge :focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dge ::placeholder { color: var(--faint); }
.dge input[type=text], .dge textarea, .dge .dge-select {
  width: 100%; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg);
}
.dge input[type=text]:focus, .dge textarea:focus, .dge .dge-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.dge .dge-select { width: auto; height: var(--h-md); min-height: 0; padding: 0 6px; }
.dge code { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* the canvas bar (schema's .canvasbar) */
.dge-toolbar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--bg); overflow-x: auto; flex: none; }
.dge-toolbar button { color: var(--muted); }
.dge-toolbar button:hover { color: var(--fg); }
.dge-group { display: flex; align-items: center; gap: 2px; padding-right: 8px; border-right: 1px solid var(--line); }
.dge-group:last-child { border-right: 0; padding-right: 0; }
.dge-group:empty { display: none; }
.dge-spacer { flex: 1; }
.dge-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: #fcf2d9; color: #935f00; font-size: 12px; }
.dge[data-theme="dark"] .dge-chip { background: #2d2311; color: #e3ae4c; }
.dge-chip[hidden] { display: none; }
.dge-chip button { min-height: 20px; padding: 0 6px; }

.dge-body { position: relative; display: flex; flex: 1; min-height: 0; }
.dge-code { display: flex; flex-direction: column; width: 28%; min-width: 240px; max-width: 460px; border-right: 1px solid var(--line); background: var(--bg2); }
.dge-code[hidden], .dge-panel[hidden] { display: none; }
.dge-tabs { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.dge-tabs button { min-height: 24px; font-size: 12px; }
.dge-help { margin-left: auto; font-size: 12px; color: var(--muted); text-decoration: none; }
.dge-help:hover { color: var(--accent); }
.dge-code-wrap { position: relative; display: flex; flex: 1; min-height: 0; }
.dge-gutter { flex: none; width: 38px; padding: 10px 6px 10px 0; overflow: hidden; text-align: right; font: 12px/20px var(--mono); color: var(--muted); user-select: none; opacity: .7; }
.dge-gutter .err { color: var(--danger); font-weight: 700; opacity: 1; }
.dge .dge-text {
  flex: 1; padding: 10px 10px 10px 4px; border: 0; border-radius: 0; background: transparent; resize: none;
  font: 12.5px/20px var(--mono); white-space: pre; overflow: auto; tab-size: 2; outline: none;
}
.dge-errors { max-height: 30%; overflow: auto; border-top: 1px solid var(--line); }
.dge-errors[hidden] { display: none; }
.dge button.dge-error { display: block; width: 100%; height: auto; padding: 5px 10px; border-radius: 0; text-align: left; white-space: normal; color: var(--danger); font-size: 12px; }

.dge-canvas {
  container: board / inline-size;
  position: relative; flex: 1; min-width: 0; overflow: hidden; outline: none; cursor: default; touch-action: none;
  background-color: var(--canvas); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 20px 20px;
}
.dge .dge-canvas:focus-visible { outline: none; box-shadow: none; }
.dge-canvas[data-tool="node"], .dge-canvas[data-tool="decision"], .dge-canvas[data-tool="sticky"], .dge-canvas[data-tool="comment"] { cursor: crosshair; }
.dge-canvas[data-tool="connect"] .dg-node { cursor: crosshair; }
.dge-canvas.space, .dge-view .dge-canvas { cursor: grab; }
.dge-canvas.panning { cursor: grabbing; }
.dge-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.dge-stage > svg.dg { display: block; overflow: visible; }
.dge-overlay { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.dge-overlay .dge-handle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; pointer-events: all; cursor: crosshair; }
.dge-overlay .dge-handle:hover { fill: var(--accent); }
.dge-rubber { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.dge-target { fill: none; stroke: var(--accent); stroke-width: 2; }
.dge-marquee { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 1; }
.dge .dg-node { cursor: move; }
.dge-view .dg-node, .dge-view .dg-group { cursor: inherit; }
.dge .dg-bg { display: none; }
.dge .dg-node:hover .dg-shape { filter: url(#dg-shadow) brightness(.98); }
.dge .dg-node.sel .dg-shape, .dge .dg-group.sel > .dg-shape { stroke: var(--accent) !important; stroke-width: 2.5px !important; }
.dge .dg-node.cmt .dg-shape, .dge .dg-group.cmt > .dg-shape { stroke: var(--pin) !important; stroke-width: 2.5px !important; }
.dge .dg-edge { cursor: pointer; }
.dge .dg-edge:hover .dg-line, .dge .dg-edge.sel .dg-line { stroke: var(--accent) !important; }
.dge .dg-edge.sel .dg-arrow, .dge .dg-edge:hover .dg-arrow { fill: var(--accent) !important; }
.dge .dg-edge.cmt .dg-line { stroke: var(--pin) !important; }
.dge .dg-pin { cursor: pointer; }
.dge .dg-pin { transform-box: fill-box; transform-origin: 30% 70%; transition: transform .1s ease; }
.dge .dg-pin:hover, .dge .dg-pin.sel { transform: scale(1.12); }
/* floating tool bar, bottom centre (mirrors schema's .tools) */
.dge-tools { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 4px; padding: 4px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-4); box-shadow: var(--shadow);  max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none;}
.dge-tools[hidden] { display: none; }
.dge .dge-tools .dge-tool { width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-3); color: var(--fg); }
.dge .dge-tools .dge-tool svg { width: 20px; height: 20px; }
.dge .dge-tools .dge-tool[aria-pressed="true"] { background: var(--accent-solid); color: #fff; }
.dge-tools-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--line); }
.dge-canvas[data-tool="hand"], .dge-canvas[data-tool="hand"] * { cursor: grab !important; }
.dge-canvas[data-tool="hand"].panning, .dge-canvas[data-tool="hand"].panning * { cursor: grabbing !important; }
.dge-zoombar { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; height: 28px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow-1); }
.dge-zoombar { left: 16px; right: auto; bottom: 16px; } /* bottom-left: the AI button has the right */
.dge .dge-zoombar button { width: 28px; min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; color: var(--muted); font-size: 14px; }
.dge .dge-zoombar button:hover { color: var(--fg); }
.dge .dge-zoombar button + button { border-left: 1px solid var(--line); }
.dge .dge-zoombar .dge-zoom-label { width: auto; padding: 0 6px; font: 11px var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.dge-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; font-size: 14px; }
.dge-hint[hidden] { display: none; }
.dge-inline {
  position: absolute; z-index: 5; padding: 6px 8px !important; border: 1px solid var(--accent) !important; border-radius: var(--r-2) !important;
  background: var(--bg) !important; text-align: center; resize: none; line-height: 1.3; box-shadow: var(--focus-ring) !important;
}

/* typing into a box on its own: the box stays as drawn, the typing in its label's place */
.dge-inline.dge-inline-shape { background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding-bottom: 2px !important; overflow: hidden; }
.dge .dg-node.dge-editing text { opacity: 0; }
.dge-inline.dge-ask { width: 160px; height: 30px; text-align: left; font: inherit; color: var(--fg); }
.dge-canvas.resizing, .dge-canvas.resizing * { cursor: ew-resize !important; }
.dge-when {
  position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 8px)); padding: 3px 8px; border-radius: var(--r-2);
  background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none;
}
.dge-canvas.linking, .dge-canvas.linking * { cursor: crosshair !important; }
.dge-canvas .dg-link { cursor: pointer; }
.dge-canvas .dg-link:hover circle { stroke-width: 2.5; }
.dge-canvas .dg-dep { cursor: context-menu; }
.dge-canvas .dg-dep:hover path:first-child { stroke: var(--accent); }

.dge-panel { width: 300px; flex: none; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg); }
.dge-inspector, .dge-comments { padding: 12px; }
.dge-inspector { border-bottom: 1px solid var(--line); }
.dge h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.dge h4 { margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dge-field { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.dge-field > span { color: var(--muted); font-size: 12px; }
.dge-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.dge-colour { display: inline-flex; align-items: center; gap: 8px; }
.dge-colour i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.dge-colour i.none { background: linear-gradient(135deg, var(--bg) 42%, var(--danger) 42%, var(--danger) 58%, var(--bg) 58%); }
.dge button.dge-swatch { width: 20px; min-height: 20px; height: 20px; padding: 0; border: 2px solid var(--bg); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.dge button.dge-swatch.none { background: linear-gradient(135deg, var(--bg) 45%, var(--danger) 45%, var(--danger) 55%, var(--bg) 55%); }
.dge button.dge-swatch.on { box-shadow: 0 0 0 2px var(--accent); }
.dge-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dge-actions.end { justify-content: flex-end; margin: 12px 0 0; }
.dge-actions button:not(.dge-primary):not(.primary) { border-color: var(--line-strong); background: var(--bg); }
.dge-actions button:not(.dge-primary):not(.primary):hover { background: var(--bg3); }
.dge-actions.small button { min-height: 24px; font-size: 12px; }
.dge-muted { color: var(--muted); }
.dge-tip { color: var(--muted); font-size: 12px; padding: 8px 10px; border-radius: var(--r-2); background: var(--bg2); }
.dge-comments-head { display: flex; align-items: center; justify-content: space-between; }
.dge-comments-head h3 { margin: 0; }
.dge-count { padding: 0 7px; border-radius: 999px; background: var(--pin); color: #fff; font-size: 11px; line-height: 18px; }
.dge-check { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; }
.dge-check.resolved { text-decoration: line-through; }
.dge-composer { margin: 8px 0; }
.dge-card { margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-3); cursor: pointer; }
.dge-card.active { border-color: var(--pin); box-shadow: 0 0 0 1px var(--pin); }
.dge-card.resolved { opacity: .7; }
.dge-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--muted); }
.dge-card-head b { color: var(--fg); }
.dge-num { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50% 50% 50% 3px; background: var(--pin); color: #fff; font-size: 10px; font-weight: 700; }
.dge-num.done { background: var(--muted); }
.dge-cid { margin-left: auto; }
.dge button.dge-link { min-height: 0; padding: 0; color: var(--accent); }
.dge button.dge-link:hover { background: none; text-decoration: underline; }
.dge-card-text { margin: 6px 0; white-space: pre-wrap; }
.dge-reply { margin: 4px 0 0 10px; padding-left: 8px; border-left: 2px solid var(--line); font-size: 12px; white-space: pre-wrap; }
.dge-resolution { margin-top: 6px; font-size: 12px; color: var(--ok); }
.dge .dge-reply-in { margin-top: 6px; font-size: 12px; }

.dge-menu { position: absolute; z-index: 40; overflow: auto; box-sizing: border-box; min-width: 240px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow); color: var(--fg); }
.dge-menu[hidden] { display: none; }
/* comment popover (schema's .popover) */
.dge-bubble { position: absolute; z-index: 41; width: 300px; max-height: 60%; overflow: auto; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow); color: var(--fg); }
.dge-bubble[hidden] { display: none; }
.dge-bubble-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; }
.dge-bubble-head button { height: var(--h-sm); min-height: 0; padding: 0 8px; font-size: 12px; }
.dge-msg { padding: 6px 0; border-top: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.dge-msg:first-of-type { border-top: 0; }
.dge-msg b { display: block; font-size: 12px; font-weight: 600; }
.dge-bubble-box { display: flex; align-items: flex-end; gap: 6px; margin-top: 6px; }
.dge .dge-bubble-box textarea { flex: 1; min-height: 34px; resize: vertical; }
.dge-bubble-box button { flex: none; }
/* comment mode: a speech-bubble cursor */
.dge-canvas[data-tool="comment"], .dge-canvas[data-tool="comment"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 23V12a9 9 0 1 1 9 9H5z' fill='%23ffffff' stroke='%231c2026' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 12h8M8 15.5h5' stroke='%231c2026' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 3 23, crosshair !important; }
.dge .dge-menu button { display: flex; width: 100%; height: 28px; min-height: 0; padding: 0 8px; border: 0; justify-content: flex-start; text-align: left; }
.dge-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.dge-modal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.dge-modal[hidden] { display: none; }
.dge-dialog { width: min(860px, 100%); max-height: 100%; overflow: auto; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-4); background: var(--bg); box-shadow: var(--shadow); }
.dge-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.dge-dialog-head h3 { margin: 0; font-size: 15px; }
.dge-chart-data { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; padding: 8px 10px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg); background: var(--bg2); border: 1px solid var(--line-strong); border-radius: var(--r-2); resize: vertical; }
.dge-x { font-size: 18px; }
.dge-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dge-radio { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.dge-radio span { display: flex; flex-direction: column; }
.dge-radio small { color: var(--muted); }
.dge-checklist { max-height: 150px; overflow: auto; margin-bottom: 8px; }
.dge .dge-preview { margin-top: 12px; font: 12px/1.5 var(--mono); background: var(--bg2); resize: vertical; }
.dge-tip { position: absolute; z-index: 45; max-width: 280px; padding: 6px 9px; border-radius: var(--r-3); background: var(--fg); color: var(--bg); box-shadow: var(--shadow); font-size: 12px; line-height: 1.35; pointer-events: none; }
.dge-tip[hidden] { display: none; }
.dge-tip-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dge-tip kbd { margin-left: auto; padding: 0 5px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); font: inherit; font-weight: 500; font-size: 11px; opacity: .85; }
.dge-tip-more { margin-top: 2px; opacity: .78; }
/* a box's hover card: more room, its detail as written */
.dge-tip.dge-card-tip { max-width: 340px; padding: 9px 11px; font-size: 12.5px; }
.dge-card-tip .dge-tip-head { font-size: 13px; }
.dge-tip-body { margin-top: 4px; white-space: pre-wrap; line-height: 1.45; }
.dge-card-tip .dge-tip-more { margin-top: 6px; }
.dge-toast { position: absolute; left: 50%; bottom: 66px; z-index: 40; display: flex; align-items: center; min-height: 30px; max-width: 70%; padding: 6px 12px; border-radius: var(--r-3); background: var(--fg); color: var(--bg); box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translate(-50%, 8px); transition: .18s; pointer-events: none; }
.dge-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dge-toast.error { background: var(--danger); color: #fff; }
.dge-schema-field { display: block; margin: 12px 0 0; }
.dge-schema-field > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.dge .dge-schema-field .dge-select { width: 100%; }
.dge-toast.act { pointer-events: auto; gap: 10px; }
.dge .dge-toast-act { padding: 3px 10px; border: 0; border-radius: var(--r-2); background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

@media (max-width: 760px) {
  .dge-code { position: absolute; inset: 0 auto 0 0; z-index: 10; width: 88%; max-width: none; box-shadow: var(--shadow); }
  .dge-panel { position: absolute; inset: 0 0 0 auto; z-index: 10; width: 88%; box-shadow: var(--shadow); }
  .dge-cols { grid-template-columns: 1fr; }
  .dge-toolbar .dge-select { display: none; }
}

/* mindmaps */
.dge-overlay .dge-ctl { cursor: pointer; pointer-events: all; }
.dge-overlay .dge-ctl circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
.dge-overlay .dge-ctl text { fill: var(--accent); font-weight: 700; pointer-events: none; font-family: inherit; }
.dge-overlay .dge-ctl:hover circle { fill: var(--accent); }
.dge-overlay .dge-ctl:hover text { fill: var(--bg); }
.dge .dg-fold { cursor: pointer; }
.dge .dg-topic { cursor: default; }
.dge .dg-topic.dragging, .dge .dg-branch.dragging { opacity: .55; pointer-events: none; }
.dge-drop { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; fill: none; }
.dge .dg-node.thinking .dg-shape { animation: dge-think 1.1s ease-in-out infinite; stroke: var(--accent) !important; stroke-width: 2.5px !important; }
@keyframes dge-think { 50% { stroke-opacity: .25; } }
.dge-inline-topic { text-align: left; }
.dge-ai { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.dge-ai textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 6px 8px; border-radius: var(--r-2); border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg); }
.dge .dg-branch { pointer-events: none; }
.dge-stage svg text { user-select: none; -webkit-user-select: none; }

/* Ask AI: the bar over the board while the AI's changes are shown */
.dge-preview-bar { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--bg); box-shadow: var(--shadow); font-size: 13px; white-space: nowrap; }
.dge-preview-bar > span { white-space: normal; max-width: min(56vw, 560px); line-height: 1.35; }
.dge-preview-bar button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
/* the AI: a round button in the corner, and what it can do */
.dge .dge-ai-fab { position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 52px; height: 52px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--accent-solid); color: var(--accent-fg, #fff); box-shadow: 0 6px 18px rgba(10, 40, 90, .28), 0 1px 3px rgba(0, 0, 0, .2); transition: transform .12s ease, box-shadow .12s ease; }
.dge .dge-ai-fab:hover { background: var(--accent-solid); transform: translateY(-1px) scale(1.04); box-shadow: 0 8px 22px rgba(10, 40, 90, .34), 0 1px 3px rgba(0, 0, 0, .2); }
.dge .dge-ai-fab.on { background: var(--accent-solid); color: var(--accent-fg, #fff); transform: rotate(-12deg); }
.dge .dge-ai-fab svg { width: 32px; height: 32px; }
.dge-ai-menu { position: absolute; right: 16px; bottom: 80px; z-index: 7; width: 300px; overflow: auto; box-sizing: border-box; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow); }
.dge-ai-menu[hidden] { display: none; }
.dge .dge-ai-menu .dge-ai-item { display: flex; width: 100%; height: auto; min-height: 0; padding: 10px; gap: 12px; align-items: center; justify-content: flex-start; border: 0; border-radius: var(--r-2, 6px); text-align: left; }
.dge-ai-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); }
.dge-ai-ico svg { width: 18px; height: 18px; }
.dge-ai-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.dge-ai-text b { font-weight: 600; color: var(--fg); }
.dge-ai-text span { color: var(--muted); font-size: 12px; white-space: normal; }
/* Ask: the conversation above the AI button */
.dge-ask-panel { position: absolute; right: 16px; bottom: 80px; z-index: 7; display: flex; flex-direction: column; width: min(400px, calc(100% - 32px)); max-height: calc(100% - 110px); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow); color: var(--fg); }
.dge-ask-panel[hidden] { display: none; }
.dge-ask-panel header { display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px 12px; border-bottom: 1px solid var(--line); }
.dge-ask-panel header b { flex: 1; font-weight: 600; }
.dge .dge-ask-panel .dge-ask-close { width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; font-size: 18px; color: var(--muted); }
.dge-ask-thread { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px; }
.dge-ask-thread:empty { display: none; }
.dge-ask-q { margin: 10px 0 6px auto; width: fit-content; max-width: 85%; padding: 6px 10px; border-radius: 12px 12px 3px 12px; background: var(--accent-bg); color: var(--fg); white-space: pre-wrap; }
.dge-ask-a { margin: 0 0 8px; line-height: 1.5; }
.dge-ask-a p { margin: 0 0 6px; }
.dge-ask-a ul { margin: 0 0 6px; padding-left: 18px; }
.dge-ask-err { color: var(--danger, #c62a31); }
.dge .dge-ref { display: inline; height: auto; min-height: 0; margin: 0 1px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--accent-bg); color: var(--accent); font: inherit; font-weight: 600; line-height: 1.5; cursor: pointer; }
.dge .dge-ref:hover { text-decoration: underline; }
.dge-ref.missing { padding: 0 4px; color: var(--muted); text-decoration: line-through; }
.dge-ask-box { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.dge .dge-ask-box button.primary { background: var(--accent-solid); color: var(--accent-fg, #fff); border-color: var(--accent-solid); }
.dge .dge-ask-box textarea { flex: 1; min-height: 36px; max-height: 120px; resize: vertical; }
.dge-ai-item kbd { flex: none; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--muted); font: 500 11px var(--mono); }
/* where the tool bar reaches the corner, the AI button and the zoom go above it */
@container board (max-width: 900px) {
  .dge .dge-ai-fab { bottom: 68px; }
  .dge .dge-zoombar { bottom: 68px; }
  .dge-ai-menu, .dge-ask-panel { bottom: 132px; }
}

/* Find (⌘F) */
.dge-find { position: absolute; top: 56px; right: 16px; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg); box-shadow: var(--shadow); }
/* Settling a merge */
.dge-merge { position: absolute; inset: 0; z-index: 25; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); }
.dge-merge header { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dge-merge header h2 { margin: 0; font-size: 16px; }
.dge-merge-note { margin: 0; flex: 1; font-size: 13px; }
.dge-merge-actions { display: flex; gap: 8px; }
.dge-merge-actions .primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.dge-merge-panes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; }
.dge-merge-pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.dge-merge-pane:last-child { border-right: 0; }
.dge-merge-pane.result { background: var(--accent-bg); }
.dge-merge-pane h3 { margin: 0; padding: 8px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dge-merge-svg { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.dge-merge-svg svg { width: 100%; height: auto; max-height: 100%; }
.dge-merge footer { display: grid; grid-template-columns: 1fr minmax(260px, 34%); gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); max-height: 40vh; overflow: auto; }
.dge-merge-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.dge-merge-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-2); }
.dge-merge-pick { display: inline-flex; flex: none; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.dge-merge-pick button { border: 0; border-radius: 0; padding: 4px 10px; background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.dge-merge-pick button.on { background: var(--accent); color: #fff; }
.dge-merge-svg .dge-clash .dg-shape, .dge-merge-svg .dge-clash .dg-line { stroke: #e5a50a; stroke-width: 3; stroke-dasharray: 7 4; }
.dge-merge-ask { display: flex; flex-direction: column; gap: 6px; }
.dge-merge-ask button { align-self: flex-end; }

/* Canvases: where you are, and the way back up */
.dge-trail { position: absolute; top: 56px; left: 16px; z-index: 6; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 32px); padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); box-shadow: var(--shadow); font-size: 13px; white-space: nowrap; overflow: hidden; }
.dge-trail button { border: 0; background: transparent; color: var(--accent); font: inherit; padding: 2px 4px; border-radius: 6px; cursor: pointer; }
.dge-trail button:hover { background: var(--hover, rgba(127,127,127,.12)); }
.dge-trail strong { padding: 2px 4px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.dge-trail-sep { color: var(--muted); }
.dge button.primary.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.dg-open { cursor: pointer; }
.dge-find-input { width: 220px; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: 13px; }
.dge-find-count { font-size: 12px; min-width: 64px; }

/* Present */
.dge-presenting .dge-toolbar, .dge-presenting .dge-tools, .dge-presenting .dge-zoombar, .dge-presenting .dge-ai-fab, .dge-presenting .dge-ai-menu { display: none !important; }
.dge-present-bar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); box-shadow: var(--shadow); font-size: 13px; white-space: nowrap; }
.dge-present-bar span { padding: 0 6px; }

/* Section titles, readable when zoomed out */
.dge-titles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.dge-titles[hidden] { display: none; }
.dge-title { position: absolute; transform: translateY(-50%); padding: 2px 8px; border-radius: 6px; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the one bar: the host's lead, where you are, git, status; actions right */
.dge-lead { flex: none; padding-right: 12px; border-right: 1px solid var(--line); }
/* where you are, above the canvas (inside a canvas or an answer) */
.dge-crumbs { position: absolute; top: 66px; left: 16px; z-index: 6; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 32px); box-sizing: border-box; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); box-shadow: var(--shadow); font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.dge-crumbs[hidden] { display: none; }
.dge .dge-crumbs button { height: auto; min-height: 0; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font: inherit; font-weight: 600; }
.dge .dge-crumbs button:hover { background: var(--accent-bg); }
.dge-crumbs strong { padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; font-weight: 650; color: var(--fg); }
.dge-crumb-sep { color: var(--muted); }
.dge .dge-branch { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 26px; min-height: 0; padding: 0 10px; border: 0; border-radius: 999px; background: var(--bg3); color: var(--muted); font: 11.5px var(--mono); white-space: nowrap; }
.dge .dge-branch:hover { color: var(--fg); }
.dge .dge-branch.on { background: var(--accent-bg); color: var(--accent); }
.dge .dge-branch svg { width: 13px; height: 13px; }
.dge .dge-bar-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
.dge .dge-bar-btn svg { width: 15px; height: 15px; }
.dge .dge-toolbar .dge-share { height: 32px; min-height: 0; padding: 0 14px; border: 0; border-radius: 8px; background: var(--fg); color: var(--bg); font-weight: 600; }
.dge .dge-toolbar .dge-share:hover { color: var(--bg); filter: brightness(1.15); }
/* Board: the settings that used to be selects in the bar */
.dge-board-menu { position: absolute; z-index: 42; overflow: auto; display: flex; flex-direction: column; gap: 10px; width: 280px; box-sizing: border-box; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow); color: var(--fg); }
.dge-board-menu[hidden] { display: none; }
.dge-board-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.dge-board-row select { min-width: 150px; }
.dge-set-list { margin-top: -6px; font-size: 11.5px; line-height: 1.4; }
.dge .dge-board-tidy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.dge .dge-board-tidy svg { width: 15px; height: 15px; }
/* Blocks: every block type in one palette above the tool bar */
.dge .dge-tools .dge-blocks-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 12px; font-weight: 600; color: var(--fg); background: var(--bg3); }
.dge .dge-tools .dge-blocks-btn.on { background: var(--accent-bg); color: var(--accent); }
.dge-blocks { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 7; width: min(480px, calc(100% - 32px)); max-height: calc(100% - 100px); overflow: auto; box-sizing: border-box; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow); }
.dge-blocks[hidden] { display: none; }
/* Shapes: the shape tool's picker, over its button */
.dge .dge-tools .dge-shapes-btn { position: relative; }
.dge-caret { position: absolute; right: 3px; bottom: 4px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid currentColor; opacity: .7; }
.dge-shapes { position: absolute; bottom: 72px; z-index: 7; display: grid; grid-template-columns: repeat(6, 36px); gap: 2px; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow); }
.dge-shapes[hidden] { display: none; }
.dge .dge-shapes button { width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg); }
.dge .dge-shapes button:hover { background: var(--bg3); }
.dge .dge-shapes button.on { background: var(--accent-bg); color: var(--accent); }
.dge .dge-shapes svg { width: 20px; height: 20px; }
.dge-blocks-head { padding: 8px 8px 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.dge-blocks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.dge .dge-blocks-grid button { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 10px; height: auto; min-height: 0; padding: 8px; border: 0; border-radius: 9px; background: transparent; text-align: left; color: var(--fg); }
.dge .dge-blocks-grid button:hover { background: var(--accent-bg); }
.dge-blocks-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--bg3); color: var(--fg); }
.dge-blocks-ico svg { width: 17px; height: 17px; }
.dge-blocks-text { display: flex; flex-direction: column; min-width: 0; }
.dge-blocks-text b { font-weight: 600; }
.dge-blocks-text span { color: var(--muted); font-size: 11.5px; }
@container board (max-width: 900px) { .dge-blocks { bottom: 124px; } }
@media (max-width: 640px) { .dge .dge-branch, .dge .dge-toolbar .dge-chip, .dge .dge-toolbar .dge-persp { display: none; } }
@media (max-width: 640px) { .dge .dge-bar-btn span { display: none; } .dge .dge-bar-btn { padding: 0 8px; } }
.dge .dge-branch[hidden] { display: none; }
/* an answer: a temporary canvas; its bar says so and offers what to do with it */
.dge-preview-bar.dge-answer-bar { flex-wrap: wrap; width: min(720px, calc(100% - 32px)); box-sizing: border-box; padding: 12px 12px 10px 16px; border-radius: 14px; white-space: normal; }
.dge-preview-bar.dge-answer-bar > span:first-child { display: flex; flex: 1 1 100%; flex-direction: column; gap: 3px; max-width: none; }
.dge-answer-bar .dge-answer-temp { margin-right: auto; }
.dge-answer-summary { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); font-size: 12.5px; }
.dge-answer-summary b { color: var(--fg); font-weight: 600; }
.dge-answer-temp { font-size: 12px; white-space: nowrap; }
.dge-crumb-answer { color: var(--accent) !important; }
/* perspectives: the switcher in the bar, and a new one */
.dge .dge-toolbar .dge-persp { flex: none; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-weight: 600; }
.dge-persp-form { display: flex; flex-direction: column; gap: 12px; min-width: 360px; }
.dge-persp-form > label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.dge-persp-form input[type=text], .dge-persp-form input:not([type]) { height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-weight: 400; }
.dge-persp-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 6px; }
.dge-persp-kinds label, .dge-persp-check { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.dge-persp-form > label.dge-persp-check { flex-direction: row; align-items: center; font-weight: 400; }
/* history: the board's versions */
.dge-board-menu.dge-history { width: 340px; max-height: 60vh; overflow: auto; }
.dge-history-list { display: flex; flex-direction: column; gap: 2px; }
.dge-history-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; }
.dge-history-row:hover { background: var(--bg3); }
.dge-history-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dge-history-text span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dge .dge-history-row button { height: 26px; min-height: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: 12px; }
.dge .dge-name-input { height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; background: var(--bg); color: var(--fg); }
/* AI prompts…: one tab per AI action */
.dge-prompt-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dge .dge-prompt-tabs button { height: 28px; min-height: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font-size: 12px; }
.dge .dge-prompt-tabs button.on { border-color: var(--accent); color: var(--accent); background: var(--bg2); }
/* Your AI: connect one, check it, what to try when it fails */
.dge-ai-setup p { margin: 10px 0; line-height: 1.5; }
.dge-ai-setup code { padding: 1px 5px; border-radius: 4px; background: var(--bg2); font: 12px var(--mono); }
.dge-ai-tool { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.dge-ai-error { max-height: 160px; overflow: auto; margin: 0; padding: 10px; border-radius: 6px; background: var(--bg2); font: 12px/1.5 var(--mono); white-space: pre-wrap; }
.dge-ok { color: #1a7f37; }
.dge .dge-ai-menu .dge-ai-foot { width: 100%; height: 30px; min-height: 0; margin-top: 4px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--muted); font-size: 12px; }
/* opening a board: pick a perspective */
.dge-persp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
.dge .dge-persp-cards .dge-persp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; min-height: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); text-align: left; }
.dge .dge-persp-cards .dge-persp-card:hover { border-color: var(--accent); }
.dge .dge-persp-cards .dge-persp-card.on { border-color: var(--accent); background: var(--bg2); }
.dge-persp-card span { color: var(--muted); font-size: 12px; font-weight: 400; }
/* the minimap, above the zoom bar */
.dge-cursors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.dge-cursor { position: absolute; left: 0; top: 0; transition: transform 90ms linear; will-change: transform; }
.dge-cursor svg { display: block; fill: currentColor; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.dge-cursor.idle { opacity: 0; transition: transform 90ms linear, opacity .6s ease; }
.dge-remote-sel { position: absolute; left: 0; top: 0; box-sizing: border-box; border: 2px solid; border-radius: 6px; }
.dge-remote-sel[hidden] { display: none; }
.dge-remote-sel span { position: absolute; left: -2px; bottom: 100%; margin-bottom: 2px; padding: 1px 6px; border-radius: 6px 6px 6px 0; color: #fff; font: 600 11px/1.4 var(--font-ui, sans-serif); white-space: nowrap; }
.dge-cursor span { position: absolute; left: 14px; top: 16px; padding: 2px 7px; border-radius: 8px 8px 8px 2px; color: #fff; font: 600 11.5px/1.4 var(--font-ui, sans-serif); white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.dge-presenting .dge-cursors { display: none; }
.dge-minimap { position: absolute; left: 16px; bottom: 54px; z-index: 5; width: 200px; height: 132px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow-1); cursor: pointer; touch-action: none; }
.dge-minimap[hidden] { display: none; }
.dge-minimap svg { display: block; }
.dge-minimap .g { fill: var(--bg2); stroke: var(--line-strong); stroke-width: 0.75; }
.dge-minimap .n { fill: var(--muted); opacity: 0.55; }
.dge-minimap-view { position: absolute; border: 1.5px solid var(--accent); border-radius: 2px; background: color-mix(in srgb, var(--accent) 10%, transparent); pointer-events: none; }
.dge .dge-zoombar .dge-minimap-btn[aria-pressed="true"] { color: var(--accent); }
.dge-presenting .dge-minimap { display: none !important; }
@media (max-width: 640px) { .dge-minimap { display: none; } }
/* presentation mode: the slides on the right, their order on the board */
.dge-deck { position: absolute; top: 52px; right: 0; bottom: 0; z-index: 8; display: flex; flex-direction: column; gap: 10px; width: 340px; padding: 12px; overflow: auto; border-left: 1px solid var(--line-strong); background: var(--bg); box-shadow: var(--shadow); }
.dge-decking .dge-ai-fab, .dge-decking .dge-ai-menu { right: 356px; }
.dge-deck-head { position: sticky; top: -12px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -12px -12px 0; padding: 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.dge-deck-head b { flex: 1; font-size: 15px; }
.dge-deck-settings { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dge-deck-settings label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.dge-deck .dge-input, .dge-deck .dge-select { width: 100%; box-sizing: border-box; font-size: 13px; }
.dge-deck textarea.dge-input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font: 13px/1.4 inherit; resize: vertical; }
.dge-deck-empty { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 13px; }
.dge-deck-empty p { margin: 0; color: var(--muted); line-height: 1.45; }
.dge-deck-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dge-slide { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.dge-slide:hover { border-color: var(--line-strong); }
.dge-slide-top { display: flex; align-items: center; gap: 4px; }
.dge .dge-slide-top button { height: 24px; min-height: 0; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 13px; }
.dge .dge-slide-top button:hover:not(:disabled) { color: var(--fg); background: var(--bg2); }
.dge .dge-slide-top .dge-slide-go { display: flex; flex: 1; flex-direction: column; align-items: flex-start; height: auto; min-width: 0; padding: 2px 4px; text-align: left; color: var(--fg); }
.dge-slide-go b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dge-slide-go span { font-size: 11px; color: var(--muted); }
.dge-slide-num { display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-fg, #fff); font-size: 12px; font-weight: 600; }
.dge-slide-then { align-self: center; padding: 3px 0; color: var(--muted); font-size: 11px; }
.dge-deck-layer { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.dge-deck-frame { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; opacity: 0.55; }
.dge-deck-path { fill: none; stroke: var(--accent); stroke-width: 2.5; opacity: 0.8; }
.dge-deck-head-mark { fill: var(--accent); }
.dge-deck-num { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.dge-deck-num-text { fill: #fff; font: 600 13px system-ui, sans-serif; text-anchor: middle; }
.dge-present-notes { position: absolute; left: 50%; bottom: 72px; z-index: 9; transform: translateX(-50%); max-width: min(720px, 90vw); padding: 10px 14px; border-radius: 10px; background: rgba(20, 22, 28, 0.88); color: #f2f3f5; font-size: 15px; line-height: 1.45; }
.dge-present-notes[hidden] { display: none; }
.dge-presenting .dge-deck, .dge-presenting .dge-deck-layer { display: none !important; }
.dge .dge-deck-head button.primary { height: 30px; min-height: 0; padding: 0 12px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-fg, #fff); font-weight: 600; }
.dge .dge-deck input.dge-input { height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
/* wireframes: the bar to add components while a screen is selected */
.dge-screenbar { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 2px; max-width: calc(100% - 32px); overflow-x: auto; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow-1); }
.dge-screenbar[hidden] { display: none; }
.dge .dge-screenbar button { height: 30px; min-height: 0; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--fg); font-size: 13px; white-space: nowrap; }
.dge .dge-screenbar button:hover { background: var(--bg3); }
.dge .dge-screenbar .dge-screenbar-more { color: var(--accent); font-weight: 600; }
.dge-screenbar-label { padding: 0 6px 0 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.dge-widgets { bottom: 112px; }
.dge-widgets-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.dge .dge-widgets-grid button { height: 32px; min-height: 0; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--fg); font-size: 13px; text-align: left; }
.dge .dge-widgets-grid button:hover { background: var(--bg3); }
.dge-presenting .dge-screenbar { display: none !important; }
.dge .dge-persp-cards .dge-persp-card { min-width: 0; white-space: normal; }
.dge-persp-card b, .dge-persp-card span { max-width: 100%; overflow-wrap: anywhere; }
/* a perspective's folded blocks: cards that open on a click */
.dg-node[data-id^="@fold/"] { cursor: pointer; }
.dg-node[data-id^="@fold/"]:hover .dg-shape { stroke: var(--accent); stroke-width: 2; }
.dge .dge-folds { color: var(--accent); }
.dge-empty-view { position: absolute; left: 50%; top: 76px; z-index: 5; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg); box-shadow: var(--shadow); text-align: center; }
.dge-empty-view[hidden] { display: none; }
.dge-empty-view { pointer-events: none; opacity: 0.96; }
.dge-empty-view button { pointer-events: auto; }
.dge-empty-view b { font-size: 15px; }
.dge-empty-view p { margin: 8px 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.dge-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dge .dge-empty-actions button { height: 32px; min-height: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font-size: 13px; }
.dge .dge-empty-actions button.primary { border-color: transparent; background: var(--accent); color: var(--accent-fg, #fff); font-weight: 600; }
.dge .dge-folds[hidden], .dge .dge-back[hidden] { display: none; }
/* a summary is read-only, but for comments: of the tools, select and comment */
.dge.dge-dash .dge-tools > :not([data-tool="select"]):not([data-tool="comment"]) { display: none; }
/* resizing a box from its corner */
.dge-overlay .dge-grip { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; cursor: nwse-resize; pointer-events: all; }
/* the zoom tool */
.dge-canvas.zooming { cursor: zoom-in; }
.dge-canvas.zooming.out { cursor: zoom-out; }

/* images that go with a request to the AI */
.dge-att-bar { display: flex; align-items: flex-start; gap: 8px; margin: -2px 0 8px; }
.dge-att { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.dge-att[hidden] { display: none; }
.dge-ask-panel > .dge-att { padding: 8px 10px 0; }
.dge-att-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dge-att-item img { width: 64px; height: 48px; object-fit: cover; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg2); }
.dge .dge-att-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg); font-size: 12px; line-height: 1; }
.dge-att-keep { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; }
.dge .dge-att-btn { flex: none; width: 32px; height: 32px; min-height: 0; padding: 0; display: grid; place-items: center; }
.dge .dge-att-btn svg { width: 16px; height: 16px; }

/* the AI at work on the board: dimmed and locked, a card saying what it does */
.dge-busy { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--bg) 35%, transparent); backdrop-filter: blur(0.6px) saturate(0.8); cursor: progress; }
.dge-busy-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(360px, calc(100% - 48px)); padding: 20px 22px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-4); background: var(--bg); box-shadow: var(--shadow); text-align: center; cursor: default; }
.dge-busy-card b { font-size: 15px; overflow-wrap: anywhere; }
.dge-busy-what { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.dge-busy-spark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-solid, var(--accent)); color: #fff; }
.dge-busy-spark svg { width: 20px; height: 20px; }
.dge-busy-step { min-height: 18px; color: var(--fg); font-size: 13px; }
.dge-busy-dots { display: flex; gap: 6px; }
.dge-busy-dots span { width: 22px; height: 4px; border-radius: 2px; background: var(--line-strong); transition: background .4s; }
.dge-busy-dots span.on { background: var(--accent); }
.dge-busy-foot { display: flex; gap: 10px; align-items: baseline; font-size: 11.5px; }
.dge-busy-time { font-variant-numeric: tabular-nums; color: var(--muted); }
.dge.dge-busy-on .dge-toolbar, .dge.dge-busy-on .dge-tools, .dge.dge-busy-on .dge-ai-fab { pointer-events: none; opacity: 0.55; }
/* what the AI changed, in the same kind of card: kept or discarded */
.dge-preview-bar.dge-ai-card { flex-direction: column; align-items: stretch; gap: 10px; width: min(520px, calc(100% - 32px)); box-sizing: border-box; padding: 16px 16px 12px; border-radius: var(--r-4); white-space: normal; }
.dge-ai-card-head { display: flex; align-items: center; gap: 12px; }
.dge-ai-card-head > div { display: flex; flex-direction: column; gap: 1px; }
.dge-ai-card-head b { font-size: 14px; }
.dge-ai-card-head .dge-muted { font-size: 12px; }
.dge .dge-ai-card-note { margin: 0; overflow-wrap: anywhere; max-height: 30vh; overflow: auto; font-size: 13px; line-height: 1.45; color: var(--fg); }
.dge-ai-card-actions { display: flex; align-items: center; gap: 8px; }
.dge-ai-card-actions .dge-spacer { flex: 1; }
.dge .dg-gfold { cursor: pointer; }
/* saving a new board: its folder, and what went wrong */
.dge-save-where { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.dge-save-dir { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font-size: 12px; }
.dge-persp-form p.dge-error { margin: 0; color: var(--danger); font-size: 12px; font-weight: 400; }
.dge-persp-form p.dge-error[hidden] { display: none; }
.dge .dge-ask-a button.dge-ask-draw { margin-top: 4px; }
/* Plan the delivery: the AI's questions */
.dge-plan-form { max-height: 60vh; overflow: auto; }
.dge-plan-form textarea { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-weight: 400; resize: vertical; }
.dge-plan-form > p { margin: 0; }