/* Course Studio editor chrome */

:root {
  --bg: oklch(0.955 0.004 255);
  --panel: oklch(0.985 0.002 255);
  --panel-2: oklch(0.965 0.004 255);
  --canvas-surround: oklch(0.885 0.006 255);
  --border: oklch(0.895 0.008 255);
  --border-strong: oklch(0.82 0.01 255);
  --ink: oklch(0.27 0.02 260);
  --ink-muted: oklch(0.46 0.02 260);
  --accent: oklch(0.53 0.17 264);
  --accent-hover: oklch(0.47 0.17 264);
  --accent-soft: oklch(0.93 0.035 264);
  --danger: oklch(0.55 0.19 25);
  --radius: 8px;
  --z-handles: 10;
  --z-pop: 60;
  --z-modal: 80;
  --z-preview: 100;
  --z-toast: 200;
  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
  user-select: none;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- Ribbon ---------- */

.ribbon { background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; }

.ribbon-tabrow {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
}

.logo { color: var(--accent); display: flex; align-items: center; margin-right: 2px; }

.ribbon-tabs { display: flex; align-items: stretch; height: 100%; }
.ribbon-tabs button {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 0 14px;
  cursor: pointer;
  transition: color 150ms ease-out;
}
.ribbon-tabs button:hover { color: var(--ink); }
.ribbon-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
/* Contextual Format tab: tinted so it reads as "appeared because of the selection" */
.ribbon-tabs button.contextual { color: var(--accent); opacity: 0.75; }
.ribbon-tabs button.contextual::before { content: ''; }
.ribbon-tabs button.contextual.on { opacity: 1; background: var(--accent-soft); border-radius: 6px 6px 0 0; }

/* ---------- Format pane controls ---------- */
.rb-field { display: flex; align-items: center; gap: 5px; }
.rb-field label { font-size: 0.68rem; font-weight: 600; color: var(--ink-muted); min-width: 38px; }
.rb-field input[type="number"] {
  font: inherit; font-size: 0.75rem; width: 62px; color: var(--ink); background: white;
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px;
}
.rb-field input[type="number"]:focus { outline: none; border-color: var(--accent); }
.rb-field .rb-sfx { font-size: 0.65rem; color: var(--ink-muted); }
.rb-stack { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.rb-stack .btn-row { gap: 3px; }
.rb-stack .mini-btn { flex: none; min-width: 26px; padding: 4px 5px; }
.ribbon-empty { display: flex; align-items: center; padding: 0 14px; font-size: 0.8125rem; color: var(--ink-muted); }

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

/* Tall enough for the Drawing group's three stacked buttons plus the group caption. */
.ribbon-body { height: 92px; display: flex; align-items: stretch; padding: 4px 10px; overflow-x: auto; overflow-y: hidden; }
/* Folded away: the tabs stay, so the ribbon can be brought back from where it
   went, and the slide gets the ninety two pixels. */
.ribbon.collapsed .ribbon-body { display: none; }

/* Sits with the tabs but is not one, so it has to outrank the tab styling. */
.ribbon-tabs button.ribbon-fold {
  align-self: center;
  flex-shrink: 0;
  margin-left: 10px;
  width: 26px;
  height: 22px;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 5px;
}
.ribbon-tabs button.ribbon-fold:hover {
  color: var(--ink);
  background: var(--panel-2);
  border-color: var(--border);
}

.ribbon-group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 0 8px;
}
.ribbon-group:first-child { padding-left: 0; }
.ribbon-group-items { display: flex; align-items: flex-start; gap: 2px; flex: 1; }

/* Groups with a lot of items lay out in two short rows instead of one long one,
   so every tab fits the ribbon and nothing has to be scrolled into view. */
.ribbon-group-items.rows2 {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: 3px 4px;
  align-content: center;
}
.ribbon-group-items.rows2 .rb-btn,
.ribbon-group-items.rows2 .tr-card {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: 25px;
  padding: 0 7px;
  gap: 5px;
  white-space: nowrap;
  text-align: left;
}
.ribbon-group-items.rows2 .tr-swatch { width: 20px; height: 14px; flex-shrink: 0; }
.ribbon-group-items.rows2 .rb-field { gap: 3px; }
.ribbon-group-items.rows2 .rb-field label { min-width: 34px; }
.ribbon-group-items.rows2 .rb-field input[type="number"] { width: 56px; }
/* Animation controls in two rows: the four groups laid end to end were wider
   than the ribbon and pushed it into a sideways scroll. */
.ribbon-group-items.rows2 .draw-btn { width: 118px; height: 25px; padding: 0 5px; }
.ribbon-group-items.rows2 .draw-btn.narrow { width: 40px; justify-content: center; }
.ribbon-group-items.rows2 .rb-mini { gap: 2px; }
.ribbon-group-items.rows2 .rb-mini label { font-size: 0.6rem; }
.ribbon-group-items.rows2 .rb-mini input[type="number"] { width: 50px; height: 22px; }
.ribbon-group-label {
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink-muted);
  padding: 2px 0 3px;
}

.rb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 62px;
  height: 58px;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out;
  line-height: 1.1;
  text-align: center;
}
.rb-btn:hover { background: var(--panel-2); border-color: var(--border); }
.rb-btn:active, .rb-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rb-btn:disabled { opacity: 0.35; cursor: default; }
.rb-btn:disabled:hover { background: transparent; border-color: transparent; }
.rb-btn svg { display: block; flex-shrink: 0; }

.rb-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.rb-mini-row { display: flex; align-items: center; gap: 4px; }
.rb-mini label { font-size: 0.65rem; font-weight: 500; color: var(--ink-muted); min-width: 34px; }
.rb-mini input[type="number"], .rb-mini select {
  font: inherit;
  font-size: 0.75rem;
  width: 66px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 5px;
  background: white;
  color: var(--ink);
}
.rb-mini input[type="color"] {
  width: 30px; height: 24px;
  border: 1px solid var(--border); border-radius: 5px; background: white; padding: 1px; cursor: pointer;
}

/* transition cards */
.tr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 66px;
  height: 62px;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--ink);
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.tr-card:hover { border-color: var(--border-strong); }
.tr-card.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tr-swatch { width: 30px; height: 20px; border-radius: 4px; background: var(--canvas-surround); position: relative; overflow: hidden; }
.tr-swatch::after { content: ""; position: absolute; inset: 0; background: var(--accent); opacity: 0.75; }
.tr-swatch.plain::after { display: none; }
.tr-none .tr-swatch::after { display: none; }
.tr-fade .tr-swatch::after { background: linear-gradient(90deg, transparent, var(--accent)); }
.tr-push-left .tr-swatch::after { inset: 0 0 0 50%; }
.tr-push-right .tr-swatch::after { inset: 0 50% 0 0; }
.tr-push-up .tr-swatch::after { inset: 50% 0 0 0; }
.tr-zoom .tr-swatch::after { inset: 4px 6px; border-radius: 2px; }
.tr-wipe .tr-swatch::after { inset: 0 30% 0 0; }
.tr-circle .tr-swatch::after { inset: 2px 7px; border-radius: 50%; }

.course-title {
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  width: 170px;
  min-width: 0;
}
.course-title:hover { border-color: var(--border); }
.course-title:focus { outline: none; border-color: var(--accent); background: white; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.icon-btn:hover { background: var(--panel-2); color: var(--ink); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
/* Pressed state for icon buttons that toggle, such as the chat's ? help switch. */
.icon-btn.on { background: var(--accent-soft); color: var(--accent); }
.icon-btn.on:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn:disabled:hover { background: transparent; color: var(--ink-muted); }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.ghost-btn:hover { background: var(--panel-2); border-color: var(--border-strong); }

.primary-btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: white;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 5px 13px;
  cursor: pointer;
  transition: background 150ms ease-out;
}
.primary-btn:hover { background: var(--accent-hover); }

.divider { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }

/* ---------- Workspace ---------- */

.workspace { display: flex; flex: 1; min-height: 0; }
.workspace[hidden] { display: none; }

/* ---------- View switch ---------- */

.view-switch {
  display: flex;
  gap: 2px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px;
  margin: 0 4px 0 2px;
}
.view-switch button {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}
.view-switch button:hover { color: var(--ink); }
.view-switch button.on { color: var(--accent); background: white; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08); }

/* ---------- Birds View ---------- */

.birds-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas-surround);
}
.birds-view[hidden] { display: none; }
.birds-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.birds-title { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.birds-sub { font-size: 0.75rem; color: var(--ink-muted); flex: 1; }
.birds-board { flex: 1; min-height: 0; overflow: auto; position: relative; padding: 28px 34px; }
#birdsZoomWrap { margin: 0 auto; }
.birds-inner { position: relative; width: max-content; transform-origin: top left; display: flex; align-items: flex-start; gap: 40px; }
.birds-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }

.birds-scene {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: oklch(0.975 0.003 255 / 0.6);
  padding: 10px 16px 18px;
  width: 232px;
  flex-shrink: 0;
}
.birds-scene-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.birds-scene-chip {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); color: white; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.birds-scene-name { font-size: 0.9rem; font-weight: 700; color: var(--ink); cursor: text; }
.birds-scene-input { font: inherit; font-size: 0.9rem; font-weight: 700; border: 1px solid var(--accent); border-radius: 5px; padding: 1px 6px; }
.birds-scene-count { font-size: 0.72rem; color: var(--ink-muted); }
.birds-scene-head .small-btn { margin-left: auto; }
.birds-scene-head .icon-btn:hover { color: var(--danger); }
.birds-scene-empty { font-size: 0.78rem; color: var(--ink-muted); padding: 18px 6px; }
.birds-cards { display: flex; flex-direction: column; gap: 40px; align-items: center; }
.birds-card { width: 200px; }

.birds-add-scene {
  align-self: flex-start;
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted);
  background: transparent; border: 1.5px dashed var(--border-strong); border-radius: 12px;
  padding: 14px 18px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.birds-add-scene:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Birds zoom control */
.birds-zoom { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; }
.birds-zoom .icon-btn { width: 24px; height: 24px; font-size: 1rem; }
.birds-zoom span { font-size: 0.72rem; font-weight: 600; color: var(--ink-muted); min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.birds-sub { flex: none; }

.birds-card {
  position: relative;
  z-index: 1;
  width: 208px;
  cursor: pointer;
  border-radius: 9px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.birds-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px oklch(0 0 0 / 0.13); }
.birds-card.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), 0 4px 14px oklch(0 0 0 / 0.13); }
.birds-card.dragging { opacity: 0.6; }
.birds-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: white;
}
.birds-card-thumb .slide-thumb-inner { position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; }
.birds-card-meta { display: flex; align-items: center; gap: 6px; padding: 6px 8px 7px; }
.birds-card-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.birds-card-name { flex: 1; font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.birds-card-del {
  flex-shrink: 0; opacity: 0; width: 20px; height: 20px; border: none; background: transparent;
  color: var(--ink-muted); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 4px;
}
.birds-card:hover .birds-card-del { opacity: 0.7; }
.birds-card-del:hover { opacity: 1 !important; color: var(--danger); background: var(--panel-2); }
.birds-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 0.625rem; font-weight: 600; color: white; background: oklch(0.4 0.02 260 / 0.75);
  border-radius: 4px; padding: 1px 6px; pointer-events: none;
}

.slides-panel {
  width: 188px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.slide-list { flex: 1; overflow-y: auto; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.slide-scene-divider {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 2px 1px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slide-scene-divider:first-child { border-top: none; margin-top: 0; padding-top: 2px; }

.slide-item { cursor: pointer; }

.slide-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: white;
  transition: border-color 150ms ease-out;
  /* A thumbnail is a whole slide's worth of objects in a box an inch wide. On a
     long course that is thousands of boxes for the browser to measure every time
     anything changes, even though all but a handful are scrolled out of sight.
     This lets it skip the ones you cannot see until you scroll to them, which is
     what stops a long course from getting slower to edit than a short one.

     No contain-intrinsic-size to go with it: the width above and the
     aspect-ratio set from the course's own slide size already give an exact
     height without looking inside. Measured on a forty slide course, A/B in one
     sitting: this line takes an edit from 68ms to 30ms, and adding an intrinsic
     size on top changes nothing (30ms either way), so it would only be a number
     to get wrong when the slide shape changes. */
  content-visibility: auto;
}
.slide-item:hover .slide-thumb { border-color: var(--border-strong); }
.slide-item.active .slide-thumb { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.slide-thumb-inner {
  width: 960px;
  height: 540px;
  transform-origin: top left;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.slide-meta { display: flex; align-items: center; gap: 4px; padding: 3px 2px 0; }
.slide-num { font-size: 0.6875rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.slide-name { flex: 1; font-size: 0.75rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-actions { display: none; }
.slide-item:hover .slide-actions, .slide-item.active .slide-actions { display: flex; }
.slide-actions .icon-btn { width: 22px; height: 22px; }

/* ---------- Canvas column ---------- */

.canvas-column { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Open-slide tabs (top of canvas) ---------- */

.slide-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 6px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  height: 34px;
}
.slide-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px 0 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  max-width: 190px;
}
.slide-tab:hover { background: var(--panel); color: var(--ink); }
.slide-tab.on { background: var(--panel); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.slide-tab .st-name { overflow: hidden; text-overflow: ellipsis; }
.slide-tab .st-close {
  width: 16px; height: 16px; border-radius: 4px; border: none; background: transparent;
  color: var(--ink-muted); font-size: 0.85rem; line-height: 1; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.slide-tab .st-close:hover { background: var(--border); color: var(--ink); }
.slide-tab.on .st-close { color: var(--ink-muted); }

.layer-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}
.layer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms ease-out, color 150ms ease-out;
}
.layer-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.layer-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.layer-bar-label { font-size: 0.6875rem; font-weight: 600; color: var(--ink-muted); margin-right: 2px; }
.layer-chip .layer-del {
  margin-left: 7px;
  opacity: 0.5;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}
.layer-chip .layer-del:hover { opacity: 1; color: var(--danger); }

/* ---------- Panel collapse ---------- */

.ph-actions { display: flex; align-items: center; gap: 2px; }
.slides-panel { transition: width 160ms ease-out; }
.slides-panel.collapsed { width: 34px; }
.slides-panel.collapsed .slide-list { display: none; }
.slides-panel.collapsed .ph-label,
.slides-panel.collapsed #btnAddSlide { display: none; }
.slides-panel.collapsed .panel-head { justify-content: center; padding: 8px 0; }

.right-col { transition: width 160ms ease-out; }
.right-col.collapsed { width: 34px; }
.right-col.collapsed .rt-tab,
.right-col.collapsed .rt-action { display: none; }
.right-col.collapsed .right-body { display: none; }
.right-col.collapsed .right-tabs { justify-content: center; padding: 0; }
.rt-collapse { margin-left: 4px; }
.rt-tab + .rt-collapse { margin-left: auto; }

.canvas-area {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--canvas-surround);
  /* Scrolls rather than clips, so an object parked well outside the slide can
     still be reached. */
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-wrap { position: relative; flex-shrink: 0; }

.canvas {
  width: 960px;
  height: 540px;
  background: white;
  box-shadow: 0 4px 24px oklch(0 0 0 / 0.13);
  position: absolute;
  top: 0;
  left: 0;
  /* Objects are allowed to sit outside the slide, on the grey around it, the way
     every other canvas tool allows: that is where you park a thing you intend to
     fly in. The learner never sees this area, because the player clips at the
     slide edge. */
  overflow: visible;
  transform-origin: top left;
}
/* Off the slide, an object is shown faded and dashed, so at a glance you can
   tell what the learner will see from what is waiting in the wings. */
/* Elements carry an inline opacity, so this has to outrank it, the same reason
   the ghosted base slide below does. */
.canvas .cs-el.off-slide { opacity: 0.5 !important; }
.canvas .cs-el.off-slide::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1px dashed var(--border-strong);
  border-radius: 3px;
  pointer-events: none;
}
.canvas.base-ghost { box-shadow: none; }
.canvas.base-ghost .cs-el { opacity: 0.35 !important; }
.canvas.layer-mode { background: transparent !important; box-shadow: none; }

.zoom-label {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}

/* Editor element states */
.cs-el.edit-mode { cursor: grab; }
.cs-el.edit-mode:active { cursor: grabbing; }
.cs-el.edit-hidden { opacity: 0.4 !important; outline: 1.5px dashed var(--ink-muted); outline-offset: 2px; }
.cs-el.selected { outline: 1.5px solid var(--accent); outline-offset: 0; }
/* Also selected, but not the primary: no handles, lighter outline. */
.cs-el.co-selected { outline: 1.5px dashed var(--accent); outline-offset: 0; opacity: .96; }

/* The box around a whole multi-selection. Pointer-events off so it never eats a
   click meant for an element underneath it. */
.sel-box {
  position: absolute; pointer-events: none; z-index: 60;
  border: 1px dashed var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.sel-box-count {
  position: absolute; left: 0; top: -17px; white-space: nowrap;
  font-size: 10px; font-weight: 600; line-height: 1;
  padding: 3px 5px; border-radius: 3px;
  background: var(--accent); color: white;
}
/* Rubber band drawn while dragging across empty canvas. */
.marquee {
  position: absolute; pointer-events: none; z-index: 61;
  border: 1px solid var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}

/* The route a selected object will travel, drawn over the slide. It reaches
   outside the slide as freely as the objects do, so it is not clipped, and only
   its sizing handle is there to be caught. */
.motion-overlay {
  position: absolute; inset: 0; overflow: visible;
  pointer-events: none; z-index: 62;
}
.motion-overlay .mp-line {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: 6 4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.95;
}
/* Laid under the dashed line so the route reads on a dark slide too. */
.motion-overlay .mp-halo {
  fill: none; stroke: white; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.55;
}
.motion-overlay .mp-start { fill: #4ca24f; stroke: white; stroke-width: 1.5; }
.motion-overlay .mp-end { fill: #d9544d; stroke: white; stroke-width: 1.5; }
.motion-overlay .mp-handle {
  fill: white; stroke: var(--accent); stroke-width: 1.5;
  pointer-events: auto; cursor: nwse-resize;
}
.motion-overlay .mp-handle:hover { fill: var(--accent); }
.motion-overlay.drawing .mp-line { stroke-dasharray: none; stroke-width: 2; }
/* While a path is being drawn the slide is a sheet of paper. */
.canvas.path-draw { cursor: crosshair; }
.canvas.path-draw .cs-el { pointer-events: none; }
/* Measuring a route asks a real path element; it must not be seen doing it. */
.motion-measure {
  position: absolute; left: -9999px; top: 0; width: 1px; height: 1px;
  overflow: visible; opacity: 0; pointer-events: none;
}
/* A gallery cell showing a route rather than a star. */
.mp-icon .mp-line { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
.mp-icon .mp-start { fill: #4ca24f; }
.mp-icon .mp-end { fill: #d9544d; }

.handles { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-handles); }
.handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: white;
  border: 1.5px solid var(--accent);
  border-radius: 2.5px;
  pointer-events: auto;
}
.handle.nw { top: -5px; left: -5px; cursor: nwse-resize; }
.handle.n  { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.handle.ne { top: -5px; right: -5px; cursor: nesw-resize; }
.handle.e  { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.handle.se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.handle.s  { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.handle.sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.handle.w  { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }
/* Cropping: black brackets rather than blue squares, so the handles say plainly
   that they cut rather than resize. */
.handle.crop {
  width: 14px;
  height: 14px;
  background: #1c2030;
  border: 0;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.handle.crop.nw, .handle.crop.ne, .handle.crop.sw, .handle.crop.se { width: 16px; height: 16px; }
.handle.crop.n, .handle.crop.s { width: 22px; height: 6px; }
.handle.crop.e, .handle.crop.w { width: 6px; height: 22px; }
.handle.crop.n { top: -3px; left: calc(50% - 11px); }
.handle.crop.s { bottom: -3px; left: calc(50% - 11px); }
.handle.crop.e { right: -3px; top: calc(50% - 11px); }
.handle.crop.w { left: -3px; top: calc(50% - 11px); }
.handle.crop.nw { top: -3px; left: -3px; }
.handle.crop.ne { top: -3px; right: -3px; }
.handle.crop.sw { bottom: -3px; left: -3px; }
.handle.crop.se { bottom: -3px; right: -3px; }

/* What is being cut away, shown as a grey shadow of itself, so it reads as
   "this is going" rather than as part of the picture.

   The ghost is its own thing on the canvas, sitting under the element, because
   it has to reach outside the frame while the frame keeps clipping. Letting the
   element stop clipping instead spills its real content out at full colour,
   over the very ghost it is meant to be compared against.

   The fade and the grey need !important because every element carries an inline
   opacity and filter of its own, the same reason the off-slide fade and the
   ghosted base slide need it. */
.crop-ghost {
  opacity: 0.4 !important;
  pointer-events: none;
  filter: grayscale(1) contrast(0.8) !important;
}
/* The handles have to stay reachable above the ghost lying under them. */
.cs-el.cropping .handles { z-index: 3; }

.handle.rot {
  top: -30px; left: calc(50% - 7px);
  width: 14px; height: 14px; border-radius: 50%;
  border-color: var(--accent); background: white;
  cursor: grab;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234353c8' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 3v4h-4'/%3E%3C/svg%3E");
  background-size: 11px 11px; background-position: center; background-repeat: no-repeat;
}
.handle.rot:active { cursor: grabbing; }
.rot-stem {
  position: absolute; top: -19px; left: calc(50% - 0.75px);
  width: 1.5px; height: 19px; background: var(--accent); opacity: 0.7;
}
.handle.tail {
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;   /* centred on the tail tip */
  border-radius: 50%;
  background: var(--accent); border: 2px solid white;
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.35);
  cursor: move;
}
.rot-badge {
  position: absolute; top: -30px; left: 50%; transform: translateX(24px);
  background: var(--ink); color: white; font-size: 0.7rem; font-weight: 700;
  padding: 3px 7px; border-radius: 5px; pointer-events: none; white-space: nowrap;
  z-index: calc(var(--z-handles) + 1);
}

/* ---------- Bottom dock (Timeline / States / Notes) ---------- */

.dock {
  flex-shrink: 0;
  background: var(--panel);
  border-top: 1px solid var(--border);
  height: 164px;
  display: flex;
  flex-direction: column;
}
.dock.collapsed { height: auto !important; }
.dock.collapsed .dock-body { display: none; }
.dock.collapsed .dock-resize { display: none; }

.dock-resize {
  height: 7px;
  flex-shrink: 0;
  cursor: ns-resize;
  position: relative;
  margin-top: -4px;
}
.dock-resize::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--border-strong);
  opacity: 0.55;
  transition: background 150ms ease-out, opacity 150ms ease-out;
}
.dock-resize:hover::after { opacity: 1; background: var(--accent); }
.dock-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dock-tabs button {
  font: inherit;
  font-size: 0.71rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 10px 5px;
  cursor: pointer;
}
.dock-tabs button:hover { color: var(--ink); }
.dock-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.dock-tabs .dock-collapse { margin-left: auto; }
.dock-initial {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 0.71rem; font-weight: 600; color: var(--ink-muted);
}
.dock-initial select {
  font: inherit; font-size: 0.71rem; font-weight: 600; color: var(--ink);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px; cursor: pointer;
}
.dock-initial select:hover { border-color: var(--border-strong); }
.dock-tabs .dock-initial + .dock-collapse { margin-left: 14px; }
.dock-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 10px; }

.tl-rows { overflow-y: auto; }

/* States tab */
.states-wrap { display: flex; flex-direction: column; gap: 12px; }

.state-editing {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 8px 7px 12px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent);
  font-size: 0.72rem; color: var(--ink);
}
.state-editing b { color: var(--accent); }
.state-editing button {
  border: 0; border-radius: 6px; background: var(--accent); color: #fff;
  font: inherit; font-weight: 600; padding: 4px 14px; cursor: pointer; flex-shrink: 0;
}
.state-editing button:hover { background: var(--accent-hover); }

.state-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.state-card {
  position: relative; width: 92px; padding: 0 0 6px; overflow: visible;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2);
  cursor: pointer; text-align: center; font: inherit; color: var(--ink-muted);
}
.state-card:hover { border-color: var(--border-strong); }
.state-card.editing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.state-thumb {
  position: relative; height: 60px; width: 90px; overflow: hidden;
  border-radius: 8px 8px 0 0; background: var(--panel);
}
.state-thumb .cs-el { pointer-events: none; }
.state-card-label {
  font-size: 0.64rem; font-weight: 600; padding: 5px 6px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.state-card.editing .state-card-label { color: var(--accent); }
.state-card-label.editable:focus { outline: none; color: var(--accent); }
.lk-name { font-size: 0.86rem; font-weight: 700; color: var(--ink); }

/* Storyline's animation stars: green coming in, red going out, grey for none.
   The ornament strokes are the blue of its direction arrows. */
.anim-star .st { fill: #a9aeb9; }
.anim-star.ent .st { fill: #4ca24f; }
.anim-star.exit .st { fill: #d9544d; }
/* Emphasis is Storyline's third colour: gold, for "look here". */
.anim-star.emp .st { fill: #e8b21f; }
/* Motion paths are the fourth family, and get the fourth colour. */
.anim-star.path .st { fill: #7a5cd6; }
.anim-star .orn { stroke: #3b78c4; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* ---------- Gradient direction ---------- */

.grad-controls { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0 2px; flex-wrap: wrap; }
.grad-types { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; height: 24px; }
.grad-type {
  font: inherit; font-size: 0.68rem; font-weight: 600; padding: 0 10px;
  border: 0; background: var(--panel); color: var(--ink-muted); cursor: pointer;
}
.grad-type + .grad-type { border-left: 1px solid var(--border); }
.grad-type:hover { color: var(--ink); }
.grad-type.on { background: var(--accent); color: #fff; }

.grad-grid { display: grid; grid-template-columns: repeat(3, 22px); grid-auto-rows: 22px; gap: 2px; }
.grad-cell {
  font: inherit; font-size: 0.78rem; line-height: 1; padding: 0;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--ink-muted); cursor: pointer;
}
.grad-cell:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.grad-cell.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.grad-cell:disabled { opacity: 0.35; cursor: default; }
.grad-cell.mid { font-size: 1rem; }

.grad-angle { display: flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--ink-muted); font-weight: 600; }
.grad-angle input { width: 52px; }

.state-flag {
  position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 5px; background: transparent; cursor: pointer;
  color: var(--border-strong); opacity: 0.4; display: flex;
  align-items: center; justify-content: center;
}
.state-card:hover .state-flag { opacity: 1; }
.state-flag:hover { background: var(--panel-2); color: var(--ink-muted); }
.state-flag.on { opacity: 1; color: var(--accent); background: var(--accent-soft); }
.state-del {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--ink-muted); font-size: 12px; line-height: 1; cursor: pointer;
  display: none; padding: 0;
}
.state-card:hover .state-del { display: block; }
.state-del:hover { color: var(--danger); border-color: var(--danger); }
.state-card.add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 88px; border-style: dashed; gap: 2px;
}
.state-card.add:hover { border-color: var(--accent); color: var(--accent); }
.state-add-plus { font-size: 22px; line-height: 1; }
.state-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 6px; background: var(--panel-2);
  font-size: 0.66rem; font-weight: 600; color: var(--ink); text-align: center;
}

.state-chips { display: flex; gap: 10px; flex-shrink: 0; padding-top: 2px; }
.state-chip { text-align: center; }
.state-chip .sc-box {
  width: 86px;
  height: 52px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--border);
  position: relative;
  margin-bottom: 3px;
}
.state-chip .sc-label { font-size: 0.65rem; font-weight: 600; color: var(--ink-muted); }
.state-chip.off .sc-box { background: var(--panel-2) !important; color: var(--ink-muted) !important; border-style: dashed; }
.state-controls { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; align-items: start; }
.state-controls .check-row { margin-bottom: 4px; }
.state-controls .field-row { margin-bottom: 4px; }
.dock-hint { font-size: 0.75rem; color: var(--ink-muted); padding: 10px 4px; line-height: 1.5; }

/* Notes tab */
.notes-area {
  width: 100%;
  height: 100%;
  min-height: 96px;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink);
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  resize: none;
}
.notes-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  border-radius: 5px;
  padding: 0 4px;
  cursor: pointer;
}
.tl-row:hover { background: var(--panel-2); }
.tl-row.selected { background: var(--accent-soft); }
.tl-hint { font-size: 0.6875rem; color: var(--ink-muted); padding: 2px 4px 8px; }

.tl-name {
  width: 160px;
  flex-shrink: 0;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 6px;
  margin-right: 6px;
}
.tl-name.named { font-weight: 700; }
.tl-name:hover { border-color: var(--border); background: white; }
.tl-name:focus { outline: none; border-color: var(--accent); background: white; box-shadow: 0 0 0 2px var(--accent-soft); }

.tl-track {
  flex: 1;
  height: 24px;
  background: repeating-linear-gradient(90deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 60px);
  border-radius: 3px;
  position: relative;
  min-width: 200px;
}
.tl-stay {
  position: absolute;
  top: 3px;
  height: 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 3px;
  min-width: 6px;
  cursor: grab;
  overflow: hidden;
}
.tl-stay:active { cursor: grabbing; }
.tl-anim {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent);
  border-radius: 2px 0 0 2px;
  opacity: 0.85;
  pointer-events: none;
}
.tl-barcontent {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  pointer-events: none;
}
.tl-baricon { flex-shrink: 0; display: flex; color: var(--accent); }
.tl-baricon svg { width: 12px; height: 12px; }
.tl-barlabel { font-size: 0.62rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-stay.hiddenstart { background: transparent; border-style: dashed; }
.tl-stay.hiddenstart .tl-barlabel { color: var(--ink-muted); }
.tl-stay.media { background: oklch(0.93 0.045 155); border-color: oklch(0.52 0.12 155); }
.tl-stay.media .tl-baricon, .tl-stay.media .tl-anim { color: oklch(0.45 0.12 155); }
.tl-stay.media .tl-anim { background: oklch(0.52 0.12 155); }

.tl-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 7px;
  cursor: ew-resize;
  z-index: 2;
}
.tl-handle-l { left: -1px; border-radius: 3px 0 0 3px; }
.tl-handle-r { right: -1px; border-radius: 0 3px 3px 0; }
.tl-handle:hover { background: var(--accent); opacity: 0.5; }

.tl-toolbar { display: flex; align-items: center; gap: 12px; padding: 2px 4px 8px; }
.tl-length { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 0.68rem; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.tl-length input {
  width: 52px; font: inherit; font-size: 0.7rem; text-align: center;
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 4px; background: white;
}
.tl-length input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.tl-times { width: 124px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.tl-arrow { font-size: 0.62rem; color: var(--ink-muted); }
.tl-tf {
  width: 44px; font: inherit; font-size: 0.6rem; text-align: center;
  color: var(--ink); background: white; border: 1px solid var(--border); border-radius: 4px; padding: 2px 1px;
  font-variant-numeric: tabular-nums;
}
.tl-tf:hover { border-color: var(--border-strong); }
.tl-tf:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Laid out exactly like a .tl-row, because it has to line up with one.
 The ghosts below are real row parts made invisible, so a change to the
 name column or the gaps moves the ruler with it. */
.tl-ruler { display: flex; align-items: flex-end; gap: 8px; padding: 0 4px; height: 18px; margin-bottom: 4px; }
.tl-ruler-ghost { visibility: hidden; pointer-events: none; }
.tl-ruler-spacer { width: 166px; flex-shrink: 0; }
.tl-ruler-scale { flex: 1; position: relative; height: 16px; min-width: 200px; }
.tl-ruler-spacer-r { width: 124px; flex-shrink: 0; }
.tl-tick { position: absolute; bottom: 0; font-size: 0.58rem; color: var(--ink-muted); border-left: 1px solid var(--border); padding-left: 2px; line-height: 1; font-variant-numeric: tabular-nums; }
.tl-tick-end { color: var(--ink); font-weight: 600; border-left-color: var(--border-strong); }

/* ---------- Properties panel ---------- */

.right-col {
  width: 276px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--panel);
  min-height: 0;
}

.right-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.right-tabs .rt-tab {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px 7px;
  cursor: pointer;
}
.right-tabs .rt-tab:hover { color: var(--ink); }
.right-tabs .rt-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.right-tabs .rt-action { margin-left: auto; }

.right-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.props-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 18px;
}
.props-panel[hidden] { display: none; }

/* ---------- Triggers panel (Storyline-style, now a right-column tab) ---------- */

.trig-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
}
.trig-panel[hidden] { display: none; }
.trig-panel-body { flex: 1; overflow-y: auto; padding: 6px 8px 12px; }

/* ---------- Layers panel (right-column tab) ---------- */

.layers-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 14px; }
.layers-panel[hidden] { display: none; }
.lp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: white;
  margin-bottom: 7px;
  cursor: pointer;
}
.lp-item:hover { border-color: var(--border-strong); }
.lp-item.on { border-color: var(--accent); background: var(--accent-soft); }
.lp-item .lp-icon { flex-shrink: 0; color: var(--ink-muted); display: flex; }
.lp-item.on .lp-icon { color: var(--accent); }
.lp-name { flex: 1; font-size: 0.8125rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.lp-name input {
  width: 100%; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--ink);
  border: 1px solid var(--accent); border-radius: 5px; padding: 1px 5px;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.lp-name input:focus { outline: none; }
.lp-tools { display: flex; gap: 0; flex-shrink: 0; }
/* Actions appear on hover. A control that reports a setting has to be visible
   without hunting for it, so it opts out with .always. */
.lp-tools .icon-btn { width: 24px; height: 24px; display: none; }
.lp-item:hover .lp-tools .icon-btn, .lp-item.on .lp-tools .icon-btn { display: flex; }
.lp-tools .icon-btn.always { display: flex; }
.lp-tools .icon-btn.on { color: var(--accent); }

.tl-eye {
  flex-shrink: 0; width: 22px; height: 22px; padding: 0; margin-right: 3px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 5px; background: transparent;
  color: var(--border-strong); cursor: pointer;
}
.tl-row:hover .tl-eye { color: var(--ink-muted); }
.tl-eye:hover { background: var(--panel-2); }
.tl-eye.off, .tl-row:hover .tl-eye.off { color: var(--accent); }
.tl-eye.on, .tl-row:hover .tl-eye.on { color: var(--accent); }

/* Locked objects still draw, but clicks fall straight through them, so the one
   you meant to grab is the one you get. Editor only. */
.edit-locked { pointer-events: none; }

/* The base slide's objects, listed while you work on a layer. */
.tl-group {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font: inherit; font-size: 0.68rem; font-weight: 700; font-style: italic;
  color: var(--ink-muted); background: transparent; border: 0;
  border-top: 1px solid var(--border); padding: 7px 8px 6px 4px;
  margin-top: 4px; cursor: pointer; text-align: left;
}
.tl-group:hover { color: var(--ink); }
.tl-caret { display: inline-block; width: 10px; font-style: normal; }
.tl-baserow { opacity: 0.75; }
.tl-baserow:hover { opacity: 1; }
.tl-basename {
  font-size: 0.72rem; color: var(--ink-muted); padding: 3px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-add {
  width: 100%; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ink-muted);
  background: transparent; border: 1.5px dashed var(--border-strong); border-radius: 8px;
  padding: 8px; cursor: pointer; margin-top: 4px;
}
.lp-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lp-hint { font-size: 0.72rem; color: var(--ink-muted); line-height: 1.5; margin-top: 10px; }

.tp-group { margin-bottom: 4px; }
.tp-group-head {
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--ink);
  padding: 6px 6px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-group.sel .tp-group-head { color: var(--accent); }
.tp-row {
  border-radius: 6px;
  padding: 5px 8px 6px;
  cursor: pointer;
  position: relative;
}
.tp-row:hover { background: var(--panel-2); }
.tp-row.sel { background: var(--accent-soft); }
.tp-action { font-size: 0.75rem; font-weight: 500; color: oklch(0.45 0.14 264); line-height: 1.35; }
.tp-when { font-size: 0.6875rem; color: var(--ink-muted); line-height: 1.3; }
.tp-tools {
  position: absolute;
  right: 4px;
  top: 4px;
  display: none;
  gap: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.tp-row:hover .tp-tools { display: flex; }
.tp-tools .icon-btn { width: 22px; height: 22px; }
.tp-empty { font-size: 0.75rem; color: var(--ink-muted); padding: 8px 6px; line-height: 1.5; }

.props-title {
  font-size: 0.8125rem;
  font-weight: 600;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.props-section { margin-bottom: 16px; }
.props-section-label { font-size: 0.6875rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 8px; }

.field-row { display: flex; gap: 8px; margin-bottom: 8px; }
.field { flex: 1; min-width: 0; }
.field label { display: block; font-size: 0.6875rem; font-weight: 500; color: var(--ink-muted); margin-bottom: 3px; }
.field input[type="text"], .field input[type="number"], .field input[type="url"],
.field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
}
.field textarea { resize: vertical; min-height: 56px; line-height: 1.4; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.field input[type="color"] {
  width: 100%; height: 30px;
  border: 1px solid var(--border); border-radius: 6px; padding: 2px; background: white; cursor: pointer;
}
.field input[type="range"] { width: 100%; accent-color: var(--accent); }

.check-row { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; margin-bottom: 8px; cursor: pointer; }
.check-row input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

.btn-row { display: flex; gap: 4px; }
.mini-btn {
  flex: 1;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 0;
  cursor: pointer;
}
.mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.mini-btn.on { background: var(--accent); border-color: var(--accent); color: white; }
.small-btn {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 150ms ease-out;
}
.small-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.small-btn.danger:hover { background: oklch(0.95 0.03 25); border-color: var(--danger); color: var(--danger); }

.item-row { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
.item-row input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; cursor: pointer; margin-top: 8px; }
.item-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item-row input[type="text"], .item-row textarea {
  width: 100%; font: inherit; font-size: 0.8125rem;
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
}
.item-row textarea { resize: vertical; min-height: 40px; line-height: 1.35; }
.item-row .icon-btn { width: 24px; height: 24px; flex-shrink: 0; margin-top: 4px; }

/* Trigger list (accordion) */
.trig-list { margin-bottom: 8px; }
.trig-item { border: 1px solid var(--border); border-radius: 7px; margin-bottom: 6px; background: white; overflow: hidden; }
.trig-item.open { border-color: var(--accent); }
.trig-head { display: flex; align-items: center; gap: 8px; padding: 7px 9px; cursor: pointer; }
.trig-head:hover { background: var(--panel-2); }
.trig-item.open .trig-head { border-bottom: 1px solid var(--border); background: var(--accent-soft); }
.trig-num {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: white; font-size: 0.625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.trig-summary { flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--ink); line-height: 1.3; min-width: 0; }
.trig-caret { flex-shrink: 0; color: var(--ink-muted); transition: transform 150ms ease-out; }
.trig-item.open .trig-caret { transform: rotate(180deg); }
.trig-body { padding: 9px; }
.trig-head .icon-btn { width: 22px; height: 22px; flex-shrink: 0; }

.props-empty { font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.5; }
.props-empty kbd {
  font-family: inherit; font-size: 0.75rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}

/* ---------- Gallery popover ---------- */

.gallery-pop[hidden] { display: none; }
.gallery-pop {
  position: fixed;
  z-index: var(--z-pop);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 10px 40px oklch(0 0 0 / 0.2);
  padding: 12px;
  width: 400px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  max-height: 420px;
  overflow-y: auto;
}
.gallery-title { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 8px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.gallery-grid.big { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.gallery-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-align: center;
  transition: border-color 150ms ease-out;
}
.gallery-cell:hover { border-color: var(--accent); color: var(--accent); }
.gallery-cell .gc-vis { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.gallery-cell.char .gc-vis { width: 56px; height: 80px; }
.gallery-cell .gc-vis svg { width: 100%; height: 100%; }
.gallery-cell .gc-vis img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-title:not(:first-child) { margin-top: 12px; }

/* ---------- Home > Paragraph group ---------- */
.rb-para { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.rb-para-row { display: flex; align-items: center; gap: 3px; }
.rb-para-row .para-lists { gap: 3px; margin-right: 3px; }
.rb-para-row .para-lists .mini-btn.wide { width: 96px; flex: none; }
/* Icon-and-caret only, so the Paragraph group stays narrow in the ribbon. */
.mini-btn.tight {
  display: flex; align-items: center; justify-content: center; gap: 1px;
  flex: none; width: 30px; height: 24px; padding: 0;
  font-size: 0.72rem; line-height: 1;
}
.mini-btn.tight .bl-caret { font-size: 0.5rem; opacity: 0.7; }
.para-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  height: 24px; min-width: 26px; padding: 0 4px;
  color: var(--ink); background: transparent;
  border: 1px solid transparent; border-radius: 5px; cursor: pointer;
}
.para-btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--border); }
.para-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.para-btn:disabled { opacity: 0.35; cursor: default; }
.para-btn .pb-caret { font-size: 0.55rem; opacity: 0.7; }

/* ---------- Generic dropdown menu ---------- */
.drop-menu {
  position: fixed; z-index: 3000; min-width: 168px;
  background: white; border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.18); padding: 4px;
  /* Paired with the cap openMenu sets: only scrolls when it has to. */
  overflow-y: auto; overscroll-behavior: contain;
}
.dm-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font: inherit; font-size: 0.8rem; color: var(--ink); text-align: left;
  background: none; border: none; border-radius: 6px; padding: 7px 9px; cursor: pointer;
}
.dm-item:hover { background: var(--accent-soft); }
.dm-item .dm-tick { width: 12px; flex-shrink: 0; color: var(--accent); font-size: 0.75rem; }
.dm-item.checked .dm-label { font-weight: 600; }
.dm-item .dm-label { flex: 1; }
.dm-item .dm-sub { font-size: 0.7rem; color: var(--muted); }
.dm-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ---------- Home > Drawing group ---------- */
.rb-btn-caret { position: relative; }
.rb-btn-caret .pb-caret { position: absolute; right: 4px; bottom: 3px; font-size: 0.55rem; opacity: 0.7; }
.draw-btn {
  display: flex; align-items: center; gap: 4px; width: 104px;
  font: inherit; font-size: 0.66rem; color: var(--ink); text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: 1px 4px; cursor: pointer;
  white-space: nowrap;   /* wrapping to two lines made the group taller than the ribbon */
  line-height: 1.5;
}
.draw-btn > span:first-of-type { flex: 1; }
.draw-btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--border); }
.draw-btn:disabled { opacity: 0.35; cursor: default; }
.draw-btn svg { flex-shrink: 0; }
.draw-btn .pb-caret { font-size: 0.55rem; opacity: 0.7; }
.qs-chip {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 4px;
  font-size: 0.72rem; font-weight: 600;
}

/* On a narrow window, shed text so the ribbon still fits without a sideways scroll. */
@media (max-width: 1180px) {
  .draw-btn { width: auto; }
  .draw-btn > span:first-of-type { display: none; }
  .rb-mini label { display: none; }
}
@media (max-width: 1020px) {
  .rb-btn span { display: none; }
  .rb-btn { min-width: 34px; padding-left: 6px; padding-right: 6px; }
}

/* menu extras: headings, submenu arrows, swatch grids */
#menuLayer { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
#menuLayer .drop-menu { pointer-events: auto; position: fixed; }
.dm-heading {
  font-size: 0.68rem; font-weight: 700; color: var(--muted);
  padding: 6px 9px 3px; background: var(--panel-2); border-radius: 5px; margin: 2px 0;
}
.dm-item.disabled { opacity: 0.4; cursor: default; }
.dm-item .dm-arrow { font-size: 0.65rem; opacity: 0.65; }
.dm-prev { display: flex; align-items: center; justify-content: center; width: 26px; height: 22px; flex-shrink: 0; }
.fx-box {
  display: block; width: 15px; height: 15px; border-radius: 3px;
  background: var(--accent); border: 1px solid oklch(0 0 0 / 0.15);
}
.sw-wrap { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px 4px; }
.sw-row { display: flex; gap: 3px; }
.sw {
  width: 17px; height: 17px; border-radius: 3px; cursor: pointer;
  border: 1px solid oklch(0 0 0 / 0.18); padding: 0;
}
.sw:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.sw.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.sw-custom { width: 26px; height: 20px; border: 1px solid var(--border); border-radius: 4px; padding: 0; cursor: pointer; }
.colorwell {
  width: 34px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 4px;
}
.colorwell:hover { border-color: var(--accent); }
.colorwell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.modal.review { width: 620px; }
.rev-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.rev-slide {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-muted); padding: 12px 2px 4px;
}
.rev-item {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel); font: inherit; cursor: pointer;
}
.rev-item:hover:not(:disabled) { border-color: var(--accent); background: var(--panel-2); }
.rev-item:disabled { opacity: 0.55; cursor: default; }
.rev-who { font-size: 0.76rem; font-weight: 600; color: var(--accent); }
.rev-when { font-size: 0.7rem; color: var(--ink-muted); }
.rev-text { grid-column: 1 / -1; font-size: 0.82rem; white-space: pre-wrap; word-break: break-word; }
.rev-warn {
  font-size: 0.78rem; color: var(--danger); border: 1px solid var(--danger);
  border-radius: 7px; padding: 7px 9px; margin-bottom: 9px;
}
.pub-back {
  display: block; width: 100%; margin: -4px 0 12px; padding: 8px;
  border: 1px dashed var(--border-strong); border-radius: 7px; background: none;
  color: var(--accent); font: inherit; font-size: 0.8rem; cursor: pointer;
}
.pub-back:hover { border-color: var(--accent); background: var(--panel-2); }
.ai-panel { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 8px; max-width: 290px; }
.ai-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.ai-row > span { white-space: nowrap; }
.ai-key {
  flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; font-size: 0.78rem; background: var(--panel); color: var(--ink);
}
.ai-key:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ai-switch { cursor: pointer; }
.ai-switch input { width: 15px; height: 15px; cursor: pointer; }
.ai-note { font-size: 0.7rem; line-height: 1.45; color: var(--ink-muted); }
.sw-hexrow { gap: 6px; }
.sw-fmt {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 2px 2px 4px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--ink-muted); cursor: pointer;
}
.sw-fmt:hover { color: var(--ink); border-color: var(--accent); }
.cp { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 7px; }
.cp-sv {
  /* Square, and as wide as the swatch grid above it, so the picking area is
     about twice the height it was. Written as a ratio rather than a pair of
     pixel values so it stays square if the menu is ever a different width. */
  position: relative; aspect-ratio: 1 / 1; border-radius: 5px; cursor: crosshair;
  touch-action: none; border: 1px solid var(--border);
}
.cp-bar { display: flex; align-items: center; gap: 7px; }
.cp-hue {
  position: relative; flex: 1; height: 11px; border-radius: 6px; cursor: pointer;
  touch-action: none; border: 1px solid var(--border);
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.cp-sv-thumb, .cp-hue-thumb {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.4);
  transform: translate(-50%, -50%); pointer-events: none;
}
.cp-hue-thumb { top: 50%; }
.cp-drop {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--panel); color: var(--ink); cursor: pointer;
}
.cp-drop:hover { border-color: var(--accent); color: var(--accent); }
.sw-hex {
  width: 118px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--ink);
}
.sw-hex:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.sw-hex.bad { border-color: var(--danger); }
.sw-hexname { font-size: 11px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Find and replace ---------- */
.modal.find { width: 560px; }
.find-list { max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.find-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  font: inherit; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; cursor: pointer;
}
.find-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.find-item .fi-where { font-size: 0.68rem; font-weight: 600; color: var(--muted); }
.find-item .fi-text { font-size: 0.8rem; color: var(--ink); }

/* ---------- Bullets and numbering gallery ---------- */
.gallery-grid.wide { grid-template-columns: repeat(3, 1fr); gap: 8px; width: 330px; }
.gallery-cell.wide { padding: 9px 8px; align-items: stretch; }
.gallery-cell.wide .gc-vis { width: 100%; height: 52px; }
.gallery-cell.wide > span { font-size: 0.62rem; margin-top: 3px; }
.bl-prev { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 100%; }
.bl-row { display: flex; align-items: center; gap: 6px; }
.bl-m {
  font-size: 0.72rem; line-height: 1; color: var(--ink);
  min-width: 15px; text-align: right; flex-shrink: 0;
}
.bl-l { flex: 1; height: 1.5px; background: var(--border-strong, #b9bed0); border-radius: 1px; }
.bl-none { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 0.8rem; color: var(--ink-muted); }
.mini-btn.wide {
  display: flex; align-items: center; justify-content: flex-start; gap: 5px;
  padding: 5px 7px; font-size: 0.7rem; overflow: hidden;
}
.mini-btn.wide .bl-btn-mark { font-size: 0.78rem; line-height: 1; }
.mini-btn.wide .bl-btn-txt { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-btn.wide .bl-caret { font-size: 0.6rem; opacity: 0.7; }

/* ---------- Modal ---------- */

.modal-scrim[hidden] { display: none; }
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: oklch(0.2 0.01 260 / 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.3);
  width: 440px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 18px 20px;
}
.modal h3 { font-size: 0.9375rem; margin-bottom: 12px; }
.modal.wiz { width: 460px; }
.modal.stock { width: 660px; max-height: 82vh; }
.stock-searchrow { display: flex; gap: 8px; margin-bottom: 4px; }
.stock-searchrow input {
  flex: 1; font: inherit; font-size: 0.875rem; color: var(--ink);
  border: 1px solid var(--border); border-radius: 7px; padding: 8px 11px; background: white;
}
.stock-searchrow input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.stock-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}
.stock-cell {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.stock-cell:hover { transform: scale(1.03); box-shadow: 0 4px 14px oklch(0 0 0 / 0.2); border-color: var(--accent); }
.stock-cell.video { position: relative; }
.stock-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; color: white; text-shadow: 0 1px 3px oklch(0 0 0 / 0.6);
  pointer-events: none;
}
.stock-play::before {
  content: ''; position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: oklch(0 0 0 / 0.45); z-index: -1;
}
.stock-dur {
  position: absolute; right: 4px; bottom: 4px; font-size: 0.65rem; color: white;
  background: oklch(0 0 0 / 0.6); border-radius: 4px; padding: 1px 5px; pointer-events: none;
}
.stock-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.stock-tabs button {
  font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: white; color: var(--muted);
  border-radius: 7px; padding: 6px 16px; transition: background 120ms, color 120ms, border-color 120ms;
}
.stock-tabs button:hover { border-color: var(--accent); color: var(--ink); }
.stock-tabs button.on { background: var(--accent); border-color: var(--accent); color: white; }
/* The publish dialog holds still while its options scroll.

   .modal scrolls as a whole at 70vh, which is right for a short dialog and
   wrong for this one: five formats plus a tracking note come to more than
   that, so the Publish button left the bottom of the window along with
   everything else. Somebody opening it saw four and a half options and no way
   to confirm, and reasonably concluded the thing they wanted was not there.
   Head and foot are pinned now; only the list moves. */
.modal.publish {
  width: 540px;
  display: flex;
  flex-direction: column;
  max-height: 84vh;
  overflow: hidden;
}
.modal.publish > h3,
.modal.publish > .props-empty,
.modal.publish > .modal-foot { flex: none; }
.modal.publish .pub-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Room for the focus ring on the last option, which a scroll container
     would otherwise clip. */
  padding: 2px;
  margin: -2px;
}
.modal.publish .modal-foot { padding-top: 14px; }
.pub-list { display: flex; flex-direction: column; gap: 8px; }
.pub-opt {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px;
  transition: border-color 120ms, background 120ms;
}
.pub-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.pub-opt input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }
.pub-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pub-opt.disabled { opacity: 0.55; cursor: default; }
.pub-opt.disabled:hover { border-color: var(--border); background: none; }
.pub-optlabel { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.pub-optdesc { font-size: 0.75rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.modal.quizgal { width: 560px; }
.qg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qg-cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 16px 10px; border: 1.5px solid var(--border); border-radius: 10px; background: white;
  cursor: pointer; color: var(--ink); transition: border-color 120ms, background 120ms, transform 120ms;
}
.qg-cell:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.qg-ico { width: 34px; height: 34px; color: var(--accent); }
.qg-ico svg { width: 100%; height: 100%; }
.qg-name { font-size: 0.75rem; font-weight: 600; line-height: 1.25; }
.item-row .grow.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.item-row .grow.quad input { width: 100%; }
.preview-menu {
  position: fixed; z-index: 3000; min-width: 210px;
  background: white; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.18); padding: 5px;
}
.preview-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--ink); text-align: left;
  background: none; border: none; border-radius: 7px; padding: 9px 11px; cursor: pointer;
}
.preview-menu-item:hover { background: var(--accent-soft); }
.preview-menu-item.disabled { opacity: 0.4; cursor: default; }
.preview-menu-item.disabled:hover { background: none; }
.preview-menu-item .pm-sub { font-size: 0.7rem; font-weight: 500; color: var(--muted); }
.slide-item.multi { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 8px; }
.wiz-grab { cursor: move; user-select: none; }
.wiz-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wiz-label { width: 84px; flex-shrink: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.wiz-field { flex: 1; min-width: 0; }
.wiz-field select, .wiz-field input {
  width: 100%; font: inherit; font-size: 0.8125rem; color: var(--ink);
  background: white; border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px;
}
.wiz-field select:focus, .wiz-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.wiz-static { font-size: 0.8125rem; color: var(--ink-muted); padding: 6px 0; }
.wiz-conds { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
/* Object rows carry four dropdowns; wrapping beats clipping in a 460px dialog. */
.wiz-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 0.75rem; color: var(--ink-muted); }
.wiz-cond select, .wiz-cond input {
  font: inherit; font-size: 0.75rem; border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; min-width: 0;
}
.wiz-cond select { flex: 1; }
.wiz-cond input { width: 64px; }
.wiz-cond .icon-btn { width: 22px; height: 22px; flex-shrink: 0; }
.modal .var-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.modal .var-row input {
  font: inherit; font-size: 0.8125rem;
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px;
}
.modal .var-row input.vname { width: 150px; }
.modal .var-row input.vval { flex: 1; min-width: 0; }
.modal-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }

/* ---------- Preview overlay ---------- */

.preview-overlay[hidden] { display: none; }
.preview-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-preview);
  background: oklch(0.17 0.012 260);
  display: flex;
  flex-direction: column;
}
.preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: oklch(0.9 0.005 260);
  font-size: 0.8125rem;
  font-weight: 600;
  flex-shrink: 0;
}
.ghost-btn.on-dark { color: oklch(0.9 0.005 260); border-color: oklch(0.35 0.01 260); background: transparent; }
.ghost-btn.on-dark:hover { background: oklch(0.25 0.012 260); border-color: oklch(0.45 0.01 260); }
.preview-stage { flex: 1; min-height: 0; position: relative; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 8px);
  z-index: var(--z-toast);
  background: oklch(0.25 0.015 260);
  color: oklch(0.95 0.003 260);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 9px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  max-width: 70vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ---------- Build by chat (slash commands, in the right column) ---------- */
/* Sits to the left of GuideKit's help launcher (which is fixed at right:18px). */
.chat-fab {
  position: fixed; right: 76px; bottom: 18px; z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  color: white; background: var(--accent);
  border: none; border-radius: 50%;
  box-shadow: 0 4px 14px oklch(0 0 0 / 0.24); cursor: pointer;
}
.chat-fab:hover { filter: brightness(0.94); }
.chat-fab:active { transform: translateY(1px); }

.chat-panel { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-log {
  flex: 1; overflow-y: auto; padding: 10px;
  display: flex; flex-direction: column; gap: 7px; min-height: 0;
}
.chat-msg {
  font-size: 0.78rem; line-height: 1.45; padding: 7px 10px; border-radius: 9px;
  max-width: 92%; white-space: pre-wrap; word-break: break-word;
}
.chat-msg.me { align-self: flex-end; background: var(--accent); color: white; font-weight: 500; }
.chat-msg.bot { align-self: flex-start; background: var(--panel-2); color: var(--ink); border: 1px solid var(--border); }
.chat-msg.help { max-width: 100%; }

/* Colour palette shown inside the chat by /bgcolor. Full width of the column,
   because swatches you cannot see are worse than no swatches. */
.chat-msg.palette { max-width: 100%; padding: 8px; }
.pal-head { font-weight: 600; margin-bottom: 6px; }
.pal-label {
  margin: 8px 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3, #8a90a6);
}
/* What the slide looks like right now, so the pickers have a reference. */
.pal-preview {
  height: 40px; border-radius: 5px; border: 1px solid var(--border); margin-bottom: 8px;
}
.pal-pickers { display: flex; gap: 8px; }
.pal-pick { flex: 1; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.pal-pick > span { font-size: 10.5px; color: var(--ink-3, #8a90a6); }
/* A big target: this is the thing that opens the real colour picker. */
.pal-pick input[type="color"] {
  width: 100%; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 5px; background: none;
}
.pal-hint { margin-top: 6px; font-size: 10.5px; color: var(--ink-3, #8a90a6); }
.pal-all {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  margin-top: 8px; font-size: 11.5px; color: var(--ink);
}
.pal-all input { margin: 0; cursor: pointer; }

/* /font: the ribbon's four controls in a 2x2 that fits the narrow chat column. */
.chat-msg.fontpanel { max-width: 100%; padding: 8px; }
.font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.font-grid .pal-pick > input,
.font-grid .pal-pick > select {
  width: 100%; height: 28px; font: inherit; font-size: 0.75rem; color: var(--ink);
  background: white; border: 1px solid var(--border); border-radius: 5px; padding: 0 4px;
}
.font-grid .pal-pick > input[type="color"] { padding: 0; cursor: pointer; background: none; }

/* ---------- Design system setup ----------
   A few settings at a time on the left, the slide they affect above them, so a
   size can be judged by eye instead of read as a number. */

/* A fixed height, not a maximum. With twelve steps of differing length the panel
   would otherwise resize under the pointer on every Next, which makes the thing
   you are comparing move. The controls scroll inside instead. */
.modal.ds {
  width: min(1140px, 95vw);
  height: min(800px, 92vh);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ds-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ds-head h3 { margin: 0; font-size: 0.9375rem; }
.ds-sub { font-size: 0.75rem; color: var(--ink-muted); }
.ds-x {
  margin-left: auto; width: 26px; height: 26px; flex-shrink: 0;
  font: inherit; font-size: 1.05rem; line-height: 1; color: var(--ink-muted);
  background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.ds-x:hover { background: var(--panel-2); border-color: var(--border); color: var(--ink); }

.ds-body { display: flex; min-height: 0; flex: 1; }

.ds-rail {
  width: 178px; flex-shrink: 0;
  padding: 12px 10px;
  border-right: 1px solid var(--border);
  background: var(--panel-2);
  overflow-y: auto;
}
.ds-step {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; margin-bottom: 2px;
  font: inherit; font-size: 0.8125rem; font-weight: 500; text-align: left; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer;
}
.ds-step:hover { background: var(--panel); border-color: var(--border); }
.ds-step.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-hover); font-weight: 600; }
.ds-step-n {
  display: grid; place-items: center; width: 19px; height: 19px; flex-shrink: 0;
  font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-muted); background: var(--panel); border: 1px solid var(--border); border-radius: 50%;
}
.ds-step.on .ds-step-n { color: white; background: var(--accent); border-color: var(--accent); }
.ds-rail-label {
  margin: 16px 0 7px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-muted);
}

/* Controls beside the slide rather than under it. Stacked, the two fought over
   the height of the window and both lost: the slide squeezed the controls into a
   scrolling strip, which is the opposite of being able to see a choice and its
   effect at the same time. */
.ds-main { flex: 1; min-width: 0; display: flex; }

.ds-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 18px;
  background: var(--canvas-surround);
  border-left: 1px solid var(--border);
}
/* The slide is built at its real size and scaled down. A transform does not
   change layout, so the box around it is given the scaled height in script,
   otherwise the controls below would sit under a full size slide. */
/* Capped, not stretched to the panel: a slide big enough to judge type on still
   has to leave the controls under it enough room to stand without scrolling. */
.ds-stage-box { position: relative; width: 100%; margin: 0 auto; }
.ds-stage-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  border-radius: 4px;
  box-shadow: 0 2px 12px oklch(0 0 0 / 0.16);
  overflow: hidden;
}

/* Names the three button looks underneath the buttons themselves, so the
   comparison reads on its own without a legend somewhere else. Drawn inside the
   slide, so it scales down with everything else on it. */
.ds-cap {
  position: absolute;
  text-align: center;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 500;
  opacity: 0.7;
}

.ds-controls {
  width: 400px;
  flex-shrink: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 18px;
}
.ds-c-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 3px; }
.ds-c-hint {
  font-size: 0.75rem; line-height: 1.45; color: var(--ink-muted);
  max-width: 68ch; margin-bottom: 12px;
}

.ds-fields { display: grid; grid-template-columns: 1fr; gap: 13px; }
.ds-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ds-f-label { font-size: 0.75rem; font-weight: 500; color: var(--ink); }
.ds-f-note { font-size: 0.6875rem; line-height: 1.4; color: var(--ink-muted); }

.ds-select {
  width: 100%; height: 30px; font: inherit; font-size: 0.8125rem; color: var(--ink);
  background: white; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px;
}
.ds-select:focus-visible,
.ds-size input:focus-visible,
.ds-colour input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ds-colour { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-colour input[type="color"] {
  width: 46px; height: 30px; flex-shrink: 0; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 6px;
}
.ds-hex {
  font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-muted);
  text-transform: uppercase;
}
.ds-follows { font-size: 0.6875rem; color: var(--ink-muted); }
.ds-clear {
  font: inherit; font-size: 0.6875rem; color: var(--ink-muted); cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
}
.ds-clear:hover { color: var(--ink); border-color: var(--border-strong); }

.ds-size { display: flex; align-items: center; gap: 9px; }
.ds-size input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.ds-num {
  width: 56px; height: 30px; flex-shrink: 0; font: inherit; font-size: 0.8125rem;
  font-variant-numeric: tabular-nums; color: var(--ink);
  background: white; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px;
}
.ds-unit { font-size: 0.75rem; color: var(--ink-muted); }

.ds-contrast { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.ds-con-row { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--ink-muted); }
.ds-con-dot {
  width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%;
  background: oklch(0.62 0.15 150);
}
.ds-con-row.warn .ds-con-dot { background: oklch(0.72 0.15 75); }
.ds-con-row.bad .ds-con-dot { background: var(--danger); }
.ds-con-row.bad { color: var(--danger); }

.ds-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-top: 1px solid var(--border);
  background: var(--panel-2); flex-shrink: 0;
}
.ds-spacer { flex: 1; }
.ds-foot .ghost-btn[disabled] { opacity: 0.45; cursor: default; }
.ds-foot .ghost-btn[disabled]:hover { background: transparent; border-color: var(--border); }

.ds-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.ds-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 3px 7px 3px 4px; font-size: 11px; color: var(--ink);
  background: white; border: 1px solid var(--border); border-radius: 20px;
}
.ds-chip:hover { border-color: var(--accent); }
.ds-chip > span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid oklch(0 0 0 / .15); }
.ds-chip > em { font-style: normal; }

@media (max-width: 1080px) {
  .ds-stage { padding: 12px; }
  .ds-rail { width: 150px; }
}

/* /fontcolor: a single swatch, since there is only one colour to choose. */
.chat-msg.fontcolour { max-width: 100%; padding: 8px; }
.chat-msg.fontcolour .pal-pick > input[type="color"] {
  width: 100%; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 5px; background: none;
}
.pal-status { margin-top: 6px; font-size: 11px; color: var(--ink-3, #8a90a6); }
/* Shows how a plainly-worded line was read, so a wrong guess (or a mis-heard
   dictation) is obvious before the user wonders why the slide looks odd. */
.chat-msg.echo {
  align-self: flex-start;
  background: transparent;
  color: var(--ink-3, #8a90a6);
  border: 1px dashed var(--border);
  font-size: 11px;
  font-style: italic;
  padding: 3px 8px;
}
.chat-cmds { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.chat-cmd, .chat-sug {
  display: flex; align-items: baseline; gap: 7px; width: 100%; text-align: left;
  font: inherit; background: none; border: none; border-radius: 6px;
  padding: 4px 6px; cursor: pointer;
}
.chat-cmd:hover, .chat-sug:hover { background: var(--accent-soft); }
.chat-cmd code, .chat-sug code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.72rem; color: var(--accent); font-weight: 600; white-space: nowrap;
}
.chat-cmd span, .chat-sug span { font-size: 0.7rem; color: var(--muted); }
.chat-suggest {
  flex-shrink: 0; border-top: 1px solid var(--border); background: var(--panel-2);
  padding: 4px; max-height: 148px; overflow-y: auto;
}
.chat-suggest[hidden] { display: none; }
.chat-input { flex-shrink: 0; display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.chat-input input {
  flex: 1; min-width: 0; font: inherit; font-size: 0.8125rem; color: var(--ink);
  background: white; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
}
.chat-input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Speak instead of typing. Turns red and pulses while it is listening so there is
   never any doubt that the microphone is live. */
.mic-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; padding: 0; cursor: pointer; color: var(--ink-2, #5b6178);
  background: white; border: 1px solid var(--border); border-radius: 8px;
  transition: background .12s, color .12s, border-color .12s;
}
.mic-btn:hover { background: var(--panel-2); color: var(--ink); }
.mic-btn:disabled { opacity: .45; cursor: not-allowed; }
.mic-btn.listening {
  color: white; background: #d6455b; border-color: #d6455b;
  animation: micPulse 1.3s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 91, .55); }
  50%      { box-shadow: 0 0 0 5px rgba(214, 69, 91, 0); }
}
/* Recording has stopped and the local model is transcribing. Amber, and still,
   so it reads as working rather than still listening. */
.mic-btn.thinking, .mic-btn.thinking:disabled {
  opacity: 1; color: #8a5a00; background: #fdf1d6; border-color: #e8c987;
}

/* Live level while recording. The bar tracks your voice so the wait never looks
   like nothing is happening, and the hint says you do not need to click again. */
.mic-level { flex-shrink: 0; padding: 6px 8px 0; }
.mic-level-fill {
  display: block; height: 4px; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, #d6455b, #ef7a52);
  transition: width .07s linear;
}
.mic-level-hint {
  display: block; margin-top: 4px; font-size: 10.5px; font-style: normal;
  color: var(--ink-3, #8a90a6);
}
/* Transcribing: the bar stops tracking a voice and sweeps instead. */
.mic-level.working .mic-level-fill {
  width: 40%; animation: micSweep 1.05s ease-in-out infinite;
  background: linear-gradient(90deg, #e8c987, #f0b429);
}
@keyframes micSweep {
  0%   { margin-left: 0;   width: 25%; }
  50%  { margin-left: 60%; width: 40%; }
  100% { margin-left: 0;   width: 25%; }
}
/* Words still being recognised, shown greyed until the phrase settles. */
.chat-input input.interim { color: var(--ink-3, #8a90a6); font-style: italic; }
.right-col.collapsed .chat-panel { display: none; }

/* Chat tab owns the column: its own title row, and the floating buttons get out of the way. */
.right-tabs .rt-title { flex: 1; font-size: 0.8125rem; font-weight: 700; color: var(--ink); padding: 0 2px; }
body.chat-open .chat-fab { display: none; }              /* redundant while chat is open */
body.chat-open .csg-launcher.csg-right { right: 294px; } /* clear of the 276px right column */

/* The column is narrow, so the command list reads better stacked than side by side. */
.chat-cmd { flex-direction: column; align-items: flex-start; gap: 1px; }
.chat-cmd span { line-height: 1.35; }
.chat-sug { align-items: center; }
.chat-sug span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }