/* =====================================================================
   Louped Overlay Prototype — "Minimal Launcher → Command Bar"
   Hand-coded. No SDK, no @louped/kumo. Self-contained + fast.

   Signal palette:
     accent      #2563eb   accent-hover #1d4fd0
     canvas      #ffffff   ink #1d2125   line #eceef1
     radius      6px       aesthetic: clean, Kumo-ish, quiet
   ===================================================================== */

/* ---- Tokens (light) ---- */
:root,
[data-theme="light"] {
  --lpd-accent:        #2563eb;
  --lpd-accent-hover:  #1d4fd0;
  --lpd-accent-soft:   rgba(37, 99, 235, 0.10);
  --lpd-accent-ring:   rgba(37, 99, 235, 0.32);

  --lpd-canvas:        #ffffff;
  --lpd-ink:           #1d2125;
  --lpd-ink-soft:      #5c6670;
  --lpd-ink-faint:     #8b949e;
  --lpd-line:          #eceef1;
  --lpd-line-strong:   #dce0e6;

  --lpd-surface:       #ffffff;
  --lpd-surface-2:     #f6f8fa;
  --lpd-elevate:       0 1px 2px rgba(16,22,28,.06), 0 8px 24px rgba(16,22,28,.10);
  --lpd-elevate-lg:    0 2px 6px rgba(16,22,28,.08), 0 18px 48px rgba(16,22,28,.16);

  --lpd-radius:        6px;
  --lpd-radius-lg:     10px;
  --lpd-radius-pill:   999px;

  --lpd-ok:            #16a34a;
  --lpd-warn:          #d97706;
}

/* ---- Tokens (dark variant) ---- */
[data-theme="dark"] {
  --lpd-accent:        #4f86ff;
  --lpd-accent-hover:  #6f9dff;
  --lpd-accent-soft:   rgba(79, 134, 255, 0.16);
  --lpd-accent-ring:   rgba(79, 134, 255, 0.42);

  --lpd-canvas:        #14181d;
  --lpd-ink:           #e8ebef;
  --lpd-ink-soft:      #a6afba;
  --lpd-ink-faint:     #6c7682;
  --lpd-line:          #2a313a;
  --lpd-line-strong:   #38414c;

  --lpd-surface:       #1b2026;
  --lpd-surface-2:     #232a32;
  --lpd-elevate:       0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
  --lpd-elevate-lg:    0 2px 8px rgba(0,0,0,.45), 0 22px 56px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--lpd-ink);
  background: #f1f1f3; /* muted grey so the overlay reads as the star */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

kbd {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* =====================================================================
   MOCK HOST PAGE  (shared simple marketing site — identical to the Rail
   prototype's host so the two sit on the same canvas. Intentionally
   muted so the overlay reads as the star.)
   ===================================================================== */
.host {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px 64px;
}

.host-top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid #e3e4e7;
  margin-bottom: 56px;
}
.host-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: 16px; letter-spacing: -.01em; color: #2b2f34;
}
.host-logo {
  width: 20px; height: 20px; border-radius: 5px;
  background: linear-gradient(135deg, #c7ccd2, #9aa1a9);
}
.host-nav { display: flex; gap: 22px; margin-left: 8px; }
.host-nav a {
  color: #6b7077; text-decoration: none; font-size: 14px; font-weight: 500;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.host-nav a.is-active { color: #2b2f34; border-bottom-color: #c4c8cd; }
.host-cta {
  margin-left: auto;
  background: #2b2f34; color: #fff; border: 0;
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 7px; cursor: pointer;
}
.host-hero { max-width: 680px; margin-bottom: 56px; }
.host-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #8a9099; background: #e7e9ec; padding: 4px 9px; border-radius: 100px;
  margin: 0 0 20px;
}
.host-h1 {
  font-size: 46px; line-height: 1.08; letter-spacing: -.025em; font-weight: 700;
  margin: 0 0 20px; color: #23272c;
}
.host-lede { font-size: 17px; line-height: 1.6; color: #5f656c; margin: 0 0 28px; max-width: 560px; }
.host-lede kbd { padding: 2px 7px; border-radius: 5px; border: 1px solid #d7dadf; background: #fff; font-size: 12px; color: #3a3f45; }
.host-actions { display: flex; gap: 12px; align-items: center; }
.host-ghost {
  background: #fff; color: #3a3f45; border: 1px solid #d7dadf;
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 7px; cursor: pointer;
}
.host-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 48px;
}
.host-card {
  background: #fff; border: 1px solid #e6e8eb; border-radius: 10px; padding: 22px 22px 20px;
}
.host-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 650; color: #2b2f34; letter-spacing: -.01em; }
.host-card p  { margin: 0; font-size: 14px; line-height: 1.55; color: #6b7077; }
.host-band {
  background: #fff; border: 1px solid #e6e8eb; border-radius: 12px;
  padding: 40px 44px; margin-bottom: 40px;
}
.host-quote {
  margin: 0; font-size: 24px; line-height: 1.4; font-weight: 500; letter-spacing: -.015em; color: #34383d;
}
.host-quote cite { display: block; margin-top: 16px; font-size: 14px; font-weight: 500; font-style: normal; color: #8a9099; }
.host-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px; border-top: 1px solid #e3e4e7; color: #8a9099; font-size: 13px;
}
.host-foot-links { display: flex; gap: 18px; }
.host-foot-links a { color: #8a9099; text-decoration: none; }

@media (max-width: 720px) {
  .host-nav { display: none; }
  .host-grid { grid-template-columns: 1fr; }
  .host-h1 { font-size: 34px; }
}

/* =====================================================================
   OVERLAY ROOT
   The overlay is fixed, full-viewport, but pointer-events pass through
   except on its own interactive bits. A capture layer turns on per-tool.
   ===================================================================== */
.lpd {
  position: fixed; inset: 0; z-index: 2147483000; /* sit above host */
  pointer-events: none;
  font-family: inherit; color: var(--lpd-ink);
}
.lpd * { box-sizing: border-box; }
.lpd ::selection { background: var(--lpd-accent-soft); }

/* The pin/region/lasso/markup layer */
.lpd-canvas { position: absolute; inset: 0; pointer-events: none; }
.lpd-canvas.is-capturing { pointer-events: auto; cursor: crosshair; }
.lpd-canvas.is-capturing[data-tool="markup"],
.lpd-canvas.is-capturing[data-tool="lasso"] { cursor: crosshair; }
.lpd-canvas.is-capturing[data-tool="pin"] { cursor: cell; }

.lpd-presence { position: absolute; inset: 0; pointer-events: none; }

/* =====================================================================
   1) LAUNCHER  — ultra-minimal floating button, bottom-right
   ===================================================================== */
.lpd-launcher {
  position: fixed; right: 22px; bottom: 22px;
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  pointer-events: auto; cursor: grab; touch-action: none;
  background: var(--lpd-accent); color: #fff;
  border: none;
  box-shadow: var(--lpd-elevate), 0 0 0 0 var(--lpd-accent-ring);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, opacity .16s ease, background .15s ease;
}
.lpd-launcher.is-placed { transition: box-shadow .2s ease, opacity .16s ease, background .15s ease; }
.lpd-launcher.is-dragging { cursor: grabbing; transition: none; box-shadow: var(--lpd-elevate-lg), 0 0 0 4px var(--lpd-accent-ring); transform: scale(1.04); }
.lpd-launcher:hover { background: var(--lpd-accent-hover); transform: translateY(-1px); }
.lpd-launcher.is-placed:hover { transform: none; }
.lpd-launcher.is-dragging:hover { transform: scale(1.04); }
.lpd-launcher:active { transform: translateY(0) scale(.97); }
.lpd-launcher.is-placed:active { transform: none; }
/* tiny "drag me" grip dots, shown on hover */
.lpd-launcher__grip {
  position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  display: flex; gap: 2px; opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.lpd-launcher__grip i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.7); }
.lpd-launcher:hover .lpd-launcher__grip { opacity: 1; }
.lpd-launcher:focus-visible { outline: none; box-shadow: var(--lpd-elevate), 0 0 0 4px var(--lpd-accent-ring); }
.lpd-launcher__glyph { display: grid; place-items: center; pointer-events: none; }
.lpd-launcher > * { pointer-events: none; }
.lpd-launcher__pulse {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 var(--lpd-accent-ring);
  animation: lpd-pulse 2.6s ease-out infinite;
}
@keyframes lpd-pulse {
  0%   { box-shadow: 0 0 0 0 var(--lpd-accent-ring); }
  70%  { box-shadow: 0 0 0 14px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.lpd-launcher__hint {
  position: absolute; right: -4px; top: -6px;
  font-size: 10px; font-weight: 700; line-height: 1;
  background: var(--lpd-surface); color: var(--lpd-ink);
  border: 1px solid var(--lpd-line-strong);
  padding: 3px 5px; border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

/* When the bar is open, the launcher tucks away */
.lpd[data-state="open"] .lpd-launcher { opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none; }
.lpd[data-state="open"] .lpd-launcher__pulse { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .lpd-launcher__pulse { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* =====================================================================
   1b) COMMAND BAR  — slim horizontal palette
   ===================================================================== */
.lpd-bar {
  position: fixed; right: 22px; bottom: 22px;
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px;
  background: color-mix(in srgb, var(--lpd-surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--lpd-line);
  border-radius: 14px;
  box-shadow: var(--lpd-elevate-lg);
  transform-origin: bottom right;
  /* closed by default — fully inert so it never blocks the launcher */
  opacity: 0; transform: translateY(10px) scale(.96);
  visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.85,.2,1), visibility 0s linear .22s;
}
.lpd[data-state="open"] .lpd-bar {
  opacity: 1; transform: translateY(0) scale(1);
  visibility: visible; pointer-events: auto;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.85,.2,1), visibility 0s;
}
.lpd-bar:focus-visible { outline: none; }

/* Brand doubles as the drag grip for the whole bar */
.lpd-bar__brand {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 4px 0 5px; color: var(--lpd-accent);
  cursor: grab; touch-action: none; border-radius: 8px;
  transition: background .13s ease;
}
.lpd-bar__brand:hover { background: var(--lpd-accent-soft); }
.lpd-bar__brand.is-dragging { cursor: grabbing; background: var(--lpd-accent-soft); }
.lpd-bar__brand > * { pointer-events: none; }
.lpd-bar__brand .lpd-bar__grip-dots {
  display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; opacity: .5;
}
.lpd-bar__brand .lpd-bar__grip-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.lpd-bar__brand:hover .lpd-bar__grip-dots { opacity: .9; }
.lpd-bar__rule { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--lpd-line); }
.lpd-bar__tools { display: flex; align-items: center; gap: 2px; }
.lpd-bar__end { display: flex; align-items: center; gap: 2px; }

/* Tool buttons — compact icon button; the hotkey is a TINY key-cap badge
   tucked into the corner so the row stays narrow (v3). The full label is
   revealed only on hover/active. */
.lpd-tool {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--lpd-ink);
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
  white-space: nowrap;
}
.lpd-tool svg { width: 18px; height: 18px; flex: none; }
.lpd-tool__label {
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width .22s ease, opacity .16s ease, margin .22s ease;
  margin-left: -6px;
}
/* tiny key-cap — sits at the top-right corner of the icon, very small */
.lpd-tool kbd {
  position: absolute; top: 1px; right: 1px;
  min-width: 11px; height: 11px; padding: 0 2px;
  display: grid; place-items: center;
  font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: 0;
  color: var(--lpd-ink-faint);
  border: 1px solid var(--lpd-line-strong); border-radius: 3px;
  background: var(--lpd-surface);
  transition: color .13s ease, border-color .13s ease, background .13s ease, opacity .13s ease;
}
.lpd-tool:hover { background: var(--lpd-surface-2); }
.lpd-tool:hover .lpd-tool__label { max-width: 84px; opacity: 1; margin-left: 0; }
.lpd-tool:focus-visible { outline: none; border-color: var(--lpd-accent-ring); box-shadow: 0 0 0 3px var(--lpd-accent-ring); }
/* Active tool: show the label inline + relocate the key-cap after it */
.lpd-tool[aria-pressed="true"] { background: var(--lpd-accent-soft); color: var(--lpd-accent); }
.lpd-tool[aria-pressed="true"] .lpd-tool__label { max-width: 84px; opacity: 1; margin-left: 0; }
.lpd-tool[aria-pressed="true"] kbd {
  position: static; top: auto; right: auto;
  color: var(--lpd-accent); border-color: var(--lpd-accent-ring); background: transparent;
}

/* People badge */
.lpd-tool__badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; line-height: 1; color: #fff;
  background: var(--lpd-accent); border-radius: 999px;
  border: 1.5px solid var(--lpd-surface);
}

/* End icon buttons */
.lpd-icon-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--lpd-ink-soft);
  cursor: pointer; transition: background .13s ease, color .13s ease;
}
.lpd-icon-btn svg { width: 17px; height: 17px; }
.lpd-icon-btn:hover { background: var(--lpd-surface-2); color: var(--lpd-ink); }
.lpd-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lpd-accent-ring); }
.lpd-icon-btn--close:hover { color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }
.lpd-icon-sun { display: none; } .lpd-icon-moon { display: block; }
[data-theme="dark"] .lpd-icon-sun { display: block; } [data-theme="dark"] .lpd-icon-moon { display: none; }

/* On phones: pin the bar across the bottom and let the TOOLS scroll
   horizontally so the row never overflows. The grip/brand and the end
   controls stay fixed; only the middle tool group scrolls. */
@media (max-width: 640px) {
  /* default (un-dragged) bar spans the bottom; a dragged position is still
     honoured because JS clamps it on-screen, so no !important pinning. */
  .lpd-bar:not(.is-placed) {
    left: 8px; right: 8px; bottom: 8px; top: auto; width: auto;
  }
  .lpd-bar__tools {
    overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-width: 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .lpd-bar__tools::-webkit-scrollbar { display: none; }
  .lpd-tool { scroll-snap-align: center; }
}

/* =====================================================================
   STATUS PILL — narrates active tool, reinforces keyboard-first feel
   ===================================================================== */
.lpd-statuspill {
  position: fixed; left: 50%; bottom: 88px; transform: translate(-50%, 8px);
  pointer-events: none; opacity: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--lpd-ink); color: #fff;
  font-size: 12.5px; font-weight: 550; letter-spacing: .01em;
  box-shadow: var(--lpd-elevate);
  transition: opacity .18s ease, transform .18s ease;
  max-width: 90vw;
}
[data-theme="dark"] .lpd-statuspill { background: #e8ebef; color: #14181d; }
.lpd-statuspill.is-on { opacity: 1; transform: translate(-50%, 0); }
.lpd-statuspill kbd { font-size: 10.5px; font-weight: 800; padding: 2px 5px; border-radius: 4px;
  background: rgba(255,255,255,.18); color: inherit; }
[data-theme="dark"] .lpd-statuspill kbd { background: rgba(0,0,0,.12); }
.lpd-statuspill em { font-style: normal; color: #9ec1ff; font-weight: 650; }
[data-theme="dark"] .lpd-statuspill em { color: var(--lpd-accent); }

/* =====================================================================
   PINS + ANCHORED COMMENT INPUT  (the key interaction)
   ===================================================================== */
.lpd-pin {
  position: absolute; width: 30px; height: 30px;
  transform: translate(-50%, -100%);
  pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 4px 8px rgba(16,22,28,.28));
  animation: lpd-pin-in .28s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes lpd-pin-in { from { transform: translate(-50%, -100%) scale(.4); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }
.lpd-pin svg { width: 100%; height: 100%; display: block; }
.lpd-pin__num {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 800; color: #fff; pointer-events: none;
}
.lpd-pin:hover { z-index: 3; }
.lpd-pin.is-active { z-index: 4; }

/* Anchored comment popover (callout with a stem) */
.lpd-callout {
  position: absolute; z-index: 6; pointer-events: auto;
  width: 288px; max-width: calc(100vw - 24px);
  background: var(--lpd-surface);
  border: 1px solid var(--lpd-line);
  border-radius: var(--lpd-radius-lg);
  box-shadow: var(--lpd-elevate-lg);
  transform-origin: var(--stem-origin, bottom left);
  animation: lpd-callout-in .18s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes lpd-callout-in { from { opacity: 0; transform: scale(.94) translateY(4px);} to { opacity:1; transform: scale(1) translateY(0);} }

/* The stem (clean triangle pointing back to the anchor).
   Drawn with stacked borders — no stray box edges. A 1px border-colored
   triangle sits a hair behind a surface-colored triangle. */
.lpd-callout__stem { position: absolute; width: 0; height: 0; }
.lpd-callout__stem::before,
.lpd-callout__stem::after {
  content: ""; position: absolute; width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
}
/* stem on the TOP edge (callout sits below the anchor) -> points up */
.lpd-callout__stem--up { top: -9px; }
.lpd-callout__stem--up::before { border-bottom: 9px solid var(--lpd-line); left: -8px; top: 0; }
.lpd-callout__stem--up::after  { border-bottom: 8px solid var(--lpd-surface); left: -7px; top: 1.5px; }
/* stem on the BOTTOM edge (callout sits above the anchor) -> points down */
.lpd-callout__stem--down { bottom: -9px; }
.lpd-callout__stem--down::before { border-top: 9px solid var(--lpd-line); left: -8px; bottom: 0; }
.lpd-callout__stem--down::after  { border-top: 8px solid var(--lpd-surface); left: -7px; bottom: 1.5px; }

.lpd-callout__head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px 9px; border-bottom: 1px solid var(--lpd-line);
}
.lpd-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.lpd-callout__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lpd-callout__who b { font-size: 13px; font-weight: 650; }
.lpd-callout__who span { font-size: 11px; color: var(--lpd-ink-faint); }
.lpd-callout__close { margin-left: auto; }

.lpd-callout__body { padding: 10px 12px 12px; }
.lpd-field {
  width: 100%; min-height: 64px; resize: none;
  font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--lpd-ink);
  background: var(--lpd-surface-2);
  border: 1px solid var(--lpd-line);
  border-radius: var(--lpd-radius); padding: 9px 10px;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.lpd-field::placeholder { color: var(--lpd-ink-faint); }
.lpd-field:focus { outline: none; border-color: var(--lpd-accent); box-shadow: 0 0 0 3px var(--lpd-accent-ring); background: var(--lpd-surface); }

.lpd-callout__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.lpd-callout__foot .lpd-hintkeys { font-size: 11px; color: var(--lpd-ink-faint); margin-right: auto; }
.lpd-callout__foot kbd { font-size: 10px; font-weight: 700; border: 1px solid var(--lpd-line-strong); border-radius: 4px; padding: 1.5px 4px; background: var(--lpd-surface-2); }

.lpd-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: var(--lpd-radius); padding: 8px 13px; border: 1px solid transparent;
  transition: background .13s ease, border-color .13s ease, color .13s ease, opacity .13s ease;
}
.lpd-btn--primary { background: var(--lpd-accent); color: #fff; }
.lpd-btn--primary:hover { background: var(--lpd-accent-hover); }
.lpd-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.lpd-btn--ghost { background: transparent; color: var(--lpd-ink-soft); border-color: var(--lpd-line); }
.lpd-btn--ghost:hover { background: var(--lpd-surface-2); color: var(--lpd-ink); }
.lpd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lpd-accent-ring); }

/* A saved comment, shown as a small attached thread bubble after send */
.lpd-thread {
  position: absolute; z-index: 5; pointer-events: auto;
  width: 252px; max-width: calc(100vw - 24px);
  background: var(--lpd-surface); border: 1px solid var(--lpd-line);
  border-radius: var(--lpd-radius-lg); box-shadow: var(--lpd-elevate);
  padding: 10px 11px;
  animation: lpd-callout-in .18s ease both;
  font-size: 13px;
}
.lpd-thread .lpd-thread__head { display:flex; align-items:center; gap:8px; margin-bottom: 6px; }
.lpd-thread .lpd-thread__head b { font-size: 12.5px; }
.lpd-thread .lpd-thread__head span { font-size: 11px; color: var(--lpd-ink-faint); margin-left:auto; }
.lpd-thread p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lpd-ink); }
.lpd-thread.is-collapsed { display: none; }

/* =====================================================================
   REGION / LASSO / MARKUP shapes drawn on the canvas
   ===================================================================== */
.lpd-region {
  position: absolute; pointer-events: none;
  border: 1.5px solid var(--lpd-accent);
  background: var(--lpd-accent-soft);
  border-radius: 4px;
}
.lpd-region__tag {
  position: absolute; top: -11px; left: -1px;
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--lpd-accent);
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.lpd-shape-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lpd-shape-svg path { fill: none; stroke: var(--lpd-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lpd-shape-svg .lpd-lasso-fill { fill: var(--lpd-accent-soft); stroke: var(--lpd-accent); stroke-dasharray: 5 4; stroke-width: 1.5; }

/* =====================================================================
   SIMULATED PRESENCE CURSORS
   ===================================================================== */
.lpd-cursor {
  position: absolute; top: 0; left: 0; pointer-events: none;
  display: flex; align-items: flex-start; gap: 4px;
  transition: transform .9s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.lpd-cursor svg { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.lpd-cursor__name {
  margin-top: 12px;
  font-size: 11px; font-weight: 650; color: #fff;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.lpd-cursor.is-followed { z-index: 7; }
.lpd-cursor.is-followed .lpd-cursor__name { box-shadow: 0 0 0 2px var(--lpd-surface), 0 0 0 4px currentColor; }
.lpd-cursor.is-followed::after {
  content: ""; position: absolute; left: -8px; top: -8px; width: 36px; height: 36px;
  border-radius: 50%; border: 2px solid currentColor; opacity: .6;
  animation: lpd-follow-ring 1.4s ease-out infinite;
}
@keyframes lpd-follow-ring { 0% { transform: scale(.6); opacity:.7;} 100% { transform: scale(1.5); opacity:0;} }

/* When following: dim the rest a touch + a banner */
.lpd-follow-banner {
  position: fixed; left: 50%; top: 18px; transform: translate(-50%, -12px);
  pointer-events: auto; opacity: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px; border-radius: 999px;
  background: var(--lpd-surface); border: 1px solid var(--lpd-line);
  box-shadow: var(--lpd-elevate); font-size: 13px; font-weight: 550;
  transition: opacity .18s ease, transform .18s ease; z-index: 8;
}
.lpd-follow-banner.is-on { opacity: 1; transform: translate(-50%, 0); }
.lpd-follow-banner .dot { width: 9px; height: 9px; border-radius: 50%; }
.lpd-follow-banner button { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--lpd-line); background: var(--lpd-surface-2); color: var(--lpd-ink);
  border-radius: 999px; padding: 4px 10px; }
.lpd-follow-banner button:hover { border-color: var(--lpd-ink-soft); }

/* =====================================================================
   POPOUTS / PANELS shared shell (Follow popout, People popout)
   ===================================================================== */
.lpd-pop {
  position: fixed; z-index: 7; pointer-events: auto;
  width: 256px; max-width: calc(100vw - 24px);
  background: var(--lpd-surface); border: 1px solid var(--lpd-line);
  border-radius: var(--lpd-radius-lg); box-shadow: var(--lpd-elevate-lg);
  overflow: hidden;
  animation: lpd-callout-in .16s ease both; transform-origin: bottom right;
}
.lpd-pop__head { display: flex; align-items: center; gap: 8px; padding: 12px 13px 10px; border-bottom: 1px solid var(--lpd-line); }
.lpd-pop__head h3 { margin: 0; font-size: 13px; font-weight: 650; }
.lpd-pop__head .lpd-pop__count { font-size: 11px; color: var(--lpd-ink-faint); }
.lpd-pop__head .lpd-icon-btn { margin-left: auto; }
.lpd-pop__body { padding: 6px; max-height: 320px; overflow: auto; }

.lpd-member {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border-radius: var(--lpd-radius); border: 1px solid transparent;
  background: transparent; cursor: pointer; font: inherit; text-align: left;
  transition: background .12s ease;
}
.lpd-member:hover { background: var(--lpd-surface-2); }
.lpd-member:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lpd-accent-ring); }
.lpd-member__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lpd-member__meta b { font-size: 13px; font-weight: 600; }
.lpd-member__meta span { font-size: 11px; color: var(--lpd-ink-faint); }
.lpd-member__dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex: none; }
.lpd-member__dot--online { background: var(--lpd-ok); }
.lpd-member__dot--idle { background: var(--lpd-warn); }
.lpd-member__action { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--lpd-accent); }
.lpd-member.is-following { background: var(--lpd-accent-soft); }
.lpd-member.is-following .lpd-member__action { color: var(--lpd-accent); }
.lpd-member.is-self { cursor: default; }
.lpd-member.is-self:hover { background: transparent; }

/* =====================================================================
   VOICE / CHAT — focused bottom-sheet corner card with segmented switch
   ===================================================================== */
.lpd-sheet {
  position: fixed; right: 22px; bottom: 86px; z-index: 7; pointer-events: auto;
  width: 320px; max-width: calc(100vw - 24px);
  height: 460px; max-height: min(82vh, 620px); min-height: 260px;
  display: flex; flex-direction: column;
  background: var(--lpd-surface); border: 1px solid var(--lpd-line);
  border-radius: 14px; box-shadow: var(--lpd-elevate-lg);
  overflow: hidden;
  animation: lpd-sheet-in .2s cubic-bezier(.2,.9,.25,1) both; transform-origin: bottom right;
}
.lpd-sheet.is-resizing { transition: none; user-select: none; }
@keyframes lpd-sheet-in { from { opacity: 0; transform: translateY(10px) scale(.97);} to { opacity:1; transform: translateY(0) scale(1);} }

/* resize handle (drag the top edge to make chat taller/shorter) — req 4 */
.lpd-resize {
  position: absolute; top: 0; left: 0; right: 0; height: 10px;
  cursor: ns-resize; touch-action: none; z-index: 2;
  display: flex; align-items: flex-start; justify-content: center;
}
.lpd-resize::after {
  content: ""; margin-top: 3px; width: 34px; height: 4px; border-radius: 999px;
  background: var(--lpd-line-strong); transition: background .13s ease;
}
.lpd-resize:hover::after, .lpd-sheet.is-resizing .lpd-resize::after { background: var(--lpd-accent); }

.lpd-sheet__head { display: flex; align-items: center; gap: 8px; padding: 13px 10px 10px 12px; border-bottom: 1px solid var(--lpd-line); }
.lpd-sheet__title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--lpd-ink); }
.lpd-sheet__title svg { width: 16px; height: 16px; color: var(--lpd-accent); }
.lpd-seg {
  display: inline-flex; padding: 3px; gap: 3px; background: var(--lpd-surface-2);
  border: 1px solid var(--lpd-line); border-radius: 9px;
}
.lpd-seg--scope { flex: 0 0 auto; }
.lpd-seg button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: 6px; border: none; background: transparent; color: var(--lpd-ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.lpd-seg button svg { width: 14px; height: 14px; }
.lpd-seg button[aria-selected="true"] { background: var(--lpd-surface); color: var(--lpd-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
[data-theme="dark"] .lpd-seg button[aria-selected="true"] { background: var(--lpd-line-strong); }
.lpd-sheet__head .lpd-icon-btn { margin-left: auto; }

.lpd-sheet__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Members strip (shared by voice + chat) */
.lpd-members-strip {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--lpd-line); background: var(--lpd-surface-2);
}
.lpd-stack { display: flex; }
.lpd-stack .lpd-avatar { width: 24px; height: 24px; font-size: 10px; border: 2px solid var(--lpd-surface); margin-left: -7px; }
.lpd-stack .lpd-avatar:first-child { margin-left: 0; }
.lpd-members-strip__txt { font-size: 12px; color: var(--lpd-ink-soft); }
.lpd-members-strip__txt b { color: var(--lpd-ink); font-weight: 600; }

/* ---- VOICE bar — opt-in Start/Join affordance (not a tab) — req 3 --- */
.lpd-voicebar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--lpd-line); background: var(--lpd-surface);
  font-size: 12.5px; color: var(--lpd-ink-soft);
}
.lpd-voicebar.is-live { background: color-mix(in srgb, var(--lpd-ok) 7%, var(--lpd-surface)); }
.lpd-voicebar.lpd-pulse { animation: lpd-voicebar-pulse 1s ease; }
@keyframes lpd-voicebar-pulse { 0%,100% { background: var(--lpd-surface); } 40% { background: var(--lpd-accent-soft); } }
.lpd-voicebar__l { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.lpd-voicebar__l b { color: var(--lpd-ink); font-weight: 600; }
.lpd-voicebar__l span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpd-voicebar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lpd-ink-faint); flex: none; }
.lpd-voicebar__l.is-live .lpd-voicebar__dot { background: var(--lpd-ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lpd-ok) 55%, transparent); animation: lpd-live 1.6s ease-out infinite; }
@keyframes lpd-live { 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--lpd-ok) 55%, transparent);} 70%{box-shadow:0 0 0 7px rgba(22,163,74,0);} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0);} }
.lpd-btn--sm { padding: 6px 11px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.lpd-btn--sm svg { width: 13px; height: 13px; }

/* mini equalizer reused in the voicebar "you're in voice" state */
.lpd-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.lpd-eq span { width: 3px; background: var(--lpd-ok); border-radius: 2px; height: 40%; animation: lpd-eq .9s ease-in-out infinite; }
.lpd-eq span:nth-child(2){ animation-delay: .15s; } .lpd-eq span:nth-child(3){ animation-delay: .3s; }
.lpd-eq--mini { height: 11px; margin-left: 4px; vertical-align: middle; }
@keyframes lpd-eq { 0%,100%{ height: 25%; } 50%{ height: 100%; } }

/* ---- CHAT pane ---- */
.lpd-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lpd-chat__stream { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.lpd-msg { display: flex; gap: 9px; align-items: flex-start; }
.lpd-msg__body { min-width: 0; }
.lpd-msg__meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.lpd-msg__meta b { font-size: 12.5px; font-weight: 650; }
.lpd-msg__meta time { font-size: 10.5px; color: var(--lpd-ink-faint); }
.lpd-msg__text { font-size: 13px; line-height: 1.5; color: var(--lpd-ink); }
.lpd-msg--me { flex-direction: row-reverse; }
.lpd-msg--me .lpd-msg__meta { flex-direction: row-reverse; }
.lpd-msg--me .lpd-msg__text {
  background: var(--lpd-accent); color: #fff; padding: 7px 10px; border-radius: 12px 12px 4px 12px;
}
.lpd-msg--me .lpd-msg__body { text-align: right; }
.lpd-msg:not(.lpd-msg--me) .lpd-msg__text {
  background: var(--lpd-surface-2); padding: 7px 10px; border-radius: 12px 12px 12px 4px;
}

.lpd-chat__compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--lpd-line); }
.lpd-chat__compose input {
  flex: 1; font: inherit; font-size: 13.5px; color: var(--lpd-ink);
  background: var(--lpd-surface-2); border: 1px solid var(--lpd-line); border-radius: 999px; padding: 9px 14px;
}
.lpd-chat__compose input::placeholder { color: var(--lpd-ink-faint); }
.lpd-chat__compose input:focus { outline: none; border-color: var(--lpd-accent); box-shadow: 0 0 0 3px var(--lpd-accent-ring); background: var(--lpd-surface); }
.lpd-chat__send {
  width: 38px; height: 38px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  background: var(--lpd-accent); color: #fff; display: grid; place-items: center;
}
.lpd-chat__send:hover { background: var(--lpd-accent-hover); }
.lpd-chat__send:disabled { opacity: .5; cursor: not-allowed; }
.lpd-chat__send svg { width: 17px; height: 17px; }

/* On phones the panel is a BOTTOM SHEET spanning the width — req 8 */
@media (max-width: 640px) {
  .lpd-sheet,
  .lpd-sheet--right, .lpd-sheet--left {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto; max-width: none;
    height: 70vh; max-height: 86vh; min-height: 220px;
    border-radius: 16px 16px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    transform-origin: bottom center;
    animation: lpd-bottomsheet-in .24s cubic-bezier(.2,.9,.25,1) both;
  }
  @keyframes lpd-bottomsheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
  /* flip control is meaningless for a full-width bottom sheet — hide it */
  .lpd-sheet [data-flip] { display: none; }
  .lpd-resize { display: none; } /* resize via drag is desktop-only; sheet uses fixed 70vh */
}

/* =====================================================================
   CHEATSHEET
   ===================================================================== */
.lpd-cheats {
  position: fixed; inset: 0; z-index: 2147483600; pointer-events: auto;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, #0b0e12 52%, transparent);
  backdrop-filter: blur(2px);
  animation: lpd-fade .14s ease both;
}
@keyframes lpd-fade { from { opacity: 0; } to { opacity: 1; } }
.lpd-cheats[hidden] { display: none; }
.lpd-cheats__card {
  width: min(520px, 100%); background: var(--lpd-surface); color: var(--lpd-ink);
  border: 1px solid var(--lpd-line); border-radius: 14px; box-shadow: var(--lpd-elevate-lg);
  animation: lpd-callout-in .18s ease both;
}
.lpd-cheats__card header { display: flex; align-items: center; padding: 16px 18px 12px; border-bottom: 1px solid var(--lpd-line); }
.lpd-cheats__card header h2 { margin: 0; font-size: 16px; font-weight: 650; }
.lpd-cheats__card header .lpd-icon-btn { margin-left: auto; }
.lpd-cheats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; padding: 16px 18px; }
.lpd-cheats__grid > div { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--lpd-ink-soft); }
.lpd-cheats__grid kbd {
  min-width: 30px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--lpd-ink);
  border: 1px solid var(--lpd-line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px;
  background: var(--lpd-surface-2);
}
.lpd-cheats__card footer { padding: 12px 18px 16px; font-size: 12.5px; color: var(--lpd-ink-faint); border-top: 1px solid var(--lpd-line); }

/* =====================================================================
   v2 — MARKUP SUB-TOOLBAR (pen / rect / circle / arrow + Done)
   ===================================================================== */
.lpd-markup {
  position: fixed; z-index: 2147483200; pointer-events: auto;
  display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 12px;
  background: color-mix(in srgb, var(--lpd-surface) 94%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--lpd-line); box-shadow: var(--lpd-elevate-lg);
  opacity: 0; transform: translateY(6px) scale(.97); pointer-events: none;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,.85,.2,1);
}
.lpd-markup.is-on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lpd-markup__label { font-size: 11px; font-weight: 700; color: var(--lpd-ink-faint); padding: 0 6px 0 4px; letter-spacing: .02em; }
.lpd-markup__sep { width: 1px; align-self: stretch; margin: 3px 2px; background: var(--lpd-line); }
.lpd-shape-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--lpd-ink); cursor: pointer; transition: background .12s ease, color .12s ease;
}
.lpd-shape-btn svg { width: 18px; height: 18px; }
.lpd-shape-btn:hover { background: var(--lpd-surface-2); }
.lpd-shape-btn[aria-pressed="true"] { background: var(--lpd-accent-soft); color: var(--lpd-accent); }
.lpd-shape-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lpd-accent-ring); }
.lpd-markup__done {
  margin-left: 2px; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; border: none;
  background: var(--lpd-accent); color: #fff; transition: background .12s ease;
}
.lpd-markup__done:hover { background: var(--lpd-accent-hover); }
.lpd-markup__done svg { width: 14px; height: 14px; }

/* v3 — stroke-WIDTH control (one width for the active tool) */
.lpd-markup__width { display: inline-flex; align-items: center; gap: 1px; }
.lpd-markup__wbtn {
  width: 24px; height: 30px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: var(--lpd-ink-soft); cursor: pointer; font: inherit; font-size: 15px; font-weight: 700;
  transition: background .12s ease, color .12s ease;
}
.lpd-markup__wbtn:hover { background: var(--lpd-surface-2); color: var(--lpd-ink); }
.lpd-markup__wval {
  min-width: 30px; text-align: center; font-size: 11px; font-weight: 700; color: var(--lpd-ink);
  font-variant-numeric: tabular-nums;
}

/* v3 — COLOUR picker: exactly three (green / red / blue) */
.lpd-markup__colors { display: inline-flex; align-items: center; gap: 4px; padding: 0 2px; }
.lpd-swatch {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid var(--lpd-surface);
  box-shadow: 0 0 0 1px var(--lpd-line-strong);
  transition: transform .12s ease, box-shadow .12s ease;
}
.lpd-swatch:hover { transform: scale(1.08); }
.lpd-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--lpd-surface), 0 0 0 4px currentColor; }
.lpd-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--lpd-surface), 0 0 0 4px var(--lpd-accent-ring); }
.lpd-swatch--green { background: #16a34a; color: #16a34a; }
.lpd-swatch--red   { background: #dc2626; color: #dc2626; }
.lpd-swatch--blue  { background: #2563eb; color: #2563eb; }

/* markup shapes carry their own stroke colour/width (set inline by JS).
   These just supply fill:none + line joins so shapes render cleanly. */
.lpd-markup-svg rect, .lpd-markup-svg ellipse, .lpd-markup-svg path {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.lpd-markup-svg g path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* region/lasso keep the accent treatment */
.lpd-shape-svg:not(.lpd-markup-svg) path { stroke: var(--lpd-accent); }

/* markup bar scrolls horizontally on a phone so it never overflows */
@media (max-width: 640px) {
  .lpd-markup {
    left: 8px !important; right: 8px !important; bottom: 64px !important; top: auto !important;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  .lpd-markup::-webkit-scrollbar { display: none; }
  .lpd-markup__label { display: none; }
  .lpd-shape-btn, .lpd-swatch, .lpd-markup__wbtn, .lpd-markup__done { flex: none; }
}

/* =====================================================================
   v2 — FLOATING CANCEL CHIP (visible cancel during capture/markup)
   ===================================================================== */
.lpd-cancelchip {
  position: fixed; left: 50%; top: 18px; transform: translate(-50%, -10px);
  z-index: 2147483300; pointer-events: auto; opacity: 0;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: var(--lpd-surface); border: 1px solid var(--lpd-line);
  box-shadow: var(--lpd-elevate); font-size: 12.5px; font-weight: 550; color: var(--lpd-ink);
  transition: opacity .16s ease, transform .16s ease;
}
.lpd-cancelchip.is-on { opacity: 1; transform: translate(-50%, 0); }
.lpd-cancelchip button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--lpd-line); background: var(--lpd-surface-2); color: var(--lpd-ink);
  border-radius: 999px; padding: 4px 10px; transition: border-color .12s ease, background .12s ease;
}
.lpd-cancelchip button:hover { border-color: #e5484d; color: #e5484d; background: color-mix(in srgb, #e5484d 10%, transparent); }
.lpd-cancelchip kbd { font-size: 9.5px; font-weight: 700; border: 1px solid var(--lpd-line-strong); border-radius: 4px; padding: 1px 4px; background: var(--lpd-surface); color: var(--lpd-ink-faint); }

/* =====================================================================
   v2 — ANCHOR DOT (locator for region/lasso/markup comments on Select)
   ===================================================================== */
.lpd-anchor-dot {
  position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--lpd-accent); border: 2.5px solid var(--lpd-surface);
  box-shadow: 0 2px 6px rgba(16,22,28,.3); pointer-events: auto; cursor: pointer; z-index: 5;
  animation: lpd-pin-in .26s cubic-bezier(.2,1.2,.3,1) both;
}
.lpd-anchor-dot:hover { filter: brightness(1.05); }
.lpd-thread__tag { font-size: 10px; font-weight: 700; color: var(--lpd-accent);
  background: var(--lpd-accent-soft); padding: 1.5px 6px; border-radius: 999px; margin-left: auto; }

/* =====================================================================
   v2 — SHEET: side variants + flip + collapse
   ===================================================================== */
.lpd-sheet__ctl { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; }
.lpd-sheet--right { right: 22px; left: auto; }
.lpd-sheet--left  { left: 22px; right: auto; transform-origin: bottom left; }
.lpd-sheet.lpd-flip { animation: lpd-sheet-flip .26s cubic-bezier(.2,.9,.25,1); }
@keyframes lpd-sheet-flip { 0% { opacity: .5; transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
/* collapsed: just the header bar remains */
.lpd-sheet.is-collapsed .lpd-members-strip,
.lpd-sheet.is-collapsed .lpd-voicerow,
.lpd-sheet.is-collapsed .lpd-seg--scope,
.lpd-sheet.is-collapsed .lpd-sheet__body { display: none; }
.lpd-sheet.is-collapsed { max-height: none; height: auto !important; }

@media (max-width: 640px) {
  .lpd-sheet--right, .lpd-sheet--left { left: 12px; right: 12px; }
}

/* =====================================================================
   v3 — DICTATION (speech-to-text) mic in the comment box (req 9)
   ===================================================================== */
.lpd-field-wrap { position: relative; }
.lpd-field-wrap .lpd-field { padding-right: 42px; } /* room for the mic */
.lpd-mic {
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--lpd-line); border-radius: 8px;
  background: var(--lpd-surface); color: var(--lpd-ink-soft);
  cursor: pointer; transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.lpd-mic svg { width: 16px; height: 16px; }
.lpd-mic .lpd-mic__off { display: none; }
.lpd-mic:hover { color: var(--lpd-accent); border-color: var(--lpd-accent-ring); }
.lpd-mic:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lpd-accent-ring); }
.lpd-mic.is-on {
  background: var(--lpd-accent); color: #fff; border-color: var(--lpd-accent);
  animation: lpd-mic-pulse 1.3s ease-out infinite;
}
@keyframes lpd-mic-pulse { 0%{ box-shadow: 0 0 0 0 var(--lpd-accent-ring);} 70%{ box-shadow: 0 0 0 8px rgba(37,99,235,0);} 100%{ box-shadow: 0 0 0 0 rgba(37,99,235,0);} }
/* hand-off = dictating while in a call: the call is paused (you're muted),
   the mic owns your voice. Amber to read as "borrowed from the call". */
.lpd-mic.is-on.is-handoff { background: var(--lpd-warn); border-color: var(--lpd-warn);
  animation: lpd-mic-pulse-amber 1.3s ease-out infinite; }
@keyframes lpd-mic-pulse-amber { 0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--lpd-warn) 45%, transparent);} 70%{ box-shadow: 0 0 0 8px rgba(217,119,6,0);} 100%{ box-shadow: 0 0 0 0 rgba(217,119,6,0);} }
.lpd-dictation.is-handoff { background: color-mix(in srgb, var(--lpd-warn) 14%, var(--lpd-surface)); color: var(--lpd-warn); }
.lpd-dictation.is-handoff .lpd-dictation__wave i { background: var(--lpd-warn); }

.lpd-dictation {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 7px 10px; border-radius: var(--lpd-radius);
  background: var(--lpd-accent-soft); color: var(--lpd-accent);
  font-size: 12px; font-weight: 600;
}
.lpd-dictation__live { display: inline-flex; align-items: center; gap: 8px; flex: 1; }
.lpd-dictation button {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--lpd-accent-ring); background: var(--lpd-surface); color: var(--lpd-accent);
  border-radius: 999px; padding: 3px 10px;
}
.lpd-dictation__wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.lpd-dictation__wave i { width: 3px; background: var(--lpd-accent); border-radius: 2px; height: 40%; animation: lpd-eq .8s ease-in-out infinite; }
.lpd-dictation__wave i:nth-child(2){ animation-delay:.1s } .lpd-dictation__wave i:nth-child(3){ animation-delay:.2s }
.lpd-dictation__wave i:nth-child(4){ animation-delay:.3s } .lpd-dictation__wave i:nth-child(5){ animation-delay:.4s }

/* in-call note inside the comment box (req 10) */
.lpd-callout__callnote {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px;
  padding: 8px 10px; border-radius: var(--lpd-radius);
  background: color-mix(in srgb, var(--lpd-ok) 9%, var(--lpd-surface));
  border: 1px solid color-mix(in srgb, var(--lpd-ok) 30%, var(--lpd-line));
  font-size: 11.5px; line-height: 1.45; color: var(--lpd-ink-soft);
}
.lpd-callout__callnote svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--lpd-ok); }
.lpd-callout__callnote button {
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--lpd-accent);
  background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline;
}

/* =====================================================================
   v3 — PEOPLE rows double as FOLLOW (req 2)
   ===================================================================== */
.lpd-pop__hint { margin: 0; padding: 8px 14px 4px; font-size: 11.5px; color: var(--lpd-ink-faint); }
.lpd-member__follow {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--lpd-ink-faint);
  border: 1px solid var(--lpd-line-strong); border-radius: 999px; padding: 3px 9px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.lpd-member:hover .lpd-member__follow { color: var(--lpd-accent); border-color: var(--lpd-accent-ring); }
.lpd-member__follow.is-on { color: #fff; background: var(--lpd-accent); border-color: var(--lpd-accent); }
.lpd-member.is-following { background: var(--lpd-accent-soft); }

/* =====================================================================
   v3 — SELECT mode: existing annotations are draggable (req 7)
   ===================================================================== */
.lpd-canvas.is-selecting { pointer-events: none; }
.lpd-canvas.is-selecting .lpd-pin,
.lpd-canvas.is-selecting .lpd-anchor-dot { pointer-events: auto; cursor: grab; }
.lpd-pin.is-grabbing, .lpd-anchor-dot.is-grabbing { cursor: grabbing; }
.lpd-canvas.is-selecting .lpd-pin:hover,
.lpd-canvas.is-selecting .lpd-anchor-dot:hover { filter: brightness(1.05); }
/* a subtle move-affordance ring on hover in select mode */
.lpd-canvas.is-selecting .lpd-anchor-dot:hover { box-shadow: 0 2px 6px rgba(16,22,28,.3), 0 0 0 4px var(--lpd-accent-ring); }

/* =====================================================================
   v3.x — ⋯ "MORE" MENU in the command bar (Theme + Help; extensible)
   ===================================================================== */
.lpd-more { position: relative; display: inline-flex; }
.lpd-more__menu {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 5;
  min-width: 196px; padding: 5px;
  background: var(--lpd-surface); border: 1px solid var(--lpd-line);
  border-radius: 12px; box-shadow: var(--lpd-elevate-lg);
  display: flex; flex-direction: column; gap: 2px;
  transform-origin: bottom right; animation: lpd-more-in .15s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes lpd-more-in { from { opacity: 0; transform: translateY(6px) scale(.97);} to { opacity:1; transform: translateY(0) scale(1);} }
.lpd-more__menu[hidden] { display: none; }
.lpd-more__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; border-radius: 8px; border: none; background: transparent;
  color: var(--lpd-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  text-align: left; transition: background .12s ease;
}
.lpd-more__item:hover { background: var(--lpd-surface-2); }
.lpd-more__item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lpd-accent-ring); }
.lpd-more__ic { display: grid; place-items: center; width: 18px; height: 18px; color: var(--lpd-ink-soft); }
.lpd-more__ic svg { width: 17px; height: 17px; }
.lpd-more__label { flex: 1; }
.lpd-more__item kbd {
  font-size: 10px; font-weight: 700; color: var(--lpd-ink-faint);
  border: 1px solid var(--lpd-line-strong); border-radius: 4px; padding: 1.5px 5px; background: var(--lpd-surface-2);
}
/* theme glyph swaps inside the menu just like the old bar button did */
.lpd-more__ic .lpd-icon-sun { display: none; } .lpd-more__ic .lpd-icon-moon { display: block; }
[data-theme="dark"] .lpd-more__ic .lpd-icon-sun { display: block; } [data-theme="dark"] .lpd-more__ic .lpd-icon-moon { display: none; }

/* =====================================================================
   v3.x — VOICE ROW at the top of the combined panel
   (avatars in-call · Join/Leave · mute · transmitting · active speaker)
   ===================================================================== */
.lpd-voicerow {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--lpd-line); background: var(--lpd-surface);
  min-height: 48px;
}
.lpd-voicerow.is-live { background: color-mix(in srgb, var(--lpd-ok) 7%, var(--lpd-surface)); }
.lpd-voicerow.lpd-pulse { animation: lpd-voicebar-pulse 1s ease; }
.lpd-voicerow__l { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.lpd-voicerow__r { display: flex; align-items: center; gap: 4px; flex: none; }
.lpd-voicerow__icon { display: grid; place-items: center; width: 18px; height: 18px; color: var(--lpd-ink-soft); }
.lpd-voicerow__icon svg { width: 17px; height: 17px; }
.lpd-voicerow__txt { font-size: 12.5px; color: var(--lpd-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpd-voicerow__live { display: grid; place-items: center; flex: none; }

/* in-call avatar cluster */
.lpd-vc-avs { display: inline-flex; align-items: center; }
.lpd-vc-av { position: relative; margin-left: -6px; border-radius: 50%; }
.lpd-vc-av:first-child { margin-left: 0; }
.lpd-vc-av .lpd-avatar {
  width: 28px; height: 28px; font-size: 10px;
  border: 2px solid var(--lpd-surface);
  box-shadow: 0 0 0 0 transparent; transition: box-shadow .15s ease, transform .15s ease;
}
.lpd-voicerow.is-live .lpd-vc-av .lpd-avatar { border-color: color-mix(in srgb, var(--lpd-ok) 7%, var(--lpd-surface)); }
/* ACTIVE SPEAKER: ring + slight pop on the talker's avatar */
.lpd-vc-av.is-speaking .lpd-avatar {
  box-shadow: 0 0 0 2px var(--lpd-surface), 0 0 0 4px var(--lpd-ok);
  transform: translateY(-1px) scale(1.05);
}
.lpd-vc-av.is-muted .lpd-avatar { filter: saturate(.6) opacity(.85); }
.lpd-vc-av__mute {
  position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--lpd-warn); color: #fff; border: 1.5px solid var(--lpd-surface);
}
.lpd-vc-av__mute svg { width: 9px; height: 9px; }

/* TRANSMITTING indicator (distinct from merely joined) */
.lpd-tx {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 4px;
  font-size: 11px; font-weight: 650; color: var(--lpd-ink-faint);
  padding: 2px 8px; border-radius: 999px; background: var(--lpd-surface-2);
  white-space: nowrap;
}
.lpd-tx.is-on { color: var(--lpd-ok); background: color-mix(in srgb, var(--lpd-ok) 14%, transparent); }
.lpd-tx.is-muted { color: var(--lpd-warn); background: color-mix(in srgb, var(--lpd-warn) 14%, transparent); }
.lpd-tx.is-listen { color: var(--lpd-ink-faint); }
.lpd-tx__dots { display: inline-flex; align-items: flex-end; gap: 2px; height: 9px; }
.lpd-tx__dots i { width: 2.5px; background: var(--lpd-ok); border-radius: 2px; height: 40%; animation: lpd-eq .8s ease-in-out infinite; }
.lpd-tx__dots i:nth-child(2){ animation-delay:.12s } .lpd-tx__dots i:nth-child(3){ animation-delay:.24s }

/* small icon toggle used for mute inside the voice row */
.lpd-iconbtn-sm {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--lpd-line); border-radius: 8px; background: var(--lpd-surface);
  color: var(--lpd-ink-soft); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.lpd-iconbtn-sm svg { width: 16px; height: 16px; }
.lpd-iconbtn-sm:hover { color: var(--lpd-ink); background: var(--lpd-surface-2); }
.lpd-iconbtn-sm.is-on { color: #fff; background: var(--lpd-warn); border-color: var(--lpd-warn); }
.lpd-iconbtn-sm:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lpd-accent-ring); }

/* the voice "empty / start" CTA + mute glyph in roster (older selectors kept harmless) */
.lpd-voicerow .lpd-btn--sm svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  /* on a phone, let the avatar cluster shrink and keep controls reachable */
  .lpd-voicerow__txt { display: none; }
  .lpd-more__menu { right: auto; left: 0; }
}

/* Utility */
.lpd-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }