/* ============================================================
   AIpraatplaat — docententoolbar
   Onderin, verplaatsbaar, vergrendelbaar, inklapbaar.
   Stijl volgt het ontwerpsysteem: papier, inkt, zachte schaduw,
   pill-vormen, coral als enige accent.
   ============================================================ */

/* ---- teken-canvas + annotatielaag op de plaat ---- */
.draw-canvas {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%;
  pointer-events: none; touch-action: none;
}
.draw-canvas.armed { pointer-events: auto; }
.plaat.tool-pen      .draw-canvas.armed { cursor: crosshair; }
.plaat.tool-mark     .draw-canvas.armed { cursor: crosshair; }
.plaat.tool-eraser   .draw-canvas.armed { cursor: none; }
.plaat.tool-laser    .draw-canvas.armed { cursor: crosshair; }
.plaat.tool-note     .draw-canvas.armed { cursor: copy; }
.plaat.tool-place    .draw-canvas.armed { cursor: copy; }

.anno-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.anno-layer > * { pointer-events: auto; }

/* vluchtig laser-canvas (rode streep) */
.laser-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* gum-cursor: transparante cirkel ter grootte van de gum */
.eraser-cursor {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid rgba(43,39,34,0.65); background: rgba(255,255,255,0.16);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset; z-index: 9;
}

/* ============ STICKY NOTES ============ */
.sticky {
  position: absolute; z-index: 7;
  width: 184px; height: 158px; min-width: 96px; min-height: 84px;
  display: flex; flex-direction: column;
  background: var(--note, #f4e4a3);
  border-radius: 4px 4px 6px 6px;
  box-shadow: 0 10px 22px rgba(33,30,26,0.20), 0 2px 5px rgba(33,30,26,0.12);
  transform: rotate(-0.6deg);
  transition: box-shadow var(--dur-fast,140ms) var(--ease-soft);
}
/* tijdens typen recht zetten zodat de knipperende cursor zichtbaar is (Chrome-bug
   met caret in een geroteerd contentEditable); JS zet inline transform !important */
.sticky.sn-editing { transform: rotate(0deg); }
.sticky.dragging, .sticky.resizing { transition: none; box-shadow: 0 18px 34px rgba(33,30,26,0.26); }
.sticky.active { z-index: 9; }
.sticky::before { /* gevouwen hoek-accent boven */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background: rgba(0,0,0,0.05); border-radius: 4px 4px 0 0;
}
.sticky textarea, .sticky .sn-ed {
  flex: 1 1 auto; width: 100%; resize: none; border: none; background: transparent;
  padding: 30px 16px 30px 16px; margin: 0;
  font-family: var(--font-hand, "Caveat", cursive); font-size: 23px; line-height: 1.18;
  color: #2b2722; outline: none; overflow: auto;
}
.sticky .sn-ed { white-space: pre-wrap; word-break: break-word; caret-color: var(--accent-coral-hex, #d97757); }
.sticky .sn-ed:empty:before { content: attr(data-placeholder); color: rgba(43,39,34,0.34); pointer-events: none; }
.sticky textarea::placeholder { color: rgba(43,39,34,0.34); }
/* koptitel bovenaan de memo */
.sn-title {
  flex: 0 0 auto; width: 100%; box-sizing: border-box;
  border: none; background: transparent; outline: none;
  padding: 9px 82px 3px 32px; margin: 0;
  font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 500;
  font-size: 16px; line-height: 1.2; color: #2b2722;
}
.sn-title::placeholder { color: rgba(43,39,34,0.38); font-style: italic; }
.sticky textarea.sn-has-title, .sticky textarea, .sticky .sn-ed { padding-top: 2px; }
.sn-push.on { background: rgba(217,119,87,0.18); color: #b4502f; }
.sn-push.on:hover { background: rgba(217,119,87,0.26); color: #b4502f; }
.sticky.pushed { box-shadow: 0 0 0 2px var(--accent-coral-hex, #d97757), 0 12px 26px rgba(33,30,26,0.2); }
.sn-btn {
  width: 24px; height: 24px; display: grid; place-items: center; border: none;
  background: transparent; color: rgba(43,39,34,0.55); cursor: pointer; border-radius: 6px;
}
.sn-btn:hover { background: rgba(0,0,0,0.09); color: #2b2722; }
.sn-btn svg { width: 15px; height: 15px; }
/* hoek-knoppen */
.sn-grip { position: absolute; top: 4px; left: 4px; cursor: grab; touch-action: none; z-index: 2; }
.sn-grip:active { cursor: grabbing; }
/* pinpoint: wijst exact naar het ankerpunt (linkerbovenhoek) tijdens het slepen */
.sn-pin {
  position: absolute; top: 0; left: 0; width: 23px; height: 31px;
  transform-origin: bottom center; transform: translate(-50%, -100%) scale(0.55);
  opacity: 0; pointer-events: none; z-index: 12;
  filter: drop-shadow(0 5px 9px rgba(33,30,26,0.30));
  transition: opacity var(--dur-fast,140ms) var(--ease-soft), transform var(--dur-base,240ms) var(--ease-soft);
}
.sn-pin svg { width: 100%; height: 100%; display: block; }
.sn-pin::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 5px; height: 5px; transform: translate(-50%, 50%); border-radius: 50%;
  background: var(--accent-coral-hex, #d97757); box-shadow: 0 0 0 2px rgba(252,249,243,0.95);
}
.sticky.dragging .sn-pin { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.sn-corner-tr { position: absolute; top: 4px; right: 4px; display: flex; gap: 1px; z-index: 2; }
.sn-key { position: absolute; left: 4px; bottom: 4px; z-index: 2; }
.sn-del:hover { background: rgba(180,80,47,0.16); color: #b4502f; }
/* opmaakbalk onderaan-midden: tekengrootte + vet */
.sn-format { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; opacity: 0.5; transition: opacity var(--dur-fast,140ms) var(--ease-soft); }
.sticky.active .sn-format, .sn-format:hover { opacity: 1; }
.sn-fbtn { min-width: 24px; height: 22px; padding: 0 6px; border: none; background: transparent; color: rgba(43,39,34,0.62); cursor: pointer; border-radius: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1; display: grid; place-items: center; }
.sn-fbtn:hover { background: rgba(0,0,0,0.09); color: #2b2722; }
.sn-bold { font-weight: 800; }
.sn-fbtn.on { background: rgba(43,39,34,0.16); color: #2b2722; }
.sn-resize {
  position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px;
  cursor: nwse-resize; touch-action: none; color: rgba(43,39,34,0.45);
  display: grid; place-items: end; padding: 3px; z-index: 2;
}
.sn-resize svg { width: 12px; height: 12px; }

/* verwijder-bevestiging */
.sn-confirm {
  position: absolute; inset: 0; z-index: 5; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(252,249,243,0.96); border-radius: inherit; color: var(--ink,#2b2722);
}
.sticky.confirming .sn-confirm { display: flex; }
.sn-confirm p { margin: 0; font-family: var(--font-serif); font-size: 19px; color: var(--ink,#2b2722); }
.sn-cf-btns { display: flex; gap: 8px; }
.sn-cf-btns button { border: none; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 600; padding: 7px 18px; border-radius: 999px; }
.sn-cf-btns .cf-yes { background: #c0573a; color: #fff; }
.sn-cf-btns .cf-no { background: rgba(43,39,34,0.10); color: var(--ink,#2b2722); }

/* geminimaliseerde memo = mini-stickynote (toolbar-icoon) */
.sn-mini { display: none; }
.sticky.min {
  width: 40px !important; height: 40px !important; min-width: 0; min-height: 0;
  border-radius: 7px; transform: rotate(-3deg); cursor: pointer;
  align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 6px 14px rgba(33,30,26,0.22), 0 1px 3px rgba(33,30,26,0.14);
}
.sticky.min:hover { transform: rotate(-3deg) translateY(-2px); }
.sticky.min > *:not(.sn-mini) { display: none; }
.sticky.min::before { display: none; }
.sticky.min .sn-mini { display: grid; place-items: center; }
.sticky.min .sn-mini svg { width: 22px; height: 22px; }

/* ============ TOOLBAR ============ */
.tb {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%) scale(0.75);
  transform-origin: center bottom;
  z-index: 40; display: flex; align-items: stretch; gap: 2px;
  padding: 7px 9px; border-radius: var(--r-pill, 999px);
  background: rgba(252,249,243,0.96);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(43,39,34,0.11);
  box-shadow:
    0 1px 2px rgba(33,30,26,0.06),
    0 8px 18px rgba(33,30,26,0.09),
    0 24px 56px rgba(33,30,26,0.13);
  user-select: none; touch-action: none;
  transition: opacity var(--dur-base,240ms) var(--ease-soft), transform var(--dur-base,240ms) var(--ease-soft);
}
.tb.is-dragging { transition: none; cursor: grabbing; }
/* na verslepen of inklappen: gepind op (left,top) — schaal blijft 65%, links-boven verankerd */
.tb.is-placed { transform: scale(0.75); transform-origin: top left; }

/* sleepgreep links */
.tb-grip {
  flex: 0 0 auto; width: 20px; display: grid; place-items: center; cursor: grab;
  color: var(--ink-muted, #8a8377); border-radius: 10px; touch-action: none;
  transition: background var(--dur-fast,140ms) var(--ease-soft), color var(--dur-fast,140ms) var(--ease-soft);
}
.tb-grip:hover { background: rgba(43,39,34,0.05); color: var(--ink-soft); }
.tb-grip:active { cursor: grabbing; }
.tb-grip .dots { display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; }
.tb-grip .dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.tb-sep { flex: 0 0 auto; width: 1px; align-self: stretch; margin: 8px 6px; background: rgba(43,39,34,0.10); }

/* knoppen */
.tb-btn {
  position: relative; flex: 0 0 auto;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--ink-soft, #5c574e);
  border-radius: var(--r-md, 13px); cursor: pointer;
  transition: background var(--dur-fast,140ms) var(--ease-soft), color var(--dur-fast,140ms) var(--ease-soft), transform var(--dur-fast,140ms) var(--ease-soft), opacity var(--dur-fast,140ms) var(--ease-soft);
}
.tb-btn:hover { background: rgba(43,39,34,0.06); color: var(--ink, #2b2722); }
.tb-btn:active { transform: translateY(1px); }
.tb-btn svg { width: 23px; height: 23px; pointer-events: none; }
.tb-btn.active {
  background: var(--ink, #2b2722); color: var(--paper, #faf6ef);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.14), 0 3px 10px rgba(33,30,26,0.26);
}
.tb-btn.active:hover { background: var(--ink, #2b2722); }
/* kleurstip onder de actieve stift/gum */
.tb-btn .swatch {
  position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px;
  border-radius: 50%; border: 1.5px solid var(--paper, #faf6ef);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
}
/* caret die aangeeft dat er opties zijn */
.tb-btn .caret { position: absolute; right: 4px; top: 4px; width: 5px; height: 5px; }
.tb-btn .caret::after { content: ""; position: absolute; inset: 0; border-right: 4px solid currentColor; border-bottom: 4px solid currentColor; opacity: 0.35; border-radius: 0 0 2px 0; }

/* live-only knoppen: nooit vergrendeld — de docent kan ze ook buiten de
   live-modus gebruiken om tools alvast klaar te zetten. */
.tb-btn.live-only { opacity: 1; }
.tb-btn.start-live { color: var(--accent-coral-hex, #d97757); }
.tb-btn.start-live.active { background: var(--accent-coral-hex, #d97757); color: #fff; }
.tb.live-on .tb-btn.start-live { color: var(--paper, #faf6ef); }

/* live-knop gloeit rustig zodra er al tools klaarstaan maar live nog uit is */
.tb-btn.start-live.ready-glow {
  animation: liveReadyGlow 2.8s var(--ease-soft, ease-in-out) infinite;
}
@keyframes liveReadyGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,87,0); background: transparent; }
  50% { box-shadow: 0 0 0 6px rgba(217,119,87,0.14); background: rgba(217,119,87,0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-btn.start-live.ready-glow { animation: none; background: rgba(217,119,87,0.16); }
}

/* uitgeschakelde knop (bv. Ongedaan maken zonder streken) */
.tb-btn:disabled { opacity: 0.32; cursor: default; pointer-events: none; }

/* brilpil: verschijnt (paars) zodra er brillen actief zijn — iets langer, met label */
.tb-btn.tb-glass {
  width: auto; padding: 0 13px; gap: 7px;
  display: inline-flex; align-items: center; justify-content: center;  color: #6b4f97; background: rgba(122,95,158,0.16);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
}
.tb-btn.tb-glass .tb-glasslabel { white-space: nowrap; }
.tb.live-on .tb-btn.tb-glass.glasses-on { color: #6b4f97; background: rgba(122,95,158,0.16); }
.tb.live-on .tb-btn.tb-glass.glasses-on:hover { background: rgba(122,95,158,0.24); }

/* push-indicator: verschijnt zodra er een push actief is — iets langer, met label en kleur */
.tb-btn.tb-pushlive {
  width: auto; padding: 0 13px; gap: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-coral-hex, #d97757); background: rgba(217,119,87,0.16);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
}
.tb-btn.tb-pushlive:hover { background: rgba(217,119,87,0.26); }
.tb-btn.tb-pushlive .tb-pushlabel { white-space: nowrap; }

/* deelnemers-knop: teller-badge + uitklapmenu (Kijkrechten · Deelnemers) */
.tb-btn.tb-people {
  width: auto; padding: 0 11px; gap: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
}
.tb-btn.tb-people .tb-pplcount {
  min-width: 20px; text-align: center;
  background: rgba(43,39,34,0.08); border-radius: 999px; padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.tb-btn.tb-people:hover .tb-pplcount { background: rgba(43,39,34,0.14); }

/* collapse-knop rechts */
.tb-collapse { color: var(--ink-muted, #8a8377); }

/* ingeklapte toolbar = enkele bubbel */
.tb.collapsed { padding: 0; background: transparent; border: none; box-shadow: none; backdrop-filter: none; }
.tb.collapsed > * { display: none; }
.tb.collapsed .tb-fab { display: grid; }
.tb-fab {
  display: none; width: 56px; height: 56px; place-items: center;
  border: none; cursor: pointer; border-radius: 50%;
  background: var(--ink, #2b2722); color: var(--paper, #faf6ef);
  transition: transform var(--dur-fast,140ms) var(--ease-soft);
}
.tb-fab:hover { transform: scale(1.06); }
.tb-fab svg { width: 26px; height: 26px; }

/* ingeklapt: de bubbel pulseert rustig zodat je 'm makkelijk terugvindt */
.tb.collapsed .tb-fab {
  animation: tbFabPulse 2.6s var(--ease-soft, ease-in-out) infinite;
}
/* pulseren pauzeert tijdens hover/focus zodat de interactie rustig oogt */
.tb.collapsed .tb-fab:hover,
.tb.collapsed .tb-fab:focus-visible { animation: none; }
@keyframes tbFabPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(33,30,26,0.20), 0 0 0 0 rgba(217,119,87,0); }
  50%      { box-shadow: 0 6px 16px rgba(33,30,26,0.20), 0 0 0 10px rgba(217,119,87,0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .tb.collapsed .tb-fab { animation: none; box-shadow: 0 6px 16px rgba(33,30,26,0.20), 0 0 0 5px rgba(217,119,87,0.16); }
}

/* ---- tooltip ---- */
.tb-btn[data-tip]::before, .tb-grip[data-tip]::before, .tb-collapse[data-tip]::before, .tb-fab[data-tip]::before {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 11px); transform: translateX(-50%) translateY(4px);
  padding: 6px 11px; border-radius: var(--r-md, 10px); white-space: nowrap;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; line-height: 1.1;
  color: var(--paper, #faf6ef); background: rgba(33,30,26,0.94);
  box-shadow: 0 6px 18px rgba(33,30,26,0.28);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast,140ms) var(--ease-soft), transform var(--dur-fast,140ms) var(--ease-soft);
  z-index: 5;
}
.tb-btn[data-tip]:hover::before, .tb-grip[data-tip]:hover::before, .tb-collapse[data-tip]:hover::before, .tb-fab[data-tip]:hover::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.tb-btn[data-tip]::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(33,30,26,0.94);
  opacity: 0; transition: opacity var(--dur-fast,140ms) var(--ease-soft); z-index: 5;
}
.tb-btn[data-tip]:hover::after { opacity: 1; }
/* tweede regel in tooltip voor live-only hint */
.tb-btn.live-only[data-tip]::before { white-space: pre; text-align: center; }

/* ============ FLYOUTS (stift / gum opties) ============ */
.flyout {
  position: absolute; z-index: 120; /* altijd bóven het taal- en niveaumenu */
  background: var(--paper, #faf6ef); border: 1px solid rgba(43,39,34,0.12);
  border-radius: var(--r-lg, 16px); box-shadow: 0 18px 44px rgba(33,30,26,0.24);
  padding: 14px; opacity: 0; transform: translateY(6px) scale(0.98); pointer-events: none;
  transition: opacity var(--dur-fast,140ms) var(--ease-soft), transform var(--dur-fast,140ms) var(--ease-soft);
}
.flyout.show { opacity: 1; transform: none; pointer-events: auto; }
.flyout .fl-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 9px; }
.flyout .fl-group + .fl-group { margin-top: 14px; }

/* werkvormen-menu (opklapmenu vanuit de toolbar) */
.flyout .werk-wrap { display: flex; flex-direction: column; min-width: 224px; margin: -4px; }
.flyout .werk-scroll { overflow-y: auto; max-height: min(46vh, 380px); overscroll-behavior: contain; scrollbar-width: thin; }
.flyout .werk-menu { display: flex; flex-direction: column; gap: 2px; min-width: 188px; }
.werk-row { display: flex; align-items: center; gap: 4px; }
.werk-row .werk-item { flex: 1 1 auto; }
/* pin-knop: vierkantje rechts naast de werkvorm — pint het item op de plaat */
.werk-pin {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid rgba(43,39,34,0.16); background: var(--paper, #faf6ef);
  border-radius: 8px; color: var(--ink-soft, #5c574e); cursor: pointer; margin-right: 2px;
  transition: background var(--dur-fast,140ms) var(--ease-soft), border-color var(--dur-fast,140ms) var(--ease-soft), color var(--dur-fast,140ms) var(--ease-soft);
}
.werk-pin svg { width: 16px; height: 16px; }
.werk-pin:hover { border-color: var(--ink, #2b2722); color: var(--ink, #2b2722); background: var(--paper-warm, #f5ecdb); }
.werk-sep { height: 1px; background: rgba(43,39,34,0.10); margin: 6px 4px; }
/* bevroren voet: vastzetten · verbergen · itemoverzicht */
.werk-foot { display: flex; gap: 6px; padding: 9px 2px 2px; margin-top: 7px; border-top: 1px solid rgba(43,39,34,0.10); }
.werk-fbtn {
  position: relative; flex: 1 1 0; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(43,39,34,0.16); background: transparent; border-radius: 9px;
  color: var(--ink-soft, #5c574e); cursor: pointer;
  transition: background var(--dur-fast,140ms) var(--ease-soft), color var(--dur-fast,140ms) var(--ease-soft);
}
.werk-fbtn svg { width: 17px; height: 17px; }
.werk-fbtn:hover { background: var(--paper-warm, #f5ecdb); color: var(--ink, #2b2722); }
.werk-fbtn.active { background: var(--ink, #2b2722); border-color: var(--ink, #2b2722); color: var(--paper, #faf6ef); }
.werk-fbtn[data-tip]::before {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
  background: rgba(33,30,26,0.94); color: #faf6ef; font-size: 11.5px; font-weight: 600;
  padding: 5px 9px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast,140ms) var(--ease-soft); z-index: 6;
}
.werk-fbtn[data-tip]:hover::before { opacity: 1; }
/* oranje “aangepast”-tag en teller in menu-items */
.werk-tag { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #c8612f; background: rgba(217,119,87,0.14); border-radius: 999px; padding: 3px 8px; }
.werk-ct { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--ink-soft, #5c574e); background: rgba(43,39,34,0.07); border-radius: 999px; padding: 2px 8px; }
.werk-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 9px 11px; border-radius: var(--r-md, 11px);
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--ink);
  transition: background var(--dur-fast,140ms) var(--ease-soft);
}
.werk-item:hover { background: var(--paper-warm, #f5ecdb); }
.werk-item .werk-ic { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink-soft, #5c574e); }
.werk-item .werk-ic svg { width: 21px; height: 21px; }

.color-row { display: flex; gap: 8px; }
.color-chip {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
  transition: transform var(--dur-fast,140ms) var(--ease-soft);
}
.color-chip:hover { transform: scale(1.12); }
.color-chip.sel { border-color: var(--ink, #2b2722); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7); }

.size-row { display: flex; align-items: center; gap: 10px; }
.size-dot { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 10px; cursor: pointer; background: transparent; border: none; transition: background var(--dur-fast,140ms) var(--ease-soft); }
.size-dot:hover { background: rgba(43,39,34,0.06); }
.size-dot.sel { background: rgba(43,39,34,0.10); }
.size-dot i { display: block; border-radius: 999px; background: var(--ink, #2b2722); }

.note-row { display: flex; gap: 8px; }
.note-chip { width: 30px; height: 30px; border-radius: 7px; cursor: pointer; border: 2px solid transparent; box-shadow: 0 2px 5px rgba(33,30,26,0.16); transition: transform var(--dur-fast,140ms) var(--ease-soft); }
.note-chip:hover { transform: translateY(-2px) rotate(-3deg); }
.note-chip.sel { border-color: var(--ink, #2b2722); }

/* ============ VIRTUEEL TOETSENBORD ============ */
.vkb {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(10px);
  z-index: 210; width: min(720px, 94vw); padding: 12px;
  background: rgba(40,37,33,0.96); backdrop-filter: blur(10px);
  border-radius: var(--r-xl, 18px); box-shadow: 0 22px 60px rgba(0,0,0,0.40);
  display: none; opacity: 0; transition: opacity var(--dur-base,240ms) var(--ease-soft), transform var(--dur-base,240ms) var(--ease-soft);
}
.vkb.show { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.vkb-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.vkb-row:last-child { margin-bottom: 0; }
.vk {
  flex: 0 0 auto; min-width: 40px; height: 42px; padding: 0 10px;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: rgba(255,255,255,0.10); color: #f5efe6; border-radius: 9px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  transition: background 90ms var(--ease-soft), transform 90ms var(--ease-soft);
}
.vk:hover { background: rgba(255,255,255,0.18); }
.vk:active { transform: translateY(1px); background: rgba(255,255,255,0.28); }
.vk.wide { flex: 1 1 auto; }
.vk.space { flex: 4 1 auto; }
.vk.util { background: rgba(255,255,255,0.05); color: #c9c2b6; font-size: 13px; }
.vkb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; padding: 0 4px; }
.vkb-head span { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,239,230,0.6); }
.vkb-head button { border: none; background: transparent; color: rgba(245,239,230,0.7); cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; }
.vkb-head button:hover { background: rgba(255,255,255,0.12); color: #fff; }
.vkb-head button svg { width: 16px; height: 16px; }

/* ============ LIVE-MODUS DIALOOG ============ */
.lm-layer {
  position: absolute; inset: 0; z-index: 130; display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.lm-layer.open { display: flex; }
.lm-back { position: absolute; inset: 0; background: rgba(33,30,26,0.40); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dur-base,240ms) var(--ease-soft); }
.lm-layer.open .lm-back { opacity: 1; }
.lm-card {
  position: relative; width: min(440px, 100%);
  background: var(--paper, #faf6ef); border-radius: var(--r-2xl, 22px);
  border: 1px solid rgba(43,39,34,0.10);
  box-shadow: 0 40px 100px rgba(33,30,26,0.34);
  padding: 30px 30px 26px; text-align: center;
  transform: translateY(12px) scale(0.98); opacity: 0;
  transition: transform var(--dur-base,240ms) var(--ease-soft), opacity var(--dur-base,240ms) var(--ease-soft);
}
.lm-layer.open .lm-card { transform: none; opacity: 1; }
.lm-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-coral-hex, #d97757); margin: 0 0 8px; font-weight: 600; }
.lm-title { font-family: var(--font-serif); font-weight: 400; font-size: 27px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.lm-sub { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0 auto 22px; max-width: 320px; }
.lm-code {
  display: inline-flex; gap: 8px; margin: 0 auto 14px;
}
.lm-code .cc {
  width: 46px; height: 58px; display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(43,39,34,0.12); border-radius: 12px;
  font-family: var(--font-mono, monospace); font-size: 30px; font-weight: 700; color: var(--ink);
  box-shadow: inset 0 -2px 0 rgba(43,39,34,0.06);
}
.lm-code .cc.dash { width: 18px; background: transparent; border: none; box-shadow: none; color: var(--ink-muted); }
.lm-link {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 22px;
  font-family: var(--font-mono, monospace); font-size: 15px; color: var(--ink-soft);
  background: var(--paper-warm, #f5ecdb); border: 1px solid rgba(43,39,34,0.10);
  border-radius: var(--r-pill, 999px); padding: 9px 16px; text-decoration: none;
  transition: border-color var(--dur-fast,140ms) var(--ease-soft), color var(--dur-fast,140ms) var(--ease-soft);
}
.lm-link:hover { border-color: var(--accent-coral-hex, #d97757); color: var(--accent-coral-hex, #d97757); }
.lm-link svg { width: 15px; height: 15px; }
.lm-meta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-muted); margin: 0 0 22px; }
.lm-meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green, #4f7a4e); box-shadow: 0 0 0 3px rgba(79,122,78,0.18); }
.lm-actions { display: flex; gap: 10px; }
.lm-btn {
  flex: 1 1 0; appearance: none; cursor: pointer; border-radius: var(--r-pill, 999px);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; padding: 12px 16px;
  transition: transform var(--dur-fast,140ms) var(--ease-soft), background var(--dur-fast,140ms) var(--ease-soft), border-color var(--dur-fast,140ms) var(--ease-soft);
}
.lm-btn.ghost { background: transparent; border: 1.5px solid var(--ink, #2b2722); color: var(--ink); }
.lm-btn.ghost:hover { background: rgba(43,39,34,0.05); }
.lm-btn.primary { background: var(--accent-coral-hex, #d97757); border: 1.5px solid var(--accent-coral-hex, #d97757); color: #fff; }
.lm-btn.primary:hover { transform: translateY(-1px); }
.lm-btn.danger { background: #c0573a; border: 1.5px solid #c0573a; color: #fff; }
.lm-btn.danger:hover { transform: translateY(-1px); background: #b04e33; }
.lm-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; border-radius: 9px; }
.lm-close:hover { background: rgba(43,39,34,0.06); color: var(--ink); }
.lm-close svg { width: 17px; height: 17px; }

/* live-modus actief: subtiele rand om de plaat + badge */
.stage.live-on .plaat { box-shadow: inset 0 0 0 3px rgba(79,122,78,0.55); }
.live-badge {
  position: absolute; left: 16px; top: 16px; z-index: 40; display: none;
  align-items: center; gap: 9px; padding: 8px 14px 8px 11px;
  background: rgba(250,246,239,0.92); backdrop-filter: blur(8px);
  border: 1px solid rgba(43,39,34,0.10); border-radius: var(--r-pill, 999px);
  box-shadow: var(--shadow-soft, 0 8px 24px rgba(43,39,34,.10));
  font-size: 13px; font-weight: 600; color: var(--ink);
}
/* de live-balk is zichtbaar zodra de kamer open is (wachtkamer én live) */
.stage.room-on .live-badge, .stage.live-on .live-badge { display: inline-flex; }
.live-badge .lb-toggle { display: grid; place-items: center; border: none; background: transparent; padding: 0; cursor: pointer; width: 14px; height: 14px; flex: 0 0 auto; }
.live-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green, #4f7a4e); box-shadow: 0 0 0 3px rgba(79,122,78,0.20); animation: livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 3px rgba(79,122,78,0.20); } 50% { box-shadow: 0 0 0 6px rgba(79,122,78,0.05); } }
/* wachtkamer: oranje lampje, geen "beëindigen" (er is nog niets live om te stoppen) */
.live-badge.is-waiting .dot { background: #e0922f; box-shadow: 0 0 0 3px rgba(224,146,47,0.22); animation: livePulseWarm 2.2s ease-in-out infinite; }
@keyframes livePulseWarm { 0%,100% { box-shadow: 0 0 0 3px rgba(224,146,47,0.22); } 50% { box-shadow: 0 0 0 6px rgba(224,146,47,0.05); } }
.live-badge.is-waiting .lb-toggle:hover .dot { box-shadow: 0 0 0 4px rgba(224,146,47,0.30); }
.live-badge.is-waiting .end { display: none; }
.live-badge .lb-text { font: inherit; font-weight: 600; color: var(--ink); border: none; background: transparent; padding: 2px 5px; border-radius: 7px; cursor: pointer; }
.live-badge .lb-text:hover { background: rgba(43,39,34,0.07); }
.live-badge .code { font: inherit; font-family: var(--font-mono, monospace); color: var(--ink-soft); font-weight: 700; border: none; background: transparent; padding: 2px 4px; border-radius: 7px; cursor: pointer; }
.live-badge .code:hover { background: rgba(43,39,34,0.07); color: var(--ink); }
.live-badge .end { margin-left: 4px; border: none; background: transparent; color: var(--ink-muted); cursor: pointer; font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 7px; }
.live-badge .end:hover { background: rgba(43,39,34,0.07); color: var(--ink); }

/* sessie-lock: knop in de live-balk + mini-slotje op de groene dot */
.live-badge .lb-lock { display: grid; place-items: center; border: none; background: transparent; color: var(--ink-muted); cursor: pointer; width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
.live-badge .lb-lock svg { width: 15px; height: 15px; }
.live-badge .lb-lock:hover { background: rgba(43,39,34,0.07); color: var(--ink); }
.live-badge .lb-lock.on { color: #b4502f; background: rgba(217,119,87,0.14); }
.live-badge .lb-toggle { position: relative; }
.live-badge .lb-minilock {
  position: absolute; right: -8px; bottom: -8px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper, #faf6ef); border: 1px solid rgba(43,39,34,0.30); color: #b4502f;
  display: none; place-items: center; pointer-events: none;
}
.live-badge .lb-minilock svg { width: 9px; height: 9px; }
.live-badge.locked .lb-minilock { display: grid; }

/* ingeklapt: alleen de pulserende dot blijft zichtbaar */
.live-badge .lb-text, .live-badge .code, .live-badge .end, .live-badge .lb-lock {
  overflow: hidden; white-space: nowrap; max-width: 200px; opacity: 1;
  transition: max-width var(--dur-base,240ms) var(--ease-soft), opacity var(--dur-fast,140ms) var(--ease-soft), margin var(--dur-base,240ms) var(--ease-soft), padding var(--dur-base,240ms) var(--ease-soft);
}
.live-badge.collapsed { gap: 0; padding: 8px; }
.live-badge.collapsed .lb-text, .live-badge.collapsed .code, .live-badge.collapsed .end, .live-badge.collapsed .lb-lock {
  max-width: 0; opacity: 0; margin: 0; padding-left: 0; padding-right: 0; border-left: none;
}
/* ingeklapt: ook de ontdekmodus/canva-chip verbergen */
.live-badge .kl-btn { overflow: hidden; max-width: 200px; transition: max-width var(--dur-base,240ms) var(--ease-soft), opacity var(--dur-fast,140ms) var(--ease-soft), padding var(--dur-base,240ms) var(--ease-soft); }
.live-badge.collapsed .kl-btn { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; }
.live-badge .lb-toggle:hover .dot { box-shadow: 0 0 0 4px rgba(79,122,78,0.28); }
/* inklap-chevron, zelfde idee als bij de werkbalk */
.live-badge .lb-collapse { display: grid; place-items: center; border: none; background: transparent; color: var(--ink-muted); cursor: pointer; width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; margin-left: 2px; }
.live-badge .lb-collapse:hover { background: rgba(43,39,34,0.07); color: var(--ink); }
.live-badge .lb-collapse svg { width: 16px; height: 16px; transition: transform var(--dur-base,240ms) var(--ease-soft); }
.live-badge.collapsed .lb-collapse svg { transform: rotate(180deg); }

/* ---- toolbar-lampje: oranje (wachtkamer) of groen (live) ---- */
.tb-btn.start-live .tb-lamp { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: #e0922f; transition: background var(--dur-fast,140ms) var(--ease-soft); }
.tb-btn.start-live.is-waiting .tb-lamp { background: #e0922f; box-shadow: 0 0 0 3px rgba(224,146,47,0.18); animation: lampPulseWarm 2.2s ease-in-out infinite; }
.tb-btn.start-live.is-live .tb-lamp { background: var(--accent-green, #4f7a4e); box-shadow: 0 0 0 3px rgba(79,122,78,0.18); animation: lampPulse 2.2s ease-in-out infinite; }
/* live = groen lampje: vervang de oude koraal-achtergrond door een groene tint */
.tb-btn.start-live.is-live.active { background: rgba(79,122,78,0.16); }
@keyframes lampPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(79,122,78,0.18); } 50% { box-shadow: 0 0 0 6px rgba(79,122,78,0.03); } }
@keyframes lampPulseWarm { 0%,100% { box-shadow: 0 0 0 3px rgba(224,146,47,0.18); } 50% { box-shadow: 0 0 0 6px rgba(224,146,47,0.03); } }

/* ---- uitnodigingsvenster: adres prominent als platte tekst, code eronder ---- */
.lm-invite .lm-link { font-size: 18px; font-weight: 700; color: var(--ink); background: #fff; border: 1.5px solid var(--accent-coral-hex, #d97757); padding: 12px 22px; margin: 0 auto 16px; cursor: default; }
.lm-invite .lm-link:hover { border-color: var(--accent-coral-hex, #d97757); color: var(--ink); }
.lm-invite .lm-link span { font-family: var(--font-mono, monospace); letter-spacing: 0.01em; }

/* ============ LINKTOOL (host) ============ */
/* flyout-formulier */
.fl-input { display: block; width: 224px; margin: 0 0 8px; padding: 9px 11px; border: 1px solid rgba(43,39,34,0.18); border-radius: 10px; background: var(--paper, #faf6ef); font: inherit; font-size: 13.5px; color: var(--ink, #2b2722); }
.fl-input:focus { outline: none; border-color: var(--ink, #2b2722); }
.fl-err { margin: 2px 0 8px; font-size: 12px; font-weight: 600; color: #b14a52; max-width: 224px; }
.fl-submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 38px; border: none; border-radius: 999px; background: var(--ink, #2b2722); color: var(--paper, #faf6ef); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.fl-submit:hover { transform: translateY(-1px); }
.fl-acts { display: flex; gap: 8px; width: 224px; }
.fl-acts .fl-submit { flex: 1 1 0; width: auto; }
.fl-submit.fl-push { background: none; border: 1.5px solid var(--ink, #2b2722); color: var(--ink, #2b2722); gap: 6px; }
.fl-submit.fl-push svg { width: 14px; height: 14px; flex: 0 0 auto; }
.fl-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-muted, #7a7064); max-width: 224px; }

/* geplaatste linkkaart op de plaat */
.hlink {
  position: absolute; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  max-width: 290px; padding: 9px 10px;
  background: var(--paper, #faf6ef);
  border: 1.5px solid var(--ink, #2b2722); border-radius: 13px;
  box-shadow: 0 10px 26px rgba(33,30,26,0.18);
  font-family: var(--font-sans, sans-serif);
}
.hlink.pushed { border-color: var(--accent-coral-hex, #d97757); box-shadow: 0 10px 26px rgba(217,119,87,0.28); }
/* ingeklapt geplaatst: een cirkeltje, precies zoals de andere werkvorm-iconen
   (poll, kort antwoord, woordwolk) — géén papier-achtergrond of kaderrand;
   klik op het cirkeltje klapt de linkkaart uit */
.hlink:not(.open) {
  gap: 0; padding: 0;
  width: 46px; height: 46px; border-radius: 50%;
  justify-content: center;
  background: var(--plaat-sky, #e3ecf0);
  border: none;
  box-shadow: 0 10px 22px rgba(33,30,26,0.20), 0 2px 5px rgba(33,30,26,0.12);
  transition: box-shadow var(--dur-fast,140ms) var(--ease-soft);
}
.hlink:not(.open):hover { box-shadow: 0 0 0 4px rgba(255,255,255,0.5), 0 12px 26px rgba(33,30,26,0.28); }
.hlink.pushed:not(.open) { box-shadow: 0 0 0 3px rgba(217,119,87,0.35), 0 8px 20px rgba(33,30,26,0.24); }
.hlink:not(.open).dragging { box-shadow: 0 0 0 4px rgba(255,255,255,0.5), 0 18px 34px rgba(33,30,26,0.30); }
.hlink:not(.open) .hlink-body, .hlink:not(.open) .hlink-acts { display: none; }
.hlink:not(.open) .hlink-ic { width: 100%; height: 100%; border-radius: 50%; background: none; }
.hlink:not(.open) .hlink-ic svg { width: 23px; height: 23px; }
.plaat.items-locked .hlink:not(.open) .hlink-ic { cursor: pointer; }
.hlink-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--plaat-sky, #e3ecf0); color: var(--ink, #2b2722); cursor: grab; touch-action: none; }
.hlink.dragging .hlink-ic { cursor: grabbing; }
.hlink-ic svg { width: 17px; height: 17px; }
.hlink-body { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 0; background: none; border: none; cursor: pointer; font: inherit; text-align: left; }
.hlink-label { max-width: 158px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13.5px; color: var(--ink, #2b2722); }
.hlink-body:hover .hlink-label { text-decoration: underline; }
.hlink-host { display: flex; align-items: center; gap: 4px; max-width: 158px; font-size: 11.5px; color: var(--ink-muted, #7a7064); }
.hlink-host svg { width: 11px; height: 11px; flex: 0 0 auto; }
.hlink-host i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlink-acts { display: flex; gap: 4px; flex: 0 0 auto; }
.hlink-btn { width: 27px; height: 27px; display: grid; place-items: center; border: none; border-radius: 8px; background: rgba(43,39,34,0.06); color: var(--ink-soft, #4a433a); cursor: pointer; }
.hlink-btn svg { width: 14px; height: 14px; }
.hlink-btn:hover { background: rgba(43,39,34,0.12); }
.hlink-btn.on { background: var(--accent-coral-hex, #d97757); color: #fff; }

/* ============ PLAATSINGSMODUS (werkvormen · memo's · links) ============
   Bij het plaatsen wordt de cursor een grijphandje; daaronder bungelt een
   miniatuur van de werkvorm en linksboven staat een duidelijk plusje.
   De werkbalk en de live-balk klappen in zolang er geplaatst wordt. */
.plaat.tool-place .draw-canvas.armed, .plaat.tool-note .draw-canvas.armed { cursor: grabbing; }

.place-ghost { position: absolute; z-index: 95; pointer-events: none; display: none; }
.place-ghost.show { display: block; }
.place-ghost .pg-mini {
  position: absolute; left: -13px; top: 22px; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--pg-accent, var(--plaat-sky, #e3ecf0)); color: var(--ink, #2b2722);
  border: 1.5px solid var(--ink, #2b2722); box-shadow: 0 12px 26px rgba(33,30,26,0.28);
  transform-origin: 50% -18px;
  animation: pgDangle 2.4s ease-in-out infinite;
}
.place-ghost .pg-mini::before {
  content: ""; position: absolute; top: -19px; left: 50%; margin-left: -0.75px;
  width: 1.5px; height: 18px; background: var(--ink, #2b2722); opacity: 0.55;
}
.place-ghost .pg-mini svg { width: 23px; height: 23px; }
@keyframes pgDangle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .place-ghost .pg-mini { animation: none; } }

/* ============ ITEMS VASTZETTEN / VERSLEPEN ============ */
.plaat:not(.items-locked) .sticky { cursor: grab; }
.plaat:not(.items-locked) .sticky.dragging { cursor: grabbing; }
.plaat:not(.items-locked) .sticky .sn-ed, .plaat:not(.items-locked) .sticky .sn-title { cursor: text; }
.plaat:not(.items-locked) .hlink { cursor: grab; }
.plaat:not(.items-locked) .hlink.dragging { cursor: grabbing; }
.plaat:not(.items-locked) .tool-icon { cursor: grab; }
.plaat.items-locked .tool-icon { cursor: pointer; }

/* verplaatsen = zwevend hangertje met pinpoint, net als bij het eerste plaatsen */
.hlink .hl-pin {
  position: absolute; top: 23px; left: 23px; width: 23px; height: 31px;
  transform-origin: bottom center; transform: translate(-50%, -100%) scale(0.55);
  opacity: 0; pointer-events: none; z-index: 12;
  filter: drop-shadow(0 5px 9px rgba(33,30,26,0.30));
  transition: opacity var(--dur-fast,140ms) var(--ease-soft), transform var(--dur-base,240ms) var(--ease-soft);
}
.hlink .hl-pin svg { width: 100%; height: 100%; display: block; }
.hlink.dragging .hl-pin { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.hlink.dragging { box-shadow: 0 18px 34px rgba(33,30,26,0.26); }

/* “verbergen” in het werkvormen-menu: alle geplaatste items tijdelijk uit beeld */
.plaat.items-hidden .sticky, .plaat.items-hidden .tool-icon, .plaat.items-hidden .hlink { display: none !important; }

/* linkkoppeling in de werkvorm-vensters (geïntegreerd, geen aparte balk) */
.tool-linkrow { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.tool-linkrow:empty { display: none; }
.tlb-toggle.is-open { border-style: solid; border-color: var(--ink, #2b2722); color: var(--ink, #2b2722); }

/* ============ LINK KOPPELEN aan een interactieve tool ============
   De .tlb-*-elementen leven in .tool-linkrow bínnen het werkvorm-venster
   (woordwolk · poll · kort antwoord) — zie buildLinkUI in live.js. */
.tlb-toggle { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border: 1.5px dashed rgba(43,39,34,0.35); background: none; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft, #4a433a); cursor: pointer; }
.tlb-toggle:hover { border-color: var(--ink, #2b2722); color: var(--ink, #2b2722); }
.tlb-toggle svg { width: 15px; height: 15px; }
.tlb-chip { display: flex; align-items: center; gap: 10px; max-width: 430px; padding: 8px 10px; border: 1.5px solid var(--ink, #2b2722); border-radius: 12px; background: var(--paper, #faf6ef); }
.tlb-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--plaat-sky, #e3ecf0); color: var(--ink, #2b2722); }
.tlb-ic svg { width: 16px; height: 16px; }
.tlb-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tlb-body b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlb-body i { font-style: normal; font-size: 11.5px; color: var(--ink-muted, #7a7064); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlb-btn { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border: none; border-radius: 8px; background: rgba(43,39,34,0.06); color: var(--ink-soft, #4a433a); cursor: pointer; }
.tlb-btn:hover { background: rgba(43,39,34,0.12); }
.tlb-btn svg { width: 14px; height: 14px; }
.tlb-panel { display: flex; flex-direction: column; gap: 8px; max-width: 430px; }
.tlb-sub { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted, #7a7064); }
.tlb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tlb-pick { border: 1px solid rgba(43,39,34,0.18); background: var(--plaat-sky, #e3ecf0); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlb-input { padding: 8px 11px; border: 1px solid rgba(43,39,34,0.18); border-radius: 10px; background: var(--paper, #faf6ef); font: inherit; font-size: 13px; }
.tlb-input:focus { outline: none; border-color: var(--ink, #2b2722); }
.tlb-err { margin: 0; font-size: 12px; font-weight: 600; color: #b14a52; }
.tlb-go { align-self: flex-start; border: none; border-radius: 999px; background: var(--ink, #2b2722); color: var(--paper, #faf6ef); padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tlb-go:disabled { opacity: 0.45; cursor: default; }

/* link aan een memo koppelen: knop in de opmaakbalk, venster OVER de memo,
   en een klein inline icoon-hokje tussen de memotekst */
.sn-linkbtn.on { color: var(--accent-coral-hex, #d97757); }
.sn-linkover {
  position: absolute; inset: 0; z-index: 7; border-radius: inherit;
  background: var(--paper, #faf6ef);
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
}
.sn-linkover[hidden] { display: none; }
.sn-linkover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sn-linkover-ttl { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted, #7a7064); }
.sn-linkover-ok {
  flex: 0 0 auto; width: 32px; height: 32px; border: none; border-radius: 9px;
  background: var(--accent-coral-hex, #d97757); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.sn-linkover-ok:hover { background: var(--accent-coral-deep, #bd5d3e); }
.sn-linkover-ok svg { width: 18px; height: 18px; }
.sn-linkover .tlb-input { width: 100%; }
.sn-linkover-unlink {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer; padding: 4px 2px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft, #4a433a);
}
.sn-linkover-unlink:hover { color: #b14a52; }
.sn-linkover-unlink svg { width: 14px; height: 14px; }
.sn.min .sn-linkover { display: none; }
/* inline link-hokje in de memotekst: icoon + (optionele) titel */
.sn-inline-link {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: -0.24em;
  margin: 0 2px; padding: 1px 7px 1px 5px; max-width: 90%;
  border-radius: 7px; background: var(--plaat-sky, #e3ecf0); color: var(--ink, #2b2722);
  cursor: pointer; user-select: none; font-size: 0.84em; line-height: 1.5; font-weight: 600;
}
.sn-inline-link:hover { background: color-mix(in srgb, var(--plaat-sky, #e3ecf0) 70%, var(--ink, #2b2722) 12%); }
.sn-il-ic { flex: 0 0 auto; display: inline-grid; place-items: center; }
.sn-il-ic svg { width: 1em; height: 1em; }
.sn-il-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }
.sn-il-lab:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .live-badge .dot, .tb-btn.start-live .tb-lamp { animation: none; }
  .sc-pill { animation: none !important; }
}