:root {
  --bg: #f4f3ee;
  --dot: #cfcdc4;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-border: rgba(0, 0, 0, 0.08);
  --ink: #1d1c1a;
  --muted: #7a776f;
  --accent: #2f6df6;                 /* selection, handles, links */
  --accent-soft: rgba(47, 109, 246, 0.14);
  --lime: #9ef01a;                   /* brand: neon lime */
  --lime-deep: #5bb300;              /* lime for text / icons on white */
  --lime-ink: #12210a;               /* text on lime */
  --lime-soft: rgba(158, 240, 26, 0.22);
  --lime-glow: 0 0 0 3px rgba(158, 240, 26, 0.35);
  --lemon: #ffd83d;
  --lemon-soft: rgba(255, 216, 61, 0.35);
  --danger: #d9433b;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.10);
  --radius: 12px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------------------------------------------------------------- viewport */
#viewport {
  position: fixed; inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  cursor: default;
}
#viewport.tool-hand { cursor: grab; }
#viewport.panning { cursor: grabbing !important; }
#viewport.tool-pen, #viewport.tool-laser { cursor: crosshair; }
#viewport.tool-text { cursor: text; }
#viewport.tool-note, #viewport.tool-rect, #viewport.tool-ellipse, #viewport.tool-line { cursor: crosshair; }

#world {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* ---------------------------------------------------------------- items */
.item {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  box-sizing: border-box;
}
.item.selected { outline: 1.5px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.item.locked.selected { outline-style: dashed; }
.item.remote-drawing { opacity: .85; pointer-events: none; }

.item svg.stroke { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.item svg.stroke path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.item .shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.item.kind-note {
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 14px rgba(0,0,0,.10);
  border-radius: 3px;
  background: #fff4a3;
}
.item.kind-note, .item.kind-text { display: flex; flex-direction: column; justify-content: flex-start; }
.item.kind-note .text, .item.kind-text .text {
  width: 100%; height: auto; max-height: 100%; flex: none;
  display: block;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  line-height: 1.3;
  cursor: inherit;
}
.item.kind-note .text { font-size: 18px; }
.item.kind-text .text { font-size: 22px; font-weight: 500; }
.item .text.editing { cursor: text; user-select: text; -webkit-user-select: text; }
.item .text:empty::before { content: attr(data-placeholder); color: rgba(0,0,0,.35); }

.item.kind-image { overflow: hidden; border-radius: 4px; background: rgba(0,0,0,.04); }
.item.kind-image img, .item.kind-image video {
  width: 100%; height: 100%; display: block; object-fit: fill;
  pointer-events: none; -webkit-user-drag: none;
}
.item.kind-image .badge {
  position: absolute; left: 6px; bottom: 6px;
  font: 600 10px/1 var(--mono); letter-spacing: .06em;
  background: rgba(0,0,0,.6); color: #fff;
  padding: 4px 6px; border-radius: 4px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.item.kind-image:hover .badge, .item.kind-image.selected .badge { opacity: 1; }
.item.kind-image .badge.paused { opacity: 1; background: rgba(0,0,0,.45); }

.item.kind-embed {
  border-radius: 8px; overflow: hidden;
  background: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.14);
}
.item.kind-embed iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.item.kind-embed .cover {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 10px;
  color: #fff; font-size: 12px; font-weight: 600;
  background: linear-gradient(transparent 70%, rgba(0,0,0,.45));
  opacity: 0; transition: opacity .15s;
}
.item.kind-embed:hover .cover { opacity: 1; }
.item.kind-embed .cover span {
  background: rgba(0,0,0,.6); padding: 6px 10px; border-radius: 999px;
}
.item.kind-embed.active .cover { display: none; }
.item.kind-embed .grab {
  position: absolute; left: 0; right: 0; top: 0; height: 22px;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px; cursor: move;
}
.item.kind-embed.active .grab { display: flex; }
.item.kind-embed.active { outline-color: #f5c518; }

/* resize handles live in screen space */
#handles { position: absolute; left: 0; top: 0; pointer-events: none; }
#handles .h {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: #fff; border: 1.5px solid var(--accent); border-radius: 2px;
  pointer-events: auto;
}
#handles .h.nw, #handles .h.se { cursor: nwse-resize; }
#handles .h.ne, #handles .h.sw { cursor: nesw-resize; }
#handles .h.n, #handles .h.s { cursor: ns-resize; }
#handles .h.e, #handles .h.w { cursor: ew-resize; }
#handles .h.end { border-radius: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; cursor: crosshair; }
#handles .h.end.attached { background: var(--accent); }
#handles .port {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--accent); cursor: crosshair; pointer-events: auto; opacity: .85;
  transition: transform .1s;
}
#handles .port:hover { transform: scale(1.5); background: var(--accent); }
#handles .tport {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--accent); pointer-events: none;
}
#handles .tport.hot { background: var(--accent); transform: scale(1.5); }

/* connectors: only the line itself is clickable, not its bounding box */
.item.kind-connector { pointer-events: none; }
.item.kind-connector svg.conn { overflow: visible; }
.item.kind-connector .hit { stroke: transparent; pointer-events: stroke; cursor: pointer; }
.item.kind-connector.selected { outline: none; }
.item.kind-connector.selected .hit { stroke: var(--accent-soft); }

#marquee {
  position: absolute; display: none;
  border: 1px solid var(--accent); background: var(--accent-soft);
  pointer-events: none;
}

/* ---------------------------------------------------------------- cursors */
#cursors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cursor {
  position: absolute; left: 0; top: 0;
  transition: transform 70ms linear;
  will-change: transform;
}
.cursor svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.cursor .tag {
  position: absolute; left: 14px; top: 16px;
  padding: 3px 7px; border-radius: 999px;
  color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#laser { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#laser path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- chrome */
.hud { position: fixed; z-index: 20; display: flex; gap: 8px; }
.panel {
  background: var(--panel);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#topleft { left: 14px; top: 14px; align-items: center; }
#topright { right: 14px; top: 14px; align-items: center; }
#bottom { left: 50%; bottom: 16px; transform: translateX(-50%); align-items: flex-end; }
#bottomright { right: 14px; bottom: 16px; }

#status { width: 8px; height: 8px; border-radius: 50%; background: #c9c7bf; flex: none; margin-right: 2px; }
#status.ok { background: var(--lime); }
#status.bad { background: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

#peers { display: flex; align-items: center; padding: 5px 8px; gap: -4px; }
#peers .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700;
  border: 2px solid #fff; margin-left: -6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
#peers .avatar:first-child { margin-left: 0; }
#peers .avatar.me { outline: 2px solid var(--ink); outline-offset: -1px; }
#peers .count { margin-left: 8px; font-size: 12px; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 9px;
  border: 1px solid transparent; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.btn:hover { background: rgba(0,0,0,.05); }
.btn.primary { background: var(--lime); color: var(--lime-ink); }
.btn.primary:hover { background: #63b51f; }
.btn.primary:disabled { opacity: .5; }
.btn.icon { width: 36px; padding: 0; }
.btn svg { width: 18px; height: 18px; }
svg.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn.danger { color: var(--danger); }
.panel > .btn { border-radius: 9px; }

/* toolbar */
#toolbar { display: flex; align-items: center; padding: 6px; gap: 2px; }
#toolbar .sep { width: 1px; height: 24px; background: var(--panel-border); margin: 0 4px; }
#toolbar .tool { width: 38px; height: 38px; border-radius: 9px; position: relative; }
#toolbar .tool.active { background: var(--lime); color: var(--lime-ink); }
#toolbar .tool kbd {
  position: absolute; right: 3px; bottom: 2px;
  font: 500 9px/1 var(--mono); color: inherit; opacity: .5;
}
#toolbar .tool.active kbd { opacity: .7; }

/* style strip (above toolbar) */
#stylebar {
  display: none; align-items: center; gap: 6px; padding: 6px 8px;
  position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%);
}
#stylebar.show { display: flex; }
#stylebar .swatches { display: flex; gap: 4px; }
.swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  padding: 0;
}
.swatch.active { box-shadow: 0 0 0 2px var(--lime-deep); }
.swatch.custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.swatch.none { background: #fff linear-gradient(135deg, transparent 44%, var(--danger) 44%, var(--danger) 56%, transparent 56%); }
.fillctl { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--panel-border); }
.fillctl .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fillctl .swatches { display: flex; gap: 3px; }
.fillctl input[type=range] { width: 60px; accent-color: var(--ink); }
#selbar .fillctl .swatch { width: 18px; height: 18px; }
.swatch.custom input { position: absolute; inset: -10px; opacity: 0; cursor: pointer; }
#stylebar input[type=range] { width: 90px; accent-color: var(--ink); }
#stylebar label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
#stylebar select, .sel-bar select {
  height: 30px; border-radius: 7px; border: 1px solid var(--panel-border); background: #fff; padding: 0 6px; font-size: 13px;
}

/* selection action bar */
#selbar {
  position: fixed; z-index: 21; display: none; align-items: center; gap: 2px; padding: 4px;
  transform: translate(-50%, calc(-100% - 10px));
}
#selbar.show { display: flex; }
#selbar.below { transform: translate(-50%, 12px); }
#selbar .btn { height: 32px; }
#selbar .btn.icon { width: 32px; }
#selbar .swatches { display: flex; gap: 3px; padding: 0 4px; }
#selbar .swatch { width: 18px; height: 18px; }
#selbar .ctl { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; color: var(--muted); }
#selbar .ctl input[type=range] { width: 70px; accent-color: var(--ink); }
#selbar .ctl select, #stylebar .caps select { height: 28px; font-size: 12px; }
#arrangeMenu {
  position: fixed; z-index: 22; display: none; align-items: center; gap: 10px; padding: 6px 10px;
  left: 50%; top: 68px; transform: translate(-50%, -100%);
}
#arrangeMenu.show { display: flex; }
#arrangeMenu .grp { display: flex; align-items: center; gap: 1px; }
#arrangeMenu .grp > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 6px; }
#arrangeMenu .btn.icon { width: 30px; height: 30px; }
#snapBtn.on { background: var(--ink); color: #fff; }
#zoom .sep { width: 1px; height: 22px; background: var(--panel-border); margin: 0 4px; }

/* zoom */
#zoom { display: flex; align-items: center; padding: 4px; }
#zoom .pct { min-width: 54px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 128px; transform: translateX(-50%) translateY(12px);
  z-index: 50; padding: 10px 14px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: all .2s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* help */

/* ---------------------------------------------------------------- modals / join */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(244, 243, 238, 0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.overlay[hidden] { display: none; }
.card {
  width: min(420px, calc(100vw - 32px));
  padding: 28px 28px 24px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.14);
}
.card h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
.card h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.card p.sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; }
.field input, .field textarea {
  height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,.12); background: #fafaf8; outline: none;
  font-size: 16px;
}
.field input:focus { border-color: var(--ink); background: #fff; }
.field input.code { font-family: var(--mono); letter-spacing: .25em; text-transform: uppercase; }
.card .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.card .btn { height: 42px; padding: 0 18px; }
.err { color: var(--danger); font-size: 13px; min-height: 18px; margin: -6px 0 10px; }
.drop-hint {
  position: fixed; inset: 12px; z-index: 90; border: 2px dashed var(--accent); border-radius: 16px;
  background: rgba(47,109,246,.06); display: none; place-items: center; font-weight: 600; color: var(--accent);
  pointer-events: none;
}
.drop-hint.show { display: grid; }

/* ---------------------------------------------------------------- admin page */
body.admin { overflow: auto; }
.admin-wrap { max-width: 760px; margin: 48px auto; padding: 0 20px; }
.admin-wrap h1 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 4px; }
.admin-wrap .sub { color: var(--muted); margin: 0 0 24px; }
.admin-wrap .row { display: flex; gap: 8px; align-items: center; }
.admin-wrap .row input { flex: 1; }
table.rooms { width: 100%; border-collapse: collapse; margin-top: 20px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
table.rooms th, table.rooms td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--panel-border); font-size: 14px; }
table.rooms th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: #fafaf8; }
table.rooms tr:last-child td { border-bottom: 0; }
table.rooms .code { font-family: var(--mono); letter-spacing: .12em; font-weight: 600; }
table.rooms .muted { color: var(--muted); }
table.rooms td.actions { white-space: nowrap; text-align: right; }
table.rooms .btn { height: 30px; padding: 0 10px; font-size: 12px; }

/* narrow windows: the toolbar and the zoom panel must not collide */
@media (max-width: 980px) {
  #zoom .pct, #zoom #zoomFit { display: none; }
}
@media (max-width: 820px) {
  #bottom { left: 14px; right: 14px; transform: none; justify-content: flex-start; }
  #bottomright { bottom: 76px; }
  #toolbar { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #toolbar::-webkit-scrollbar { display: none; }
  #toolbar .tool { width: 34px; height: 34px; flex: none; }
  #toolbar .tool kbd { display: none; }
  #peers .count { display: none; }
}

/* ---------------------------------------------------------------- pages & tags */
#navBtn { padding: 0 10px 0 12px; gap: 6px; height: 44px; max-width: 240px; }
#shareBtn { height: 44px; width: 44px; }
#navBtn .cur { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
#nav {
  position: fixed; left: 14px; top: 66px; z-index: 25; width: 280px; max-height: calc(100vh - 100px);
  display: none; flex-direction: column; overflow: hidden;
}
#nav.show { display: flex; }
#nav .nav-head, #nav .nav-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; }
#nav .nav-head span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
#nav .nav-foot { border-top: 1px solid var(--panel-border); gap: 8px; }
#nav .nav-foot .hint { font-size: 11px; color: var(--muted); }
#nav .nav-foot kbd { font-family: var(--mono); background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }
#nav .btn { height: 30px; padding: 0 10px; font-size: 12px; }
#pageList { list-style: none; margin: 0; padding: 0 6px 6px; overflow: auto; }
#pageList li.page { display: flex; align-items: center; border-radius: 8px; }
#pageList li.page.active { background: var(--lime-soft); box-shadow: inset 3px 0 0 var(--lime); }
#pageList li.page:hover .mini { opacity: 1; }
#pageList .go {
  flex: 1; display: flex; align-items: center; gap: 8px; text-align: left; height: 34px; padding: 0 8px;
  border: 0; background: transparent; border-radius: 8px; font-size: 14px; font-weight: 550;
}
#pageList .go:hover { background: rgba(0,0,0,.04); }
#pageList .go .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pageList .go .cnt { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
#pageList .mini { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 6px; color: var(--muted); opacity: 0; display: inline-grid; place-items: center; }
#pageList .mini .ic { width: 14px; height: 14px; }
#pageList .mini:hover { background: rgba(0,0,0,.06); color: var(--ink); opacity: 1; }
#pageList ul.tags { list-style: none; margin: 0 0 4px; padding: 0 0 0 14px; }
#pageList ul.tags li { display: flex; align-items: center; }
#pageList ul.tags li:hover .mini { opacity: 1; }
#pageList ul.tags .go { height: 28px; font-size: 13px; font-weight: 500; color: #4a4843; }
#pageList ul.tags .go svg { width: 14px; height: 14px; color: var(--lime-deep); }

.item.kind-bookmark { color: var(--accent); overflow: visible; cursor: pointer; }
.item.kind-bookmark .flag { width: 28px; height: 28px; stroke-width: 2.2; fill: var(--accent); fill-opacity: .25; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.item.kind-bookmark .label {
  position: absolute; left: 26px; top: 2px; white-space: nowrap;
  font-size: 12px; font-weight: 650; color: #fff; background: var(--accent);
  padding: 3px 8px; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.item.kind-bookmark.selected { outline-offset: 6px; }
.item.kind-bookmark.pulse .flag { animation: flagpulse 1.2s ease-out; }
@keyframes flagpulse { 0% { transform: scale(1); } 30% { transform: scale(1.6); } 100% { transform: scale(1); } }
#selbar #selPage { max-width: 120px; }

/* ---------------------------------------------------------------- property buttons + popovers */
.sb { position: relative; }
.sb .ic { width: 19px; height: 19px; }
.sb .dot {
  position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: #1d1c1a; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.15);
}
.sb .dot.none { background: #fff linear-gradient(135deg, transparent 42%, var(--danger) 42%, var(--danger) 58%, transparent 58%); }
.sb.open { background: var(--lime); color: var(--lime-ink); }
#selbar .sb, #stylebar .sb { width: 34px; height: 34px; }
#popover {
  position: fixed; z-index: 30; display: none; width: 296px; padding: 10px 12px 12px;
}
#popover.show { display: block; }
#popover .pop-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 8px 0 6px; }
#popover .pop-title:first-child { margin-top: 0; }
#popover .swatches.wrap { display: flex; flex-wrap: wrap; gap: 5px; }
#popover .swatch { width: 22px; height: 22px; }
#popover .chips { display: flex; flex-wrap: wrap; gap: 4px; }
#popover .chip {
  min-width: 30px; height: 28px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--panel-border);
  background: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
#popover .chip i { display: block; width: 18px; background: var(--ink); border-radius: 2px; }
#popover .chip .ic { width: 16px; height: 16px; }
#popover .chip.icon { min-width: 34px; padding: 0; }
#popover .chip.active { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
#popover .chip.active i { background: var(--lime-ink); }
#popover .slider { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
#popover .slider input { flex: 1; accent-color: var(--ink); }
#popover .slider .val { font-size: 12px; color: var(--muted); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
#stylebar { gap: 2px; padding: 4px; }
.card .logo { margin-bottom: 8px; }
#popover .pop-list { display: flex; flex-direction: column; gap: 2px; }
#popover .pop-list .row { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; background: transparent; border-radius: 7px; font-size: 13px; font-weight: 550; text-align: left; }
#popover .pop-list .row:hover { background: rgba(0,0,0,.05); }
#popover .pop-list .row.new { color: var(--accent); }
#popover .pop-list .row .ic { width: 15px; height: 15px; color: var(--muted); }
#popover .pop-list .row.new .ic { color: var(--accent); }

/* smart guides */
#guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#guides line.al { stroke: #f24822; stroke-width: 1; }
#guides line.gap { stroke: #8b8880; stroke-width: 1; }
#guides line.gap.hot { stroke: #f24822; stroke-width: 1.5; }
#guides .lbl rect { fill: #5c5a54; }
#guides .lbl.hot rect { fill: #f24822; }
#guides .lbl.size rect { fill: var(--accent); }
#guides .lbl text { fill: #fff; font: 600 11px/1 var(--mono); text-anchor: middle; }

/* ---------------------------------------------------------------- task cards, chips, frames */
.item.kind-task {
  --accent-task: #2f6df6;
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: #fff; border-radius: 10px; border: 1px solid rgba(0,0,0,.08);
  border-left: 4px solid var(--accent-task);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.06);
}
.item.kind-task .chk {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; padding: 0;
  border: 2px solid rgba(0,0,0,.25); background: #fff; display: grid; place-items: center; color: #fff; cursor: pointer;
}
.item.kind-task .chk .ic { width: 14px; height: 14px; stroke-width: 3; opacity: 0; }
.item.kind-task.done .chk { background: var(--accent-task); border-color: var(--accent-task); }
.item.kind-task.done .chk .ic { opacity: 1; }
.item.kind-task .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item.kind-task .text { font-size: 15px; font-weight: 550; line-height: 1.3; white-space: pre-wrap; word-break: break-word; outline: none; }
.item.kind-task.done .text { text-decoration: line-through; color: var(--muted); }
.item.kind-task .meta { font-size: 12px; color: var(--muted); }
.item.kind-task .text:empty::before { content: attr(data-placeholder); color: rgba(0,0,0,.35); }

.item.kind-chip { display: flex; align-items: stretch; cursor: pointer; }
.item.kind-chip .pill {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; font-size: 13px; font-weight: 650; padding: 0 12px; white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.item.kind-chip .knob { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); margin-left: -4px; }
.item.kind-chip .knob.on { order: 2; margin: 0 -4px 0 0; }

.item.kind-frame {
  --frame: #2f6df6;
  border: 2px solid var(--frame); border-radius: 14px;
  background: rgba(47,109,246,.05);
}
.item.kind-frame .head {
  position: absolute; left: 12px; top: -16px; max-width: calc(100% - 24px);
  background: var(--frame); color: #fff; border-radius: 8px; padding: 5px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.item.kind-frame .head .text { outline: none; white-space: nowrap; min-width: 40px; }
.item.kind-frame .head .text:empty::before { content: attr(data-placeholder); opacity: .7; }
.item.kind-frame.selected { outline-offset: 2px; }

/* ---------------------------------------------------------------- AI panel */
#toolbar .tool.ai { color: #6e56cf; }
#toolbar .tool.ai.active { background: #6e56cf; color: #fff; }
#aiPanel {
  position: fixed; right: 14px; bottom: 70px; z-index: 26;
  width: min(400px, calc(100vw - 28px)); display: none; flex-direction: column; overflow: hidden;
}
#aiPanel.show { display: flex; }
#aiPanel .ai-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 14px; font-weight: 700; font-size: 13px; }
#aiPanel .ai-head .ic { color: #6e56cf; }
#aiPanel .ai-model { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--muted); }
#aiPanel .ai-head .btn { width: 30px; height: 30px; }
@keyframes spin { to { transform: rotate(360deg); } }
#aiForm { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
#aiInput { width: 100%; resize: vertical; min-height: 44px; border: 1.5px solid rgba(0,0,0,.12); border-radius: 10px; padding: 9px 12px; font-size: 14px; outline: none; background: #fafaf8; }
#aiInput:focus { border-color: #6e56cf; background: #fff; }
#aiForm .ai-actions { display: flex; align-items: center; gap: 6px; }
#aiForm .hint { flex: 1; font-size: 12px; color: var(--muted); }
#aiForm .btn { height: 34px; }
#aiForm .btn.primary { background: #6e56cf; }
#aiForm .btn.primary:hover { background: #5b45b8; }

#aiPanel .ai-thread { max-height: min(380px, calc(100vh - 300px)); overflow-y: auto; scrollbar-gutter: stable; padding: 2px 14px 6px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
#aiPanel .ai-thread:empty { display: none; }
#aiPanel .msg { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; flex-wrap: wrap; }
#aiPanel .msg .txt { white-space: pre-wrap; word-break: break-word; }
#aiPanel .msg.you { color: var(--ink); font-weight: 600; }
#aiPanel .msg.you .who { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; flex: none; }
#aiPanel .msg.ai { color: #3b3935; padding-left: 2px; }
#aiPanel .msg.ai .ic { flex: none; width: 14px; height: 14px; margin-top: 3px; color: #6e56cf; }
#aiPanel .msg.ai.q .ic { color: var(--accent); }
#aiPanel .msg.err { color: var(--danger); }
#aiPanel .msg.err .ic { color: var(--danger); }
#aiPanel .msg.empty { color: var(--muted); font-size: 13px; }
#aiPanel .msg.cur { color: var(--muted); font-weight: 500; }
#aiPanel .msg .ic.spin { animation: spin 1s linear infinite; }
#aiPanel .msg .undo { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--panel-border); background: #fff; font-size: 11px; font-weight: 600; color: var(--ink); }
#aiPanel .msg .undo .ic { width: 12px; height: 12px; margin: 0; color: var(--ink); }
#aiPanel .msg .tag { margin-left: auto; font-size: 11px; color: var(--muted); }
#aiPanel .ai-head .btn { width: 30px; height: 30px; }
#aiPanel #aiClear { margin-left: 6px; }
#aiGo:disabled { opacity: .5; cursor: default; }
#toolbar .tool.ai.busy .ic { animation: pulse 1.2s infinite; }
#peers .avatar.ai .ic { width: 14px; height: 14px; color: #fff; }

/* checks & switches */
.item.kind-check { --chk: #2f6df6; display: flex; align-items: center; gap: 10px; padding: 0 4px; cursor: pointer; }
.item.kind-check .box { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 2px solid rgba(0,0,0,.3); background: #fff; display: grid; place-items: center; color: #fff; }
.item.kind-check .box .ic { width: 16px; height: 16px; stroke-width: 3; opacity: 0; }
.item.kind-check.on .box { background: var(--chk); border-color: var(--chk); }
.item.kind-check.on .box .ic { opacity: 1; }
.item.kind-check .sw { flex: none; width: 44px; height: 26px; border-radius: 999px; background: #c9c7bf; position: relative; transition: background .15s; }
.item.kind-check .sw .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.item.kind-check.on .sw { background: var(--chk); }
.item.kind-check.on .sw .knob { left: 21px; }
.item.kind-check .text { font-size: 15px; font-weight: 550; white-space: nowrap; outline: none; line-height: 1.2; }
.item.kind-check .text.editing { min-width: 60px; }
.item.kind-check .text:empty::before { content: "Label"; color: rgba(0,0,0,.3); }

/* vector pen */
#viewport.tool-vpen { cursor: crosshair; }
.item.kind-path svg.vpath { overflow: visible; }
.item.kind-path .hit { pointer-events: stroke; cursor: pointer; }
.item.kind-path.draft { pointer-events: none; }
.item.kind-path svg .rubber { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
#handles .pnode { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; border: 1.5px solid var(--accent); border-radius: 2px; pointer-events: auto; cursor: move; }
#handles .pnode.sel { background: var(--accent); }
#handles .pnode.first { border-radius: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 3px rgba(47,109,246,.25); }
#handles .phandle { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--accent); border-radius: 50%; pointer-events: auto; cursor: crosshair; }
#handles svg.hline { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#handles svg.hline line { stroke: var(--accent); stroke-width: 1; }
.cursor .tag .ic { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; }

#peers .avatar { cursor: pointer; }
#peers .avatar.me { cursor: default; }
#peers .avatar.following { outline: 2px solid var(--accent); outline-offset: 1px; }
#following { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; font-size: 13px; }
#following .ic { color: var(--accent); }
#following .btn { height: 28px; padding: 0 10px; font-size: 12px; }

/* ---------------------------------------------------------------- comments */
#viewport.tool-comment { cursor: crosshair; }
.item.kind-comment { overflow: visible; cursor: pointer; }
.item.kind-comment .pin {
  position: absolute; left: 0; bottom: 0; width: 32px; height: 32px;
  background: #fff; border-radius: 16px 16px 16px 3px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.15);
  display: grid; place-items: center;
}
.item.kind-comment .pin.resolved { opacity: .45; }
.item.kind-comment .pin .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; }
.item.kind-comment .pin .n { position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.item.kind-comment.selected { outline: none; }
.item.kind-comment.selected .pin { box-shadow: 0 0 0 2px var(--accent), 0 4px 10px rgba(0,0,0,.15); }
#commentsBtn { position: relative; }
#commentsBtn .badge { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
#commentsPanel { position: fixed; right: 14px; top: 66px; z-index: 25; width: min(380px, calc(100vw - 28px)); max-height: calc(100vh - 100px); display: none; flex-direction: column; overflow: hidden; }
#commentsPanel.show { display: flex; }
#commentsList { overflow: auto; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
#commentsList .empty { padding: 28px 16px 24px; color: var(--muted); font-size: 13px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#commentsList .empty .ic { width: 28px; height: 28px; color: var(--lime-deep); background: var(--lime-soft); padding: 6px; border-radius: 10px; box-sizing: content-box; margin-bottom: 4px; }
#commentsList .empty b { color: var(--ink); }
#commentsList .empty kbd { font-family: var(--mono); font-size: 11px; background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
#commentsList .crow { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 8px; border: 0; background: transparent; border-radius: 10px; width: 100%; border-bottom: 1px solid rgba(0,0,0,.05); border-radius: 0; }
#commentsList .crow:last-child { border-bottom: 0; }
#commentsList .crow:hover { background: rgba(0,0,0,.035); }
#commentsList .crow.resolved .txt, #commentsList .crow.resolved .head b { color: var(--muted); }
#commentsList .crow .head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-left: auto; }
#commentsList .crow .meta { display: flex; gap: 10px; margin-top: 5px; font-size: 11px; color: var(--muted); align-items: center; flex-wrap: wrap; }
#commentsList .crow .meta span { display: inline-flex; align-items: center; gap: 3px; }
#commentsList .crow .meta .ic { width: 12px; height: 12px; }
#commentsList .crow .meta .pg { background: rgba(0,0,0,.06); padding: 1px 7px; border-radius: 999px; }
#commentsList .crow .meta .res { color: var(--lime-deep); }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.cm, .crow { font-size: 14px; }
.cm .head .mini { opacity: 0; }
.cm:hover .head .mini { opacity: 1; }
.cm .head .mini + .mini { margin-left: 2px; }
.cm .body, .crow .body { flex: 1; min-width: 0; }
.cm .head, .crow .head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.cm .head .t, .crow .head .t { color: var(--muted); font-size: 11px; }
.cm .head .mini:first-of-type { margin-left: auto; }
.cm .head .mini { width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); border-radius: 5px; display: grid; place-items: center; opacity: 0; }
.cm:hover .head .mini { opacity: 1; }
.cm .head .mini .ic { width: 12px; height: 12px; }
.cm .txt, .crow .txt { white-space: pre-wrap; word-break: break-word; color: #3b3935; }
.crow .txt { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#thread { position: absolute; z-index: 27; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 96px); display: none; flex-direction: column; }
#thread.show { display: flex; }
#thread .th-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 8px 16px; font-weight: 700; font-size: 14px; }
#thread .th-head > span { flex: 1; }
#thread .th-head .btn { height: 28px; padding: 0 8px; font-size: 12px; }
#thread .th-head .btn.icon { width: 28px; }
#thread.resolved .th-head > span::after { content: " · resolved"; color: var(--muted); font-weight: 500; }
#threadList { flex: 1 1 auto; min-height: 0; max-height: min(440px, 55vh); overflow: auto; padding: 0 14px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
#threadList:empty { display: none; }
#threadList .cm { display: flex; gap: 10px; align-items: flex-start; }
#threadForm { display: flex; gap: 6px; padding: 10px 12px 12px; align-items: flex-end; }
#threadForm textarea { flex: 1; resize: none; min-height: 44px; border: 1.5px solid rgba(0,0,0,.12); border-radius: 10px; padding: 9px 11px; font-size: 14px; outline: none; background: #fafaf8; }
#threadForm textarea:focus { border-color: var(--lime-deep); background: #fff; }
#threadForm .btn { width: 38px; height: 38px; padding: 0; }

#shapeMenu { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 26; display: none; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; width: 344px; }
#shapeMenu.show { display: grid; }
#shapeMenu .shp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 0; background: transparent; border-radius: 8px; font-size: 11px; color: var(--muted); }
#shapeMenu .shp:hover { background: rgba(0,0,0,.05); color: var(--ink); }
#shapeMenu .prev { width: 36px; height: 36px; overflow: visible; }
#shapeMenu .prev path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; transform: translate(8px, 8px); }

/* context menu */
#ctxmenu { position: fixed; z-index: 40; width: 232px; padding: 6px; display: none; flex-direction: column; }
#ctxmenu.show { display: flex; }
#ctxmenu .row { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border: 0; background: transparent; border-radius: 7px; font-size: 13px; font-weight: 500; text-align: left; color: var(--ink); }
#ctxmenu .row:hover { background: rgba(0,0,0,.05); }
#ctxmenu .row.danger { color: var(--danger); }
#ctxmenu .row .ic { width: 15px; height: 15px; color: var(--muted); flex: none; }
#ctxmenu .row.danger .ic { color: var(--danger); }
#ctxmenu .row span { flex: 1; }
#ctxmenu .row kbd { font: 500 11px/1 var(--mono); color: var(--muted); }
#ctxmenu .sep { height: 1px; background: var(--panel-border); margin: 4px 6px; }
#ctxmenu .row:disabled { opacity: .4; }

/* toolbar groups & flyouts */
#toolbar .group { position: relative; display: flex; align-items: center; }
#toolbar .group .caret { width: 22px; height: 38px; padding: 0; margin-left: -2px; border-radius: 8px; color: var(--muted); }
#toolbar .group .caret .ic { width: 14px; height: 14px; }
#toolbar .group .caret:hover { color: var(--ink); }
#toolbar .group.open .caret { color: var(--ink); background: rgba(0,0,0,.06); }
#toolbar .flyout {
  position: absolute; left: 0; bottom: calc(100% + 10px); display: none; flex-direction: column; min-width: 220px; padding: 6px;
  background: var(--panel); backdrop-filter: blur(12px); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow);
}
#toolbar .group.open .flyout { display: flex; }
#toolbar .flyout .row { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 7px; font-weight: 500; justify-content: flex-start; }
#toolbar .flyout .row span { flex: 1; text-align: left; }
#toolbar .flyout .row kbd { font: 500 11px/1 var(--mono); color: var(--muted); }
#toolbar .flyout .row.active { background: var(--lime); color: var(--lime-ink); }
#toolbar .flyout .row.active kbd { color: inherit; }
/* pressed state for panel toggles */
.btn.open, #navBtn.open, #commentsBtn.open, #helpBtn.open { background: var(--lime) !important; color: var(--lime-ink) !important; }
#commentsBtn.open .badge { outline: 2px solid var(--ink); }

/* link cards for sites that refuse iframes */
.item.kind-embed.card { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.08); }
.item.kind-embed .linkcard { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; pointer-events: none; }
.item.kind-embed .linkcard .img { flex: 1; min-height: 120px; background-size: cover; background-position: center; }
.item.kind-embed .linkcard .meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.item.kind-embed .linkcard .site { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.item.kind-embed .linkcard .title { font-weight: 650; font-size: 15px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item.kind-embed .linkcard .desc { font-size: 12px; color: #5c5a54; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item.kind-embed.card .cover span::before { content: "Double-click to open ↗"; }
.item.kind-embed.card .cover span { font-size: 0; }

/* unread comments */
.item.kind-comment.unread .pin { box-shadow: 0 0 0 2.5px var(--danger), 0 4px 10px rgba(0,0,0,.15); }
.item.kind-comment.unread .pin::after { content: ""; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; }
#commentsBtn .badge.unread { background: var(--danger); }
#commentsBtn .badge:not(.unread) { background: var(--muted); }
#commentsList .crow.unread { background: rgba(217,67,59,.06); }

/* auth */
.card.auth .tabs { display: flex; gap: 4px; background: rgba(0,0,0,.05); padding: 4px; border-radius: 10px; margin: 0 0 16px; }
.card.auth .tab { flex: 1; height: 34px; border: 0; border-radius: 7px; background: transparent; font-weight: 600; font-size: 13px; color: var(--muted); }
.card.auth .tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.card.auth .google { width: 100%; height: 42px; border: 1.5px solid rgba(0,0,0,.12); background: #fff; gap: 10px; margin-bottom: 8px; }
.card.auth .or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 6px 0 12px; }
.card.auth .or::before, .card.auth .or::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.1); }

/* mentions */
.mention { color: var(--accent); font-weight: 650; background: rgba(47,109,246,.1); border-radius: 4px; padding: 0 3px; }
.mention.me { background: rgba(217,67,59,.12); color: var(--danger); }
#mentionAc { position: fixed; z-index: 60; width: 300px; padding: 4px; display: none; flex-direction: column; }
#mentionAc.show { display: flex; }
#mentionAc .row { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border: 0; background: transparent; border-radius: 7px; font-size: 13px; text-align: left; }
#mentionAc .row.active, #mentionAc .row:hover { background: rgba(0,0,0,.05); }
#mentionAc .row .av { width: 22px; height: 22px; font-size: 10px; }
#mentionAc .row .t { margin-left: auto; color: var(--muted); font-size: 11px; }
.item.kind-comment.mention .pin { box-shadow: 0 0 0 3px var(--danger), 0 0 0 6px rgba(217,67,59,.25), 0 4px 10px rgba(0,0,0,.15); animation: mentionpulse 1.6s ease-in-out 3; }
@keyframes mentionpulse { 50% { transform: scale(1.15); } }
#commentsBtn .badge.mention { background: var(--danger); font-weight: 800; }
#commentsList .crow.mention { background: rgba(217,67,59,.1); }
#toast.mention { background: var(--danger); display: flex; gap: 10px; align-items: center; max-width: 520px; }
#toast.mention .go { height: 26px; padding: 0 10px; border-radius: 6px; border: 0; background: #fff; color: var(--danger); font-weight: 700; font-size: 12px; }
#toast.mention { pointer-events: auto; } /* only the mention toast is clickable; plain toasts never block the bars */

/* crop mode */
#handles .crop-ghost { position: absolute; background-size: 100% 100%; opacity: .35; pointer-events: none; }
#handles .crop-box { position: absolute; outline: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent), 0 0 0 9999px rgba(244,243,238,.0); pointer-events: none; }
#handles .h.crop { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 2px; background: var(--ink); border: 2px solid #fff; }
#handles .crop-bar { position: absolute; transform: translate(-50%, -100%); display: flex; gap: 4px; pointer-events: auto; }
#handles .crop-bar button { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; }
#handles .crop-bar button[data-crop=reset] { background: #fff; color: var(--ink); border: 1px solid var(--panel-border); }

/* location links in assistant replies */
#aiThread .msg a.loc { color: #2f6df6; text-decoration: underline; text-decoration-color: rgba(47,109,246,.35); text-underline-offset: 2px; cursor: pointer; }
#aiThread .msg a.loc:hover { text-decoration-color: #2f6df6; }
.item.pulse { animation: itempulse 1.5s ease-out; }
@keyframes itempulse { 0% { outline: 3px solid rgba(110,86,207,.9); outline-offset: 4px; } 100% { outline: 3px solid rgba(110,86,207,0); outline-offset: 16px; } }

/* widgets */
.item.kind-widget { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.10); }
.item.kind-widget iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; pointer-events: none; }
.item.kind-widget.active iframe { pointer-events: auto; }
.item.kind-widget .wtitle { position: absolute; left: 10px; top: -22px; font-size: 11px; font-weight: 700; color: rgba(0,0,0,.45); letter-spacing: .02em; pointer-events: none; }
.item.kind-widget .cover { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; color: #fff; font-size: 12px; font-weight: 600; background: linear-gradient(transparent 75%, rgba(0,0,0,.35)); opacity: 0; transition: opacity .15s; }
.item.kind-widget:hover .cover { opacity: 1; }
.item.kind-widget .cover span { background: rgba(0,0,0,.6); padding: 6px 10px; border-radius: 999px; }
.item.kind-widget.active .cover { display: none; }
.item.kind-widget .grab { position: absolute; left: 0; right: 0; top: 0; height: 22px; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; cursor: move; }
.item.kind-widget.active .grab { display: flex; }
.item.kind-widget.active { outline-color: #f5c518; }
/* code editor */
#codeModal .card.code { width: min(1100px, 94vw); height: min(760px, 90vh); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
#codeModal .code-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#codeModal .code-head h2 { margin: 0; font-size: 16px; }
#codeModal .code-head input { flex: 1; min-width: 160px; font: inherit; padding: 6px 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; background: #fff; }
#codeModal .code-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#codeModal textarea { width: 100%; height: 100%; resize: none; font-family: var(--mono); font-size: 12.5px; line-height: 1.45; padding: 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; background: #1e1e22; color: #e8e6df; tab-size: 2; white-space: pre; overflow: auto; }
#codeModal textarea:focus { outline: 2px solid var(--accent); }
#codeModal #codePreview { width: 100%; max-height: 100%; aspect-ratio: 3 / 2; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; background: #fff; justify-self: center; align-self: start; }
#codeModal .actions { display: flex; align-items: center; gap: 8px; }
#codeModal .actions .sub { flex: 1; margin: 0; font-size: 12px; color: var(--muted, #777); }
/* export panel */
#exportPanel { display: none; position: fixed; top: 66px; left: 60px; width: 288px; padding: 10px 12px 12px; z-index: 60; flex-direction: column; gap: 8px; }
#exportPanel.show { display: flex; }
#exportPanel .panel-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; padding-left: 2px; }
#exportPanel .panel-head .btn.icon { width: 28px; height: 28px; }
#exportPanel .row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
#exportPanel .row > label:first-child { width: 72px; font-size: 12px; color: var(--muted); }
#exportPanel .seg { flex: 1; margin: 0; }
#exportPanel .seg button { height: 26px; font-size: 12px; }
#exportPanel .seg button:disabled { opacity: .4; }
#exportPanel .check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
#exportPanel .check input { accent-color: var(--lime-deep); }
#exportPanel .info { font-size: 11.5px; color: var(--muted); padding: 2px 2px 0; }
#exportPanel .actions { display: flex; gap: 6px; margin-top: 2px; }
#exportPanel .actions .btn { flex: 1; height: 34px; font-size: 12.5px; }
#exportPanel .actions .btn:not(.primary) { background: rgba(0,0,0,.05); }
#exportPanel .actions .btn:disabled { opacity: .45; cursor: default; }
#codeModal .chips { display: flex; flex-wrap: wrap; gap: 4px; }
#codeModal .chip { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.1); background: #fff; cursor: pointer; }
#codeView { display: none; margin: 0; }
@media (max-width: 760px) {
  #codeModal .card.code { width: 100vw; height: 100vh; max-height: none; border-radius: 0; padding: 12px; }
  #codeModal .code-head h2 { display: none; }
  #codeView { display: flex; width: 100%; }
  #codeModal .code-body { grid-template-columns: 1fr; }
  #codeModal .code-body[data-view="code"] #codePreview, #codeModal .code-body:not([data-view]) #codePreview { display: none; }
  #codeModal .code-body[data-view="preview"] textarea { display: none; }
  #codeModal .code-body[data-view="preview"] #codePreview { max-height: none; height: 100%; aspect-ratio: auto; }
  #codeModal .actions .sub { display: none; }
}
#handles .gbox { position: absolute; outline: 1.5px dashed var(--accent); outline-offset: 4px; pointer-events: none; }

/* ---- account & shortcuts panel (top-right) */
#help { position: fixed; right: 14px; top: 66px; z-index: 25; width: min(360px, calc(100vw - 28px)); max-height: calc(100vh - 86px); display: none; flex-direction: column; overflow: hidden; font-size: 13px; }
#help.show { display: flex; }
#help .acct { display: flex; align-items: center; gap: 12px; padding: 14px 10px 10px 16px; }
#help .acct .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#help .acct .who b { font-size: 14px; display: flex; align-items: center; gap: 6px; }
#help .acct .who span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#help .role { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--lemon-soft); color: #6b5400; padding: 2px 6px; border-radius: 999px; }
.av.big { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; flex: none; }
#help .acct-actions { display: flex; gap: 6px; padding: 0 12px 12px; border-bottom: 1px solid var(--panel-border); }
#help .acct-actions .btn { flex: 1; height: 34px; font-size: 12px; text-decoration: none; padding: 0 8px; background: rgba(0,0,0,.04); }
#help .acct-actions .btn:hover { background: rgba(0,0,0,.08); }
#help .sc-scroll { overflow: auto; padding: 6px 16px 14px; overscroll-behavior: contain; }
#help section + section { margin-top: 14px; }
#help h5 { margin: 8px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#help .sc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--ink); }
#help .sc span { flex: 1; min-width: 0; }
#help .sc i { font-style: normal; color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
#help kbd { font-family: var(--mono); font-size: 11px; line-height: 1; background: var(--lemon-soft); border: 1px solid rgba(0,0,0,.08); border-bottom-width: 2px; padding: 4px 6px; border-radius: 6px; color: var(--ink); min-width: 22px; text-align: center; }
/* ---- comments panel chrome */
#commentsPanel .cp-head { display: flex; align-items: center; gap: 4px; padding: 10px 8px 6px 16px; }
#commentsPanel .cp-head .ttl { flex: 1; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
#commentsPanel .cp-head .cnt { font-size: 11px; font-weight: 700; background: var(--lime); color: var(--lime-ink); padding: 2px 7px; border-radius: 999px; }
#commentsPanel .cp-head .btn.icon { width: 30px; height: 30px; }
#commentsPanel .cp-head .btn.icon.on { background: var(--lime-soft); color: var(--lime-deep); }
.seg { display: flex; gap: 2px; margin: 0 12px 6px; padding: 3px; background: rgba(0,0,0,.05); border-radius: 9px; }
.seg button { flex: 1; height: 28px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--lime); color: var(--lime-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* assistant multiple-choice answers */
#aiThread .msg .opts { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; margin-top: 8px; padding-left: 26px; }
#aiThread .msg .opt { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1.5px solid #6e56cf; background: #fff; color: #6e56cf; cursor: pointer; }
#aiThread .msg .opt:hover { background: #6e56cf; color: #fff; }

/* deleting comments */
#thread .th-head .btn.danger { color: var(--danger); }
#thread .th-head .btn.danger:hover { background: rgba(217,67,59,.1); }
#commentsList .crow { position: relative; padding-right: 36px; }
#commentsList .crow .rowdel { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); opacity: 0; }
#commentsList .crow .rowdel .ic { width: 14px; height: 14px; }
#commentsList .crow:hover .rowdel { opacity: 1; }
#commentsList .crow .rowdel:hover { background: rgba(217,67,59,.1); color: var(--danger); }
#commentsPanel .cp-foot { padding: 6px 10px 10px; border-top: 1px solid var(--panel-border); }
#commentsPanel .cp-foot .btn { width: 100%; height: 32px; font-size: 12.5px; color: var(--danger); background: rgba(217,67,59,.06); }
#commentsPanel .cp-foot .btn:hover { background: rgba(217,67,59,.12); }

/* stamps */
.item.kind-stamp { overflow: visible; cursor: pointer; }
.item.kind-stamp .badge { width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 2px solid var(--stamp); color: var(--stamp); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.12); }
.item.kind-stamp .badge .ic { width: 58%; height: 58%; stroke-width: 2.4; }
.item.kind-stamp.selected { outline-offset: 2px; border-radius: 50%; }
.item.kind-stamp.pop .badge { animation: stamppop .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes stamppop { 0% { transform: scale(1.8) rotate(-12deg); opacity: .4; } 100% { transform: none; opacity: 1; } }
#viewport.tool-stamp { cursor: crosshair; }
#stampMenu { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 26; display: none; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 8px; width: 560px; }
#stampMenu.show { display: grid; }
#stampMenu .stp { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border: 0; background: transparent; border-radius: 10px; font: inherit; font-size: 11px; color: var(--muted); }
#stampMenu .stp:hover { background: rgba(0,0,0,.05); color: var(--ink); }
#stampMenu .stp.on { background: var(--lime-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--lime); }
#stampMenu .stp .badge { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--stamp); color: var(--stamp); display: grid; place-items: center; }
#stampMenu .stp .badge .ic { width: 18px; height: 18px; stroke-width: 2.4; }
@media (max-width: 820px) { #stampMenu { width: min(420px, calc(100vw - 28px)); grid-template-columns: repeat(4, 1fr); } }

/* priority pills */
.item.kind-stamp .badge.pill, #stampMenu .stp .badge.pill { border-radius: 999px; background: var(--stamp); color: #fff; border-color: var(--stamp); display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.item.kind-stamp .badge.pill .ic { width: 14px; height: 14px; fill: #fff; stroke: #fff; }
#stampMenu .stp .badge.pill { width: 52px; height: 26px; font-size: 11px; }
#stampMenu .stp .badge.pill .ic { width: 12px; height: 12px; fill: #fff; stroke: #fff; }
.item.kind-stamp.selected:has(.pill) { border-radius: 999px; }

/* images in comments */
#thread .atts { display: flex; gap: 6px; padding: 8px 12px 0; flex-wrap: wrap; }
#thread .atts .att { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.1); background: #f4f3ee; }
#thread .atts .att img { width: 100%; height: 100%; object-fit: cover; display: block; }
#thread .atts .att .rm { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; padding: 0; }
#thread .atts .att .rm .ic { width: 11px; height: 11px; }
#threadForm #threadAttach { width: 38px; height: 38px; cursor: pointer; }
#thread.drop { outline: 2px dashed var(--lime-deep); outline-offset: -4px; }
.cm .txt .imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cm .txt .imgs img { max-width: 100%; max-height: 240px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); display: block; }
.cm .txt.only-img { margin-top: -2px; }
.crow .imgtag { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; vertical-align: middle; }
.crow .imgtag .ic { width: 13px; height: 13px; }
.cm .txt .imgs .img { position: relative; display: inline-block; }
.cm .txt .imgs .toboard { position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 6px; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; padding: 0; opacity: 0; }
.cm .txt .imgs .img:hover .toboard { opacity: 1; }
.cm .txt .imgs .toboard .ic { width: 13px; height: 13px; }

/* collapsible views under a page */
#pageList li.page .tog { opacity: 1; width: auto; min-width: 34px; height: 24px; padding: 0 6px 0 5px; margin-left: 4px; display: inline-flex; align-items: center; gap: 3px; color: var(--lime-deep); background: var(--lime-soft); border-radius: 999px; font-size: 11px; font-weight: 700; }
#pageList li.page .tog .ic { width: 13px; height: 13px; }
#pageList li.page .tog .chev { width: 11px; height: 11px; transition: transform .15s; opacity: .7; }
#pageList li.page .tog.open .chev { transform: rotate(90deg); }
#pageList li.page .tog.spacer { background: transparent; }
#pageList ul.tags .tags-head { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 0 2px 8px; }
#pageList li.page .tog:hover { color: var(--ink); }
.btn.primary.danger { background: var(--danger); color: #fff; }
.btn.primary.danger:hover { background: #c1382f; }
.btn.primary:disabled { opacity: .45; cursor: default; }
#pageList li.page .tog.spacer { width: 34px; min-width: 34px; margin-left: 4px; display: inline-block; }

/* lemon-lime: focus & hover accents */
.btn:focus-visible, .chip:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--lime-glow); }
#toolbar .tool:hover:not(.active) { background: var(--lime-soft); }
#toolbar .group.open > .caret, #toolbar .caret:hover { background: var(--lime-soft); color: var(--lime-deep); }
#commentsBtn .badge { background: var(--lime); color: var(--lime-ink); }
#commentsBtn .badge.unread { background: var(--danger); color: #fff; }
.card.auth .tab.active { background: var(--lime); color: var(--lime-ink); }
#zoom .btn:hover { background: var(--lime-soft); }
#snapBtn.on { background: var(--lime) !important; color: var(--lime-ink) !important; }
#arrangeMenu .row:hover, #ctxmenu .row:hover, #popover .pop-list .row:hover, #toolbar .flyout .row:hover { background: var(--lime-soft); }
.item.kind-bookmark { color: var(--lime-deep); }
.item.kind-bookmark .flag { fill: var(--lime); fill-opacity: .6; }
.item.kind-bookmark .label { background: var(--lime-deep); }

/* bigger, Miro-ish tool option flyouts */
#toolbar .flyout { padding: 6px; gap: 2px; }
#toolbar .flyout .row { height: 38px; font-size: 13.5px; padding: 0 12px 0 10px; }
#toolbar .flyout .row .ic { width: 20px; height: 20px; }
#toolbar .flyout .row kbd { margin-left: 12px; }
/* text editing: colour + style only */
#popover .hint { font-size: 11.5px; color: var(--muted); margin: -2px 0 6px; }
#popover .slider .num { width: 58px; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; margin-left: 6px; }