/* Black Notes — Figma / FigJam / Notion inspired */

:root {
  --bg: #f5f5f5;
  --bg-canvas: #e8e8e8;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --surface-hover: #efefef;
  --ink: #1e1e1e;
  --ink-2: #333333;
  --muted: #757575;
  --faint: #a0a0a0;
  --border: #e5e5e5;
  --border-2: #d4d4d4;
  --blue: #0d99ff;
  --blue-soft: #e5f4ff;
  --blue-press: #0b85e0;
  --purple: #9747ff;
  --purple-soft: #f1e8ff;
  --green: #14ae5c;
  --green-soft: #e4f7ed;
  --red: #f24822;
  --red-soft: #fde8e3;
  --yellow: #ffcd29;
  --yellow-soft: #fff8db;
  --orange: #ff7262;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Springy overshoot for things that appear (cards, pills, popovers) */
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(13, 153, 255, 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* One consistent keyboard ring across the whole app. Pointer users never see
   it (`:focus-visible`), so nothing gets noisier for mouse interaction. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

/* =========================
   Auth / landing screens
   ========================= */

.page-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(13, 153, 255, 0.06), transparent 70%),
    var(--bg);
}

.shell {
  width: min(400px, 100%);
}

.shell-header {
  text-align: center;
  margin-bottom: 24px;
}

.logo-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(145deg, #1e1e1e 0%, #444 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.03em;
  box-shadow: var(--shadow);
}

.wordmark {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.lede {
  margin: 0 auto;
  max-width: 40ch;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  text-wrap: balance;
}

.card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.card-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.card-sub {
  margin: 0 0 20px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.field label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.field .hint {
  font-size: 11px;
  color: var(--faint);
  line-height: 1.4;
}

.field input,
.field textarea,
.field select {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 9px 11px;
  outline: none;
  font-size: 13px;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--faint);
}

.field input:hover,
.field textarea:hover {
  border-color: #bdbdbd;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.15);
}

.row {
  display: flex;
  gap: 10px;
}

.row > * {
  flex: 1;
  min-width: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  transition: background 0.12s var(--ease), color 0.12s var(--ease),
    border-color 0.12s var(--ease), box-shadow 0.12s var(--ease),
    transform 0.08s var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(13, 153, 255, 0.25);
}

.btn-primary:hover:not(:disabled) {
  background: var(--blue-press);
}

.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.btn-soft {
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--ink-2);
}

.btn-soft:hover:not(:disabled) {
  background: var(--surface-hover);
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
}

.btn-danger {
  color: var(--red);
}

.btn-danger:hover:not(:disabled) {
  background: var(--red-soft);
  border-color: transparent;
}

.error {
  background: var(--red-soft);
  border: 1px solid #f9c4b8;
  color: var(--red);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 12px;
}

.success-panel {
  margin-top: 4px;
}

.success-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.success-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.share-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.share-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  color: var(--ink-2);
}

.success-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.success-actions .btn {
  flex: 1;
  margin: 0;
}

.footer-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--faint);
}

/* =========================
   Room — Figma-like chrome
   ========================= */

.room {
  flex: 1;
  display: grid;
  /* toolbar | main body */
  grid-template-rows: 48px 1fr;
  height: 100vh;
  /* dvh tracks the collapsing mobile browser chrome; vh above is the fallback */
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--bg-canvas);
}

/* Top bar */
.toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 20;
  box-shadow: var(--shadow-sm);
  /* Everything inside is flex-shrinkable or gets hidden by the queries below;
     this stops a long title or URL from pushing Share off the edge. */
  min-width: 0;
  overflow: hidden;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.toolbar-back-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.toolbar-back-btn:hover {
  text-decoration: none;
  color: var(--ink);
  background: var(--surface-hover);
  border-color: var(--border-2);
}

/* Session title only; editing lives in the Settings workspace. */
.toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  min-width: 0;
  height: 30px;
  padding: 0 8px 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s var(--ease), border-color 0.1s var(--ease);
}

.toolbar-title-static {
  cursor: default;
}

.toolbar-title-static:hover {
  background: transparent;
  border-color: transparent;
}

.toolbar-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.toolbar-title-chev {
  flex-shrink: 0;
  color: var(--faint);
  opacity: 0.7;
}

.toolbar-title:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.toolbar-title:hover .toolbar-title-chev {
  color: var(--muted);
  opacity: 1;
}

.toolbar-title.has-brief .toolbar-title-chev {
  color: var(--blue);
  opacity: 0.85;
}

/* Session settings modal (title + default URL + brief) — tight padding.
   `.modal` sets padding: 20px later in the sheet, so this needs the extra
   class to win; the head/body/actions below own the spacing instead. */
.modal.session-settings-modal,
.session-settings-modal {
  width: min(360px, 100%);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.session-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 0;
}

.session-settings-head h3 {
  margin: 0 0 1px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Beat .modal .modal-hint (same specificity, later rules) */
.session-settings-modal .session-settings-head .modal-hint,
.session-settings-head .modal-hint {
  margin: 0;
  max-width: 34ch;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
}

.session-settings-close {
  width: 24px;
  height: 24px;
  margin: -2px -2px 0 0;
  border: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.session-settings-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Body: one padding box, consistent field stack */
.session-settings-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 0;
}

.session-settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.session-settings-field label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.3;
}

.session-settings-field .label-optional {
  font-weight: 500;
  font-size: 10px;
  color: var(--faint);
}

.session-settings-help {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--faint);
}

.session-settings-field input[type="text"],
.session-settings-field input[type="url"] {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease),
    background 0.12s var(--ease);
}

.session-settings-field input[type="text"]:hover,
.session-settings-field input[type="url"]:hover {
  border-color: #bdbdbd;
}

.session-settings-field input[type="text"]:focus,
.session-settings-field input[type="url"]:focus {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}

.session-settings-modal .brief-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  resize: vertical;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 6px 9px;
  margin: 0;
  outline: none;
  font-size: 12.5px;
  line-height: 1.4;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease),
    background 0.12s var(--ease);
}

.session-settings-modal .brief-textarea:hover {
  border-color: #bdbdbd;
}

.session-settings-modal .brief-textarea:focus {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}

.session-settings-modal .brief-charcount {
  font-size: 10px;
  color: var(--faint);
  text-align: right;
  margin: 0;
  line-height: 1.2;
}

.session-settings-modal .modal-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  padding: 9px 14px 11px;
  margin: 6px 0 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.session-settings-modal .modal-actions .btn {
  min-height: 30px;
  padding: 0 11px;
  font-size: 12.5px;
}

.session-settings-modal .modal-actions .btn-primary {
  width: auto;
  margin: 0;
  min-width: 64px;
}

.session-settings-actions {
  justify-content: space-between !important;
}
.session-settings-actions-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-danger-text {
  color: var(--red) !important;
}
.btn-danger-text:hover {
  background: var(--red-soft) !important;
}

.recent-sessions-card {
  margin-bottom: 0;
}
.recent-sessions-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: -4px -6px -6px;
  padding: 0;
}
.recent-session-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 2px 8px;
  border-top: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.12s var(--ease);
}
.recent-session-row:first-child {
  border-top: 0;
}
.recent-session-row:hover {
  background: var(--surface-2);
}
.recent-session-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  text-decoration: none;
  color: inherit;
}
.recent-session-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-session-meta {
  font-size: 11.5px;
  color: var(--faint);
}
.recent-session-delete {
  flex-shrink: 0;
  opacity: 0.55;
}
.recent-session-row:hover .recent-session-delete {
  opacity: 1;
}
.recent-session-row.is-current {
  background: var(--blue-soft);
}
.recent-session-now {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: var(--blue-press);
  background: rgba(13, 153, 255, 0.12);
  vertical-align: middle;
}
.recent-sessions-empty {
  padding: 8px 2px 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.recent-sessions-empty p {
  margin: 0;
}
/* —— Session replays browser (all users in this room) —— */
.replays-view {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 28px 20px 48px;
  background: var(--surface-2);
}
.replays-view[hidden] {
  display: none !important;
}
.replays-view-shell {
  width: min(900px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.replays-view-tools {
  position: sticky;
  top: -1px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0 14px;
  background: transparent;
}
.replays-search-field {
  height: 42px;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.replays-search-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
  color: var(--blue-press);
}
.replays-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 13px/1.4 var(--font);
}
.replays-search-field input::placeholder {
  color: var(--faint);
}
.replays-search-field input:disabled {
  cursor: wait;
}
.replays-comment-filter {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  font: 600 11.5px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease),
    background 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.replays-comment-filter:hover:not(:disabled) {
  color: var(--ink-2);
  border-color: var(--border-2);
}
.replays-comment-filter.active {
  color: var(--blue-press);
  border-color: rgba(13, 153, 255, 0.35);
  background: var(--blue-soft);
}
.replays-comment-filter:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.replays-comment-filter:disabled {
  opacity: 0.55;
  cursor: wait;
}
.replays-browser-body {
  flex: 1;
  padding: 0 0 28px;
  min-height: 160px;
}
.replays-browser-loading,
.replays-browser-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* —— Session settings workspace —— */
.settings-view {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 28px 20px 48px;
  background: var(--surface-2);
}
.settings-view[hidden] {
  display: none !important;
}
.settings-view-shell {
  width: min(960px, 100%);
  margin: 0 auto;
}
.settings-view-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.settings-view-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.settings-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.settings-card-head {
  margin-bottom: 18px;
}
.settings-card-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.settings-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.settings-card-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.integration-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.integration-copy {
  flex: 1;
  min-width: 0;
}
.integration-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
}
.integration-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.integration-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.integration-actions .btn {
  width: auto;
  margin: 0;
  white-space: nowrap;
}
.figma-logo {
  display: grid;
  grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(3, 9px);
  flex: 0 0 auto;
}
.figma-logo i:nth-child(1) { background: #f24e1e; border-radius: 5px 0 0 5px; }
.figma-logo i:nth-child(2) { background: #ff7262; border-radius: 0 5px 5px 0; }
.figma-logo i:nth-child(3) { background: #a259ff; border-radius: 5px 0 0 5px; }
.figma-logo i:nth-child(4) { background: #1abcfe; border-radius: 50%; }
.figma-logo i:nth-child(5) { background: #0acf83; border-radius: 5px 0 5px 5px; }
.acct-tag.is-connected {
  color: #087f5b;
  background: #e9fbf3;
}

@media (max-width: 640px) {
  .integration-row { align-items: flex-start; flex-wrap: wrap; }
  .integration-copy { flex-basis: calc(100% - 34px); }
  .integration-actions { width: 100%; padding-left: 32px; }
}
.settings-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
.settings-field > span {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.settings-field small {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
}
.settings-field input,
.settings-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  outline: none;
  background: var(--surface-2);
  color: var(--ink);
  font: 500 13px/1.45 var(--font);
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease),
    background 0.14s var(--ease);
}
.settings-field input {
  height: 38px;
  padding: 0 11px;
}
.settings-field textarea {
  min-height: 112px;
  padding: 9px 11px;
  resize: vertical;
}
.settings-field input:hover,
.settings-field textarea:hover {
  border-color: #bdbdbd;
}
.settings-field input:focus,
.settings-field textarea:focus {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}
.settings-charcount {
  align-self: flex-end;
  margin-top: -2px;
}
.settings-access-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 10.5px;
  font-weight: 650;
  flex-shrink: 0;
}
.settings-access-badge.is-protected {
  color: var(--blue-press);
  background: var(--blue-soft);
}
.settings-access-members {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.settings-access-members-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.settings-access-members-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.settings-access-members-head strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
}
.settings-access-members-head small,
.settings-access-loading {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}
.settings-access-members-head > span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: 650 10.5px/1 var(--mono);
}
.settings-access-member-list {
  display: flex;
  flex-direction: column;
}
.settings-access-loading {
  padding: 14px 0 4px;
}
.settings-access-member {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border-top: 1px solid var(--border);
}
.settings-access-member:first-child {
  border-top: 0;
}
.settings-access-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--member-color);
  color: #fff;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .02em;
}
.settings-access-identity,
.settings-access-role-wrap {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.settings-access-identity strong,
.settings-access-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-access-identity strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 620;
}
.settings-access-identity strong em {
  margin-left: 4px;
  color: var(--blue-press);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}
.settings-access-identity small,
.settings-access-role-status {
  color: var(--faint);
  font-size: 10px;
}
.settings-access-role-wrap {
  align-items: flex-end;
  gap: 2px;
}
.settings-access-role {
  width: 92px;
  height: 30px;
  border: 1px solid var(--border-2);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink-2);
  padding: 0 7px;
  font: 600 11px/1 var(--font);
}
.settings-access-role:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(13, 153, 255, .12);
}
.settings-access-role-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
}
.settings-access-role-pill.is-owner {
  background: var(--blue-soft);
  color: var(--blue-press);
}
.settings-access-role-status:not(:empty) {
  max-width: 190px;
  padding-top: 2px;
  color: var(--red);
  text-align: right;
  white-space: normal;
}
@media (max-width: 560px) {
  .settings-access-member {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 9px 0;
  }
  .settings-access-role-wrap {
    grid-column: 2;
    align-items: flex-start;
  }
}
.settings-source-list {
  display: flex;
  flex-direction: column;
}
.settings-source {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.settings-source:first-child {
  border-top: 0;
  padding-top: 0;
}
.settings-source:last-child {
  padding-bottom: 0;
}
.settings-source input {
  width: 15px;
  height: 15px;
  margin: 3px 0 0;
  accent-color: var(--ink);
  flex-shrink: 0;
}
.settings-source-copy {
  min-width: 0;
}
.settings-source-copy strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}
.settings-source-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* Workflow (Board columns) editor in session settings */
.settings-workflow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.settings-workflow-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.settings-workflow-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.settings-workflow-row.is-dragging {
  opacity: 0.4;
}
.settings-workflow-row.drag-over {
  box-shadow: inset 0 2px 0 var(--blue);
}
.settings-workflow-grip {
  color: var(--faint);
  font-size: 12px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  padding: 0 2px;
}
.settings-workflow-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.settings-workflow-row[data-tone="violet"] .settings-workflow-swatch { background: #6d28d9; }
.settings-workflow-row[data-tone="amber"] .settings-workflow-swatch { background: #b45309; }
.settings-workflow-row[data-tone="green"] .settings-workflow-swatch { background: var(--green); }
.settings-workflow-row[data-tone="blue"] .settings-workflow-swatch { background: #1d4ed8; }
.settings-workflow-row[data-tone="rose"] .settings-workflow-swatch { background: #be123c; }
.settings-workflow-row[data-tone="teal"] .settings-workflow-swatch { background: #0f766e; }
.settings-workflow-row[data-tone="gray"] .settings-workflow-swatch { background: var(--muted); }
.settings-workflow-label,
.settings-workflow-tone,
.settings-workflow-add input {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 7px 9px;
  font: 500 13px/1.3 var(--font);
  color: var(--ink);
  outline: none;
}
.settings-workflow-label:focus,
.settings-workflow-tone:focus,
.settings-workflow-add input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}
.settings-workflow-tone {
  width: 88px;
}
.settings-workflow-count {
  min-width: 22px;
  text-align: center;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 6px;
}
.settings-workflow-move {
  display: inline-flex;
  gap: 2px;
}
.settings-workflow-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font: 600 13px/1 var(--font);
  cursor: pointer;
}
.settings-workflow-btn:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
}
.settings-workflow-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.settings-workflow-remove:hover:not(:disabled) {
  color: var(--red);
  border-color: var(--red);
}
.settings-workflow-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.settings-workflow-add input {
  flex: 1 1 auto;
}
.settings-workflow-hint {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 560px) {
  .settings-workflow-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }
  .settings-workflow-count,
  .settings-workflow-move {
    grid-column: 3 / span 2;
    justify-self: start;
  }
}

.settings-inline-danger {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--red);
  font: 600 11.5px/1.4 var(--font);
  cursor: pointer;
}
.settings-inline-danger:hover {
  text-decoration: underline;
}
.settings-trash-list {
  display: flex;
  flex-direction: column;
  margin: -4px -8px -8px;
}
.settings-trash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 8px;
  border-top: 1px solid var(--border);
}
.settings-trash-row:first-child {
  border-top: 0;
}
.settings-trash-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 8px;
}
.settings-trash-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.settings-trash-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-trash-copy small,
.settings-trash-empty {
  color: var(--muted);
  font-size: 11px;
}
.settings-trash-empty {
  padding: 12px 8px;
}
.settings-danger-card {
  border-color: rgba(239, 68, 68, 0.2);
}
.settings-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.settings-danger-copy {
  min-width: 0;
}
.settings-danger-copy h2 {
  margin: 0;
}
.settings-danger-copy p {
  margin: 4px 0 0;
}
.settings-danger-row .btn {
  flex-shrink: 0;
  width: auto;
  justify-content: center;
}

/* Solid red — destructive actions shouldn't read as another quiet link. */
.btn-danger-solid {
  background: var(--red);
  border-color: var(--red);
  color: #fff !important;
  font-weight: 550;
  box-shadow: 0 1px 2px rgba(242, 72, 34, 0.25);
}
.btn-danger-solid:hover:not(:disabled) {
  background: #d93d1a;
  border-color: #d93d1a;
}
.btn-danger-solid:disabled {
  background: var(--red);
  border-color: var(--red);
  opacity: 0.45;
  cursor: not-allowed;
}

.delete-session-modal {
  max-width: 420px;
}
.delete-session-name {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}
.settings-save-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 4px 0 0;
  background: transparent;
}
.settings-save-status {
  color: var(--muted);
  font-size: 11.5px;
}
.settings-save-bar .btn {
  width: auto;
  min-width: 0;
  margin-top: 0;
}
.replays-browser-empty strong {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 14px;
}
.replays-browser-empty p {
  margin: 0;
  max-width: 32em;
  margin-inline: auto;
}
.replays-browser-summary {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 4px 10px;
  letter-spacing: 0.01em;
}
.replays-author-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.replays-author-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.replays-author-group.is-focus {
  border-color: rgba(13, 153, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(13, 153, 255, 0.12);
}
.replays-author-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--surface-2);
  border: 0;
  cursor: pointer;
}
.replays-author-header:hover {
  background: var(--surface-hover);
}
.replays-author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.replays-author-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.replays-author-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.replays-you {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--blue-press);
  background: var(--blue-soft);
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}
.replays-author-sub {
  font-size: 11.5px;
  color: var(--muted);
}
.replays-author-chev {
  flex-shrink: 0;
  color: var(--faint);
  transition: transform 0.15s var(--ease);
}
.replays-author-group.is-open .replays-author-chev {
  transform: rotate(90deg);
}
.replays-author-body {
  display: none;
  padding: 8px 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.replays-author-group.is-open .replays-author-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.replays-rec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 9px 11px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--surface-2);
}
.replays-rec-row:hover {
  border-color: var(--border);
  background: var(--surface-hover);
}
.replays-search-empty {
  padding: 44px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.replays-search-empty[hidden],
.replays-author-group[hidden],
.replays-rec-row[hidden] {
  display: none !important;
}
.replays-rec-row.is-live {
  border-color: rgba(13, 153, 255, 0.2);
  background: var(--blue-soft);
}
.replays-rec-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.replays-rec-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.replays-rec-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.replays-rec-comments {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.replays-rec-comments:not(.is-empty) {
  color: var(--ink-soft, var(--ink));
}
.replays-rec-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.replays-rec-environment {
  font-size: 10.5px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.replays-rec-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.replays-rec-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.replays-rec-icon-btn:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.replays-rec-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.replays-rec-icon-btn.is-live,
.replays-rec-play.is-live {
  background: var(--blue);
  color: #fff;
}
.replays-rec-icon-btn.is-live:hover,
.replays-rec-play.is-live:hover {
  background: var(--blue-press);
  color: #fff;
}
.replays-rec-delete {
  color: var(--faint);
}
.replays-rec-delete:hover {
  background: var(--red-soft);
  color: var(--red);
}
.replays-rec-icon-btn:disabled {
  opacity: 0.45;
  cursor: wait;
  pointer-events: none;
}
.replays-rec-row.is-deleting {
  opacity: 0.72;
  pointer-events: none;
}
.replays-rec-row.is-deleting .replays-rec-title::after {
  content: " · Deleting…";
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
}
.replays-rec-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: replays-spin 0.7s linear infinite;
  opacity: 0.85;
}
@keyframes replays-spin {
  to {
    transform: rotate(360deg);
  }
}
.person-group-play-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.journey-play-all {
  min-width: 28px;
  padding: 0 6px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted) !important;
}

.session-brief-join {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Create form textarea */
.field textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}

.toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 2px;
}

.toolbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0 8px;
}

.url-form {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  max-width: 520px;
  min-width: 140px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 8px;
  height: 32px;
  padding: 0 4px 0 10px;
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease),
    box-shadow 0.12s var(--ease);
}

.url-form:focus-within {
  background: var(--surface);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}

.url-form .url-icon {
  color: var(--faint);
  flex-shrink: 0;
  display: flex;
}

.url-form input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--ink-2);
}

.url-form input:focus,
.url-form input:focus-visible {
  outline: none;
  box-shadow: none;
}

.url-form input::placeholder {
  color: var(--faint);
  font-family: var(--font);
}

.url-form .btn {
  height: 24px;
  padding: 0 10px;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.url-form .btn:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--ink);
}

.url-form .btn.is-icon-only {
  display: grid;
  place-items: center;
  width: 28px;
  padding: 0;
  color: var(--ink-2);
}

.tool-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}

/* Resolution icon buttons */
.viewport-btns {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--surface-2);
  border-radius: 8px;
  flex-shrink: 0;
}

.viewport-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s var(--ease), color 0.1s var(--ease), box-shadow 0.1s var(--ease);
}

.viewport-btn svg {
  display: block;
}

.viewport-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
}

.viewport-btn.active {
  background: var(--surface);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}

/* Live resolution readout — bottom-right of preview canvas */
.viewport-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 12;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.pin-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--ink-2);
  font-weight: 500;
  font-size: 12px;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.pin-btn:hover {
  background: var(--surface-2);
}

.pin-btn.pin-mode-on {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 1px 3px rgba(151, 71, 255, 0.35);
}

.pin-btn.pin-mode-on:hover {
  background: #8639ef;
}

.share-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(13, 153, 255, 0.25);
}

.share-btn:hover {
  background: var(--blue-press);
}

/* Share menu — Figma-style: the link, who it lets in, and MCP access. */
.share-menu-anchor {
  position: relative;
  display: inline-flex;
}

.share-popover {
  /* Fixed, not absolute: the toolbar clips its overflow. */
  position: fixed;
  z-index: 400;
  width: 336px;
  max-width: calc(100vw - 24px);
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  text-align: left;
  animation: share-popover-in 0.16s var(--ease-out-back);
}

@keyframes share-popover-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.share-popover-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.share-popover-head p {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

.share-popover-link {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
}

.share-popover-link input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--ink-2);
}

.share-popover-link .btn {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

.share-popover-link .btn.is-copied {
  background: var(--green);
  border-color: var(--green);
}

.share-popover-items {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.share-popover-item:hover {
  background: var(--surface-hover);
}

.share-popover-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.share-popover-item-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
}

.share-popover-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.share-popover-item-text strong {
  font-size: 12px;
  font-weight: 550;
}

.share-popover-item-text small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.share-popover-item-tag {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 5px;
}

.presence {
  display: flex;
  align-items: center;
  padding: 4px 2px 4px 4px;
  isolation: isolate;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  border: 2px solid var(--surface);
  margin-left: -6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  position: relative;
  box-sizing: border-box;
  padding-top: 0.5px;
  /* Smooth ease-out — avoid spring/back easing that fights hover edges */
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease,
    opacity 0.18s ease,
    filter 0.18s ease;
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
}

.avatar:first-child {
  margin-left: 0;
}

.avatar.is-me {
  box-shadow: 0 0 0 2px var(--blue);
}

.avatar.is-here::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--surface);
  pointer-events: none;
}

.avatar.is-elsewhere {
  opacity: 0.72;
}

button.avatar {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  margin-left: -6px;
  font: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

button.avatar:first-child,
.presence > button.avatar:first-of-type {
  margin-left: 0;
}

.avatar.is-followable {
  cursor: pointer;
}

/* Stable hit target so scale-up doesn't drop hover and flicker neighbors */
.avatar.is-followable::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: -1;
}

.avatar.is-followable:hover {
  transform: translateZ(0) scale(1.1);
  z-index: 6;
  filter: brightness(1.04);
}

.avatar.is-followable:active {
  transform: translateZ(0) scale(0.97);
  transition-duration: 0.1s;
}

.avatar.is-followable:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  z-index: 6;
}

.avatar.is-following {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--blue);
  opacity: 1;
  z-index: 7;
}

.avatar.is-following:hover {
  z-index: 8;
}

.avatar.is-following::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--surface);
}

/* Follow mode banner */
.follow-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink);
  max-width: min(420px, calc(100vw - 32px));
}

.follow-banner[hidden] {
  display: none !important;
}

.follow-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(13, 153, 255, 0.25);
}

.follow-banner-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.follow-banner-stop {
  appearance: none;
  border: none;
  background: var(--blue-soft, rgba(13, 153, 255, 0.12));
  color: var(--blue);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}

.follow-banner-stop:hover {
  background: var(--blue);
  color: #fff;
}

/* Body */
:root {
  --notes-sidebar-width: 320px;
}

.room-body {
  display: grid;
  /* 320px: person-journey headers (avatar + name + play) fit without clipping */
  grid-template-columns: minmax(0, 1fr) var(--notes-sidebar-width);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 900px) {
  .room-body {
    grid-template-columns: 1fr;
    /* Preview keeps at least half the screen; notes take the rest */
    grid-template-rows: minmax(0, 1fr) minmax(200px, 45dvh);
  }

  .sidebar {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .toolbar-title {
    max-width: 120px;
  }
}

/* Canvas */
.preview-wrap {
  position: relative;
  overflow: auto;
  background-color: var(--bg-canvas);
  background-image: radial-gradient(circle, #d0d0d0 0.75px, transparent 0.75px);
  background-size: 16px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  min-height: 0;
}

.record-url-strip {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 160;
  width: min(720px, calc(100% - 32px));
  transform: translateX(-50%);
  display: none;
  pointer-events: none;
}

.record-url-strip .url-form {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
}

.preview-stage {
  position: relative;
  flex-shrink: 0;
  /* Centres the device frame on both axes while still allowing the wrapper to
     scroll when the frame is larger than the canvas (flex-start alone parked
     short viewports against the top edge). */
  margin: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  /* width/height set in JS to the scaled visual size */
}

.preview-stage iframe {
  border: 0;
  display: block;
  background: #fff;
  /* logical device size + scale set in JS; origin top-left for exact mapping */
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: 0;
}

.preview-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  justify-items: center;
  text-align: center;
  padding: 32px 24px;
  pointer-events: none;
  background: var(--surface);
  z-index: 2;
  box-sizing: border-box;
  overflow: hidden;
}

.preview-empty[hidden],
.preview-stage iframe[hidden] {
  display: none !important;
}

/* Keep icon + title + URL as one centered column even when the URL is long */
.preview-empty > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 360px);
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}

.preview-empty .empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  flex-shrink: 0;
}

.preview-empty strong {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}

.preview-empty p,
.preview-empty .preview-empty-url {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}

.preview-empty .preview-empty-url {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  letter-spacing: -0.01em;
  /* Cap multi-line sprawl so the block stays visually centered */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Pins — FigJam sticky feel */
.pin-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.pin {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.12s var(--ease);
  background: var(--purple);
}

.pin:hover {
  transform: scale(1.12);
}

.pin.resolved {
  opacity: 0.45;
  filter: grayscale(0.4);
}

.pin.active {
  transform: scale(1.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 0 3px var(--blue);
  z-index: 6;
}

.cursor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.remote-cursor {
  position: absolute;
  transform: translate(-2px, -2px);
  transition: left 0.08s linear, top 0.08s linear;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.remote-cursor svg {
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.remote-cursor .label {
  margin-left: 12px;
  margin-top: -2px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Same page, scrolled out of view — pin to edge */
.remote-cursor.is-offscreen {
  z-index: 11;
}

.remote-cursor.is-offscreen svg {
  opacity: 0.85;
}

.remote-cursor-beacon {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(13, 153, 255, 0.45);
  animation: remote-beacon 1.4s ease-out infinite;
}

@keyframes remote-beacon {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
    transform: scale(1.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transform: scale(1);
  }
}

.remote-cursor.is-offscreen .label {
  font-size: 9.5px;
  opacity: 0.95;
}

/* Sidebar — Notion-like */
.sidebar {
  position: relative;
  border-left: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  /* Journey headers (avatar + name + play) need more than 300px */
  min-width: 0;
}

/* Splitter between the canvas and the notes column. Hit area is 8px on the
   inner edge so overflow:hidden on the sidebar doesn't clip it. */
.sidebar-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  z-index: 8;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}
.note-detail-shell .sidebar-resizer {
  cursor: col-resize;
}
.sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: transparent;
  transition: background 0.12s var(--ease), width 0.12s var(--ease);
}
.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
body[data-bn-sidebar-dragging] .sidebar-resizer::after {
  width: 2px;
  background: var(--blue);
}

.note-detail-layout > .sidebar-resizer {
  left: auto;
  right: calc(var(--notes-sidebar-width, 320px) - 8px);
}
.note-detail-layout > .sidebar-resizer::after {
  left: auto;
  right: 0;
}

.note-detail-shell.is-theater > .note-detail-layout > .sidebar-resizer,
.note-detail-shell.has-replay:not(.is-pass-through) > .note-detail-layout > .sidebar-resizer,
.note-detail-shell[hidden] > .note-detail-layout > .sidebar-resizer {
  display: none;
}

body[data-bn-sidebar-dragging],
body[data-bn-sidebar-dragging] * {
  cursor: col-resize !important;
  user-select: none !important;
  touch-action: none;
}
body[data-bn-sidebar-dragging] .room-body,
body[data-bn-sidebar-dragging] .note-detail-panel,
body[data-bn-sidebar-resized] .room-body {
  transition: none;
}
body[data-bn-sidebar-resized] .note-detail-shell.is-pass-through:not(.is-theater) .note-detail-panel {
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
body[data-bn-sidebar-dragging] .preview-wrap,
body[data-bn-sidebar-dragging] iframe {
  pointer-events: none;
}
body[data-bn-sidebar-dragging] .kanban-board {
  scroll-snap-type: none;
  overflow-anchor: none;
  pointer-events: none;
}

@media (max-width: 900px) {
  .sidebar-resizer {
    display: none;
  }
}

.sidebar-header {
  padding: 12px 12px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.note-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  flex-shrink: 0;
}

.note-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px 10px;
  flex-shrink: 0;
}

.note-filters-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.note-search-field {
  flex: 1;
  min-width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--faint);
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease),
    box-shadow 0.12s var(--ease);
  /* Kill native focus chrome on the wrapper too */
  outline: none;
}

.note-search-field:focus-within {
  border-color: rgba(13, 153, 255, 0.45);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
  color: var(--muted);
}

.note-search-ico {
  flex-shrink: 0;
  opacity: 0.75;
}

.note-search-field:focus-within .note-search-ico {
  color: var(--blue);
  opacity: 1;
}

.note-search-field input {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  background: transparent !important;
  color: var(--ink);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 0;
  /* Avoid the weird inner focus rect some engines draw on search/text fields */
  caret-color: var(--blue);
}

.note-search-field input:focus,
.note-search-field input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

.note-search-field input::placeholder {
  color: var(--faint);
  opacity: 1;
}

.note-filters-toggle {
  appearance: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease),
    border-color 0.12s var(--ease);
}

.note-filters-toggle:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border-2);
}

.note-filters-toggle.has-filters {
  border-color: rgba(13, 153, 255, 0.4);
  background: var(--blue-soft);
  color: #0b6cb5;
}

.note-filters.is-open .note-filters-toggle {
  border-color: var(--border-2);
  background: var(--surface-2);
  color: var(--ink);
}

.note-filters-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.note-filters-count[hidden] {
  display: none;
}

.note-filters-chev {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.16s var(--ease);
}

.note-filters.is-open .note-filters-chev {
  transform: rotate(180deg);
}

.note-filters-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  animation: noteFiltersIn 0.16s var(--ease) both;
}

.note-filters-panel[hidden] {
  display: none !important;
}

@keyframes noteFiltersIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.note-filters-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.note-filter-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  height: 30px;
  padding: 0 22px 0 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23999' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  outline: none;
  transition: border-color 0.12s var(--ease), background-color 0.12s var(--ease);
}

.note-filter-select:hover,
.note-filter-select:focus {
  border-color: var(--border-2);
  background-color: #fff;
}

.note-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: 0;
  padding: 2px 2px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.note-filter-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.note-filter-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.note-filter-clear-btn {
  appearance: none;
  align-self: flex-start;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.note-filter-clear-btn:hover {
  background: var(--surface);
  color: var(--ink);
}

.note-filter-clear-btn[hidden] {
  display: none;
}

.group-by-toggle[hidden] {
  display: none;
}

.group-by-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 10px;
  flex-shrink: 0;
  min-width: 0;
}

.note-sort-btn {
  appearance: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease),
    border-color 0.12s var(--ease);
}

.note-sort-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border-2);
}

/* Board view does not use person/page grouping */
body[data-bn-view="board"] .group-by-toggle {
  display: none;
}

.group-by-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease), border-color 0.12s var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}
.group-by-btn:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.group-by-btn.active {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: transparent;
}
.group-by-btn[hidden] {
  display: none !important;
}

.notes-flat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* —— Tester journey (group by person) ——
   Header is a flex row (not a <button>) so Play can be a real sibling button
   without invalid nested-button markup that browsers “fix” by clipping. */
.person-group-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Count sits at the end of the toggle row */
}
.person-group-toggle .url-group-count {
  margin-left: auto;
}
.person-group-toggle:hover,
.person-group-header:hover .person-group-toggle {
  background: var(--surface-hover);
}
.person-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-top: 0.5px;
}
.person-group-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
}
.person-group-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  line-height: 1.25;
}
.person-group-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-group-sub {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.person-live {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-soft);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.journey-play {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  min-width: 26px;
  padding: 0 8px !important;
  color: var(--purple) !important;
  font-weight: 600;
  font-size: 11px !important;
  line-height: 1;
  border-radius: 6px;
  background: var(--purple-soft) !important;
  border: 0;
  white-space: nowrap;
}
.journey-play:hover {
  filter: brightness(0.97);
}
.journey-play svg {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}
.journey-rename {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0 !important;
  color: var(--ink-2) !important;
  border-radius: 6px;
  background: var(--surface-2) !important;
  border: 0;
}
.journey-rename:hover {
  color: var(--ink) !important;
  background: var(--surface-hover) !important;
}
.journey-rename svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}
.journey-delete:hover {
  color: var(--red) !important;
  background: var(--red-soft, #fde8e8) !important;
}
.journey-play-label {
  line-height: 1;
}
/* Journey path + timeline sit inside the accordion inner (.url-group-items) */
.url-group-items.person-group-body {
  padding: 0 8px;
  min-width: 0;
}
.url-group.open .url-group-items.person-group-body {
  padding-bottom: 8px;
}
.journey-path {
  display: block;
  padding: 7px 2px 9px;
  border-bottom: 1px dashed var(--border);
  margin: 0 0 2px;
  min-width: 0;
}

.journey-path-host {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  margin: 0 3px 7px;
}

.journey-path-host-mark {
  color: var(--blue);
  font-size: 10px;
  flex-shrink: 0;
}

.journey-path-host-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
}

.journey-path-host-suffix {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.journey-path-count {
  margin-left: auto;
  color: var(--faint);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.journey-path-track {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  padding: 0 3px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
  overscroll-behavior-x: contain;
}

.journey-path-track::-webkit-scrollbar {
  height: 4px;
}

.journey-path-track::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 999px;
}

.journey-path-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  max-width: 190px;
  height: 26px;
  padding: 0 8px 0 5px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  min-width: 0;
}
.journey-path-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}

.journey-path-index {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.journey-path-chip:hover .journey-path-index {
  background: rgba(13, 153, 255, 0.12);
  color: var(--blue-press);
}

.journey-path-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}

.journey-path-query,
.journey-path-chip-host {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 8.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journey-path-arrow {
  color: var(--faint);
  font-size: 10px;
  flex-shrink: 0;
}
.journey-path-more {
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 600;
  padding: 0 5px;
  flex-shrink: 0;
}
.journey-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 8px 10px;
  min-width: 0;
}
.journey-transition {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px 6px 2px;
  position: relative;
  min-width: 0;
}
.journey-transition-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
  flex-shrink: 0;
}
.journey-transition-url {
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-transition-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 650;
}

.journey-transition-query {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  flex-shrink: 0;
}

.journey-transition-host {
  margin-left: auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--faint);
  font-size: 9px;
  flex-shrink: 1;
}

.journey-transition-url:hover .journey-transition-path {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Simple stack — no numbered rail (was eating ~24px and cropping cards) */
.journey-step {
  display: block;
  padding: 0 0 8px;
  min-width: 0;
}
.journey-step-card {
  min-width: 0;
  width: 100%;
}
.journey-step-card .note-card {
  margin: 0;
  /* Keep selects / tools fully visible inside the sidebar column */
  overflow: visible;
}
.person-group .note-foot .note-page {
  display: none;
}
/* Open person groups: don't clip card chrome (hover tools, selects)
   vertically, but keep long selector/path text from widening the list. */
.person-group.open {
  overflow: visible;
}
.person-group.open .url-group-body,
.person-group.open .url-group-items {
  overflow-x: hidden;
  overflow-y: visible;
}

/* Wider viewports: give the list a little more room for journey UI */
@media (min-width: 1100px) {
  :root {
    --notes-sidebar-width: 340px;
  }
}

.notes-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px 16px;
  scrollbar-gutter: stable;
}

.notes-list::-webkit-scrollbar {
  width: 8px;
}

.notes-list::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}

.notes-list::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
}

/* Note cards — clean list rows */
.note-card {
  position: relative;
  /* Tracked so the floating tool row can mask the text it covers with the
     card's own background, whatever state the card is in. */
  --card-bg: var(--surface);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 9px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease), border-color 0.16s var(--ease),
    background 0.16s var(--ease), transform 0.16s var(--ease);
  /* clip only the accent bar; allow selects/tools to use full width */
  overflow: clip;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Promote once so the hover lift never re-rasterises text mid-animation */
  will-change: transform;
}

/* New arrivals ease in rather than snapping into the list */
.note-card.is-new {
  animation: noteCardIn 0.26s var(--ease-out-back) both;
}

@keyframes noteCardIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.note-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--border-2);
  transition: background 0.14s var(--ease), top 0.14s var(--ease),
    bottom 0.14s var(--ease), width 0.14s var(--ease);
}

.note-card.pri-accent-low::before {
  background: #d1d5db;
}
.note-card.pri-accent-medium::before {
  background: var(--blue);
}
.note-card.pri-accent-high::before {
  background: #f59e0b;
}
.note-card.pri-accent-urgent::before {
  background: var(--red);
}

.note-card:hover {
  border-color: var(--border-2);
  --card-bg: #fafafa;
  background: #fafafa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.note-card:active {
  transform: translateY(0) scale(0.995);
  transition-duration: 0.06s;
}

.note-card:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: var(--focus-ring);
}

.note-card.active {
  border-color: rgba(13, 153, 255, 0.32);
  --card-bg: var(--blue-soft);
  background: var(--blue-soft);
  box-shadow: none;
}

.note-card.active:hover {
  border-color: rgba(13, 153, 255, 0.42);
  --card-bg: #dcedfc;
  background: #dcedfc;
}

.note-card.active::before {
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0;
  background: var(--blue);
}

.note-card.active .note-num-pill {
  background: rgba(13, 153, 255, 0.14);
  color: var(--blue-press, #0b85e0);
}

.note-card.active .note-author {
  color: var(--ink-2);
}

.note-card.resolved {
  opacity: 0.55;
}

.note-card.resolved .note-body {
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.18);
}

.note-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  min-height: 22px;
  padding-left: 4px;
  /* Room for hover tools so they sit over props without jumping layout */
  padding-right: 2px;
}

.note-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* Priority + status — always visible, pinned to the right of the top bar */
.note-props {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  z-index: 1;
}

.note-num-pill {
  appearance: none;
  border: 0;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  cursor: copy;
  transition: background 0.12s var(--ease), color 0.12s var(--ease),
    transform 0.08s var(--ease);
}

.note-num-pill:hover {
  background: var(--blue-soft);
  color: var(--blue-press);
}

.note-num-pill:active {
  transform: scale(0.94);
}

.note-num-pill.copied {
  background: var(--green-soft);
  color: var(--green);
}

.note-video-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  background: #fff7d6;
  color: #7b5a00;
  font: 650 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.note-video-time svg {
  width: 9px;
  height: 9px;
}

.icon-btn.copied {
  background: var(--green-soft);
  color: var(--green);
}

.icon-btn.copy-failed {
  background: var(--red-soft);
  color: var(--red);
}

.note-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Optical nudge: caps sit slightly high in tiny circles */
  padding-top: 0.5px;
}

.note-avatar.sm {
  width: 16px;
  height: 16px;
  font-size: 7px;
  padding-top: 0.5px;
}

.note-num {
  font-weight: 650;
  color: var(--ink-2);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.note-author {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.note-reply-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
  margin-left: 2px;
}
.note-reply-count svg {
  width: 11px;
  height: 11px;
}

/* Recording available — icon only (was the “Context” chip) */
.note-recording-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  flex-shrink: 0;
}

/* Device the note was left on — icon only */
.note-viewport-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--muted);
  flex-shrink: 0;
}

.note-viewport-ico.mismatch {
  background: #fff7ed;
  color: #c2410c;
}

/* Legacy text viewport chip (if any remain) */
.note-viewport {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid transparent;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
  flex-shrink: 0;
  text-transform: capitalize;
}

.note-viewport.mismatch {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.note-body {
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.012em;
  padding-left: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-inline-link {
  color: #0878c9;
  text-decoration: underline;
  text-decoration-color: rgba(8, 120, 201, 0.35);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.note-inline-link:hover {
  color: var(--blue-press);
  text-decoration-color: currentColor;
}

/* @mentions in comment bodies — pill tags, same language as chips */
.note-mention {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 0.45em;
  margin: 0 0.08em;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mention-color, #64748b) 28%, transparent);
  background: color-mix(in srgb, var(--mention-color, #64748b) 14%, var(--surface, #fff));
  color: color-mix(in srgb, var(--mention-color, #64748b) 78%, #0f172a);
  font-weight: 700;
  font-size: 0.92em;
  letter-spacing: -0.01em;
  line-height: 1.45;
  vertical-align: baseline;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.note-mention:hover {
  background: color-mix(in srgb, var(--mention-color, #64748b) 22%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--mention-color, #64748b) 42%, transparent);
}

/* #ticket refs in comment bodies — match mention pills */
.note-ticket-ref {
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 0 0.45em;
  margin: 0 0.08em;
  border: 1px solid color-mix(in srgb, var(--blue, #0d99ff) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue, #0d99ff) 12%, var(--surface, #fff));
  color: #0b6cb5;
  font: inherit;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.45;
  vertical-align: baseline;
  cursor: pointer;
  white-space: nowrap;
}

.note-ticket-ref:hover {
  background: color-mix(in srgb, var(--blue, #0d99ff) 20%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--blue, #0d99ff) 42%, transparent);
  text-decoration: none;
}

.note-ref-chips,
.note-mention-chips,
.note-ticket-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 4px 2px;
  margin-top: -2px;
}

.note-ref-chips .note-mention-chips,
.note-ref-chips .note-ticket-chips {
  padding: 0;
  margin: 0;
}

.note-ticket-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--blue, #0d99ff) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue, #0d99ff) 10%, var(--surface));
  color: #0b6cb5;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.note-ticket-chip:hover {
  background: color-mix(in srgb, var(--blue, #0d99ff) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--blue, #0d99ff) 42%, transparent);
}

.mention-menu-ticket-num {
  width: 32px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--blue, #0d99ff) 14%, var(--surface-2));
  color: #0b6cb5;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.note-card.compact .note-ref-chips,
.note-card.compact .note-mention-chips,
.note-card.compact .note-ticket-chips {
  padding: 0 2px;
  margin-top: 0;
}

.note-mention-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--mention-color, #64748b) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mention-color, #64748b) 12%, var(--surface));
  color: color-mix(in srgb, var(--mention-color, #64748b) 75%, #0f172a);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-mention-chip:hover {
  background: color-mix(in srgb, var(--mention-color, #64748b) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--mention-color, #64748b) 42%, transparent);
}

.note-mention-chip.is-me {
  border-color: color-mix(in srgb, var(--blue, #0d99ff) 45%, transparent);
  background: color-mix(in srgb, var(--blue, #0d99ff) 12%, var(--surface));
  color: #0b6cb5;
}

.note-popover-tags .note-mention-chips {
  padding: 0;
  margin: 0;
  width: 100%;
}

.note-popover-reply-item .note-mention-chips {
  padding: 0;
  margin-top: 4px;
}

/* @ autocomplete menu (portaled to body) */
.mention-menu {
  position: fixed;
  z-index: 10050;
  max-height: 240px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14), 0 1px 0 rgba(15, 23, 42, 0.04);
  scrollbar-width: thin;
}

.mention-menu[hidden] {
  display: none !important;
}

.mention-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.mention-menu-item:hover,
.mention-menu-item.is-active {
  background: var(--surface-2);
}

.mention-menu-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  box-sizing: border-box;
  padding-top: 0.5px;
}

.mention-menu-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mention-menu-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mention-menu-email {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Only the selected card expands. Expanding on hover too made every row
   resize under the cursor and shoved the rest of the list around. */
.note-card.active .note-body {
  -webkit-line-clamp: 8;
}

.note-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-left: 4px;
  min-width: 0;
}

.note-foot .note-page {
  margin-top: 0;
  flex: 1;
  min-width: 0;
}

.note-page {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon toolbar — quiet until hover. Sits just left of priority/status so the
   right-aligned props stay readable and always visible. */
.note-tools {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-left: 10px;
  background: linear-gradient(90deg, transparent 0, var(--card-bg) 10px);
  opacity: 0;
  transition: opacity 0.12s var(--ease);
  pointer-events: none;
  z-index: 2;
}

.note-card:hover .note-tools,
.note-card.active .note-tools,
.note-card:focus-within .note-tools {
  opacity: 1;
  pointer-events: auto;
}

/* On hover, slide props under the tools so icons aren't crushed */
.note-card:not(.compact):hover .note-props,
.note-card:not(.compact).active .note-props,
.note-card:not(.compact):focus-within .note-props {
  opacity: 0;
  pointer-events: none;
}

.note-props {
  transition: opacity 0.12s var(--ease);
}

.note-meta > * {
  transition: opacity 0.12s var(--ease);
}

.note-meta .note-num-pill,
.note-meta .note-viewport-ico,
.note-meta .note-viewport {
  opacity: 1 !important;
}

.note-props .note-tag,
.note-props .priority-badge,
.note-props .status-badge {
  flex-shrink: 0;
  opacity: 1 !important;
}

/* Author byline sits under the toolbar — never covered by hover tools. */
.note-byline {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0 0 6px;
  padding: 0 2px;
}

.note-byline .note-avatar {
  flex-shrink: 0;
}

.note-byline .note-author {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-when {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 6px;
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--faint);
  white-space: nowrap;
}

.note-byline .note-when {
  font-size: 10.5px;
}

.note-detail-sub .note-when {
  margin-left: 0;
  padding-left: 0;
  color: var(--muted);
  font-size: 11px;
}

.note-popover-author {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Time fully right-aligned; trash replaces time only when that reply is hovered */
.note-reply-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 22px;
  min-height: 22px;
}

.note-reply-actions .note-when {
  margin-left: 0;
  padding-left: 0;
  transition: opacity 0.12s var(--ease);
}

.note-reply-actions .note-when-empty {
  width: 0;
  overflow: hidden;
  padding: 0;
}

.note-reply-actions .note-reply-delete {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s var(--ease), background 0.1s var(--ease), color 0.1s var(--ease);
}

.note-card.is-reply:hover .note-reply-actions .note-when,
.note-card.is-reply:focus-within .note-reply-actions .note-when,
.note-detail-reply:hover .note-reply-actions .note-when,
.note-detail-reply:focus-within .note-reply-actions .note-when,
.note-popover-reply-item:hover .note-reply-actions .note-when,
.note-popover-reply-item:focus-within .note-reply-actions .note-when {
  opacity: 0;
}

.note-card.is-reply:hover .note-reply-actions .note-reply-delete,
.note-card.is-reply:focus-within .note-reply-actions .note-reply-delete,
.note-detail-reply:hover .note-reply-actions .note-reply-delete,
.note-detail-reply:focus-within .note-reply-actions .note-reply-delete,
.note-popover-reply-item:hover .note-reply-actions .note-reply-delete,
.note-popover-reply-item:focus-within .note-reply-actions .note-reply-delete {
  opacity: 1;
  pointer-events: auto;
}

.note-reply-actions .note-reply-delete:hover {
  background: var(--red-soft);
  color: var(--red);
}



.icon-btn {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.1s var(--ease), color 0.1s var(--ease);
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.icon-btn.is-active {
  background: var(--blue-soft);
  color: var(--blue);
}

.icon-btn-danger:hover {
  background: var(--red-soft);
  color: var(--red);
}

/* Compact native selects — one full `background` shorthand per state so the
   chevron never tiles (partial longhands were re-introducing repeat). */
.mini-select {
  --mini-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%236b7280' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  --mini-fill: var(--surface-2);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 22px;
  max-width: 72px;
  padding: 0 16px 0 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  /* color image position / size — always no-repeat */
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.1s var(--ease), color 0.1s var(--ease);
}

.mini-select::-ms-expand {
  display: none;
}

.mini-select:hover,
.mini-select:focus {
  border-color: var(--border-2);
  --mini-fill: #fff;
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}

.mini-select.pri-low {
  color: #6b7280;
  --mini-fill: #f3f4f6;
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}
.mini-select.pri-medium {
  color: #1d6fb8;
  --mini-fill: var(--blue-soft);
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}
.mini-select.pri-high {
  color: #c2410c;
  --mini-fill: #fff7ed;
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}
.mini-select.pri-urgent {
  color: var(--red);
  --mini-fill: var(--red-soft);
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}

.mini-select.status-open {
  color: var(--muted);
  --mini-fill: var(--surface-2);
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}
.mini-select.status-in_progress {
  color: #6d28d9;
  --mini-fill: #f5f3ff;
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}
.mini-select.status-pending_review {
  color: #b45309;
  --mini-fill: #fff7ed;
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}
.mini-select.status-done {
  color: var(--green);
  --mini-fill: var(--green-soft);
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}

.mini-select.popover-prop {
  max-width: 78px;
  height: 24px;
  font-size: 10.5px;
  border-color: var(--border);
  padding-right: 16px;
}

.empty-notes {
  color: var(--muted);
  text-align: center;
  padding: 48px 16px;
  font-size: 12.5px;
  line-height: 1.55;
}

.empty-notes strong {
  display: block;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 4px;
}

/* Modal — Figma dialog */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  z-index: 300;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.12s var(--ease);
}

.modal-backdrop.rename-recording-backdrop {
  z-index: 320;
}

.rename-recording-modal {
  width: min(360px, 100%);
}

.rename-recording-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal {
  width: min(380px, 100%);
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-float);
  animation: popIn 0.16s var(--ease);
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.modal .modal-hint {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--muted);
}

/* Stop confirmations only need a title, one sentence, and two actions. */
.modal.stop-recording-modal {
  width: min(360px, 100%);
  padding: 0;
}

.stop-recording-modal .session-settings-head {
  padding: 10px 12px 7px;
}

.stop-recording-modal .modal-actions {
  gap: 6px;
  margin-top: 0;
  padding: 7px 10px 9px;
}

.stop-recording-modal .modal-actions .btn {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.stop-recording-modal .btn-danger {
  color: #fff;
  background: var(--red);
  border: 1px solid var(--red);
  box-shadow: 0 1px 2px rgba(242, 72, 34, 0.22);
}

.stop-recording-modal .btn-danger:hover:not(:disabled) {
  color: #fff;
  background: #dc3c1a;
  border-color: #dc3c1a;
}

.modal textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 14px;
  outline: none;
  font-size: 13px;
  line-height: 1.45;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.modal textarea:focus {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.modal-actions .btn-primary {
  width: auto;
  margin: 0;
  min-width: 100px;
}

/* SVGs */
.icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Tool modes (Pin / Highlight) */
.tool-modes {
  gap: 2px;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.1s var(--ease), color 0.1s var(--ease);
}

.tool-btn:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.tool-btn.active {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 600;
}

.tool-btn[data-mode="highlight"].active {
  background: var(--purple-soft);
  color: var(--purple);
}

/* Floating controls over the live site: tool selection + recording state. */
.recording-dock {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 170;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.recording-dock .tool-group {
  background: transparent;
  padding: 0;
}

.recording-dock .tool-btn,
.recording-dock .rec-btn {
  height: 36px;
}

.recording-dock .tool-btn {
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
}

.recording-dock .rec-btn {
  border: 0;
  border-radius: 8px;
  padding: 0 11px;
}

.recording-dock-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex: 0 0 auto;
}

/* URL groups */
.url-group {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  /* Sticky group headers must participate in the notes-list scroll container. */
  overflow: visible;
  background: var(--surface-2);
  min-width: 0;
}

.url-group-header {
  position: sticky;
  top: 0;
  z-index: 6;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  background: var(--surface-2);
  border: 0;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 11.5px;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 9px 9px 0 0;
}

.url-group:not(.open) > .url-group-header {
  border-radius: 9px;
}

.url-group-header:hover {
  background: var(--surface-hover);
}

/* Person / recording groups: header is a div (Play / Title is a sibling, not nested) */
.url-group-header.person-group-header {
  cursor: default;
  gap: 6px;
  min-height: 44px;
  padding: 6px 8px 6px 6px;
}
.url-group-header.person-group-header:hover {
  background: var(--surface-2);
}

.url-group-chev {
  flex-shrink: 0;
  color: var(--faint);
  transition: transform 0.18s var(--ease), color 0.12s var(--ease);
}

.url-group.open .url-group-chev {
  transform: rotate(90deg);
}

.url-group-header:hover .url-group-chev {
  color: var(--muted);
}

.url-group-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
}

/* By location: file targets and web pages share the accordion grammar, while
   the section label + leading glyph makes their destination type immediate. */
.location-section {
  margin-top: 12px;
}

.location-section:first-child {
  margin-top: 2px;
}

.location-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px 7px;
  color: var(--faint);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.location-section-head span:last-child {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.location-section .url-group {
  margin-bottom: 7px;
}

.location-kind-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
}

.location-kind-icon svg {
  width: 15px;
  height: 15px;
}

.is-asset-location .location-kind-icon {
  border-color: color-mix(in srgb, var(--blue) 20%, var(--border));
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  color: var(--blue);
}

.location-group.is-asset-location {
  background: color-mix(in srgb, var(--blue) 2%, var(--surface-2));
}

.location-group .url-group-header {
  min-height: 48px;
  padding-block: 7px;
}

.url-group-title-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  text-align: left;
}
.url-group-path {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.url-group-host {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
  color: var(--faint);
}

.url-group-presence {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 2px;
}

.url-group-presence .avatar,
.url-group-presence .presence-avatar {
  width: 20px;
  height: 20px;
  font-size: 8px;
  margin-left: -5px;
  border-width: 1.5px;
}

.url-group-presence button.avatar {
  margin-left: -5px;
}

.url-group-presence .avatar:first-child,
.url-group-presence .presence-avatar:first-child,
.url-group-presence button.avatar:first-child {
  margin-left: 0;
}

.url-group-presence .avatar.is-following {
  box-shadow:
    0 0 0 1.5px var(--surface),
    0 0 0 3px var(--blue);
}

.url-group-presence-more {
  font-size: 9px;
  font-weight: 650;
  color: var(--muted);
  margin-left: 3px;
}

.url-group-live {
  font-size: 9.5px;
  font-weight: 650;
  color: var(--green);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.url-group.has-viewers .url-group-header {
  background: linear-gradient(
    90deg,
    rgba(13, 153, 255, 0.06),
    transparent 60%
  );
}

.url-group.is-live-only {
  border-style: dashed;
}

.url-group-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Accordion: 0fr ↔ 1fr. Child must be min-height:0 + overflow:hidden or the
   closed track still paints content (Safari/Chrome). */
.url-group-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s var(--ease);
  overflow: hidden;
}

.url-group-items {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0 8px;
}

.url-group.open .url-group-body {
  grid-template-rows: 1fr;
}

.url-group.open .url-group-items {
  padding-bottom: 8px;
}

.note-kind {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
}

.note-kind.kind-highlight {
  background: var(--purple-soft);
  color: var(--purple);
}

.note-kind.kind-reply {
  background: var(--blue-soft);
  color: var(--blue);
}

.note-card.is-reply {
  /* Transparent thread row under a parent card — no toolbar, no lift */
  --card-bg: inherit;
  position: relative;
  margin-left: 8px;
  margin-top: 2px;
  margin-bottom: 4px;
  background: transparent !important;
  border: 0;
  border-left: 2px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  cursor: default;
  padding: 2px 4px 4px 10px;
  will-change: auto;
}

.note-card.is-reply .note-body {
  font-size: 12px;
  color: var(--ink-2);
  padding-left: 0;
  margin: 0;
}

/* Replies are rows inside a card — they must not lift or cast their own shadow */
.note-card.is-reply,
.note-card.is-reply:hover,
.note-card.is-reply:active {
  transform: none;
  box-shadow: none;
}

.note-card.is-reply:hover {
  border-left-color: var(--border-2);
}

.note-card.is-reply .note-byline {
  margin: 0 0 2px;
  padding: 0;
  min-height: 0;
  gap: 6px;
}

.note-card.is-reply .note-reply-actions .note-when {
  font-size: 10px;
}

.note-card.is-reply .note-byline .note-avatar.sm {
  width: 18px;
  height: 18px;
  font-size: 8px;
  padding-top: 0.5px;
}

.note-card.is-reply .note-byline .note-author {
  font-size: 11.5px;
}

.note-replies {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.note-replies-more {
  appearance: none;
  align-self: flex-start;
  margin: 2px 0 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.note-replies-more:hover {
  background: var(--blue-soft);
  color: var(--blue-press);
}

.note-replies-more:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.note-selector {
  display: block;
  margin-top: 6px;
  max-width: 100%;
  min-width: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: stretch;
}

.note-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.note-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.note-thumb .thumb-ph {
  font-size: 10px;
  color: var(--faint);
}

/* Non-previewable attachment → download chip */
.note-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  padding: 6px 10px 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}

.note-file-chip:hover {
  background: var(--blue-soft);
  border-color: rgba(13, 153, 255, 0.28);
}

.note-file-chip.is-downloading {
  opacity: 0.65;
  pointer-events: none;
}

.note-file-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--blue);
}

.note-file-chip.kind-pdf .note-file-ico {
  color: #dc2626;
}
.note-file-chip.kind-video .note-file-ico {
  color: #7c3aed;
}
.note-file-chip.kind-audio .note-file-ico {
  color: #059669;
}
.note-file-chip.kind-doc .note-file-ico {
  color: #2563eb;
}

.note-file-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.note-file-name {
  font-size: 11.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.note-file-sub {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}

.note-popover-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0 12px;
}

.note-popover-thumb {
  width: 52px;
  height: 52px;
}

.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.composer-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.composer-thumb {
  position: relative;
  font-size: 11px;
  padding: 5px 8px;
  padding-right: 26px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  max-width: 200px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.composer-thumb-img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.composer-thumb-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--blue);
}

.composer-thumb-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.composer-thumb-sub {
  font-size: 9.5px;
  color: var(--muted);
  white-space: nowrap;
}

.composer-thumb-remove {
  appearance: none;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s var(--ease), color 0.1s var(--ease);
}
.composer-thumb-remove:hover {
  background: var(--red-soft, rgba(239, 68, 68, 0.12));
  color: var(--red, #dc2626);
}

.composer-thumb.kind-pdf .composer-thumb-ico {
  color: #dc2626;
}
.composer-thumb.kind-video .composer-thumb-ico {
  color: #7c3aed;
}

.file-btn {
  cursor: pointer;
}

/* In-place pin/highlight composer (contextual, near click) */
.composer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: transparent;
}

.composer-popover.note-popover {
  z-index: 200;
  width: min(288px, calc(100vw - 24px));
  padding: 10px 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.02),
    0 8px 28px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.04);
  background: #fff;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

/* Drop-target state when dragging files over the composer */
.composer-popover.note-popover.is-drop-target {
  border-color: rgba(13, 153, 255, 0.65);
  box-shadow:
    0 0 0 3px rgba(13, 153, 255, 0.14),
    0 8px 28px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.04);
  background:
    linear-gradient(0deg, rgba(13, 153, 255, 0.04), rgba(13, 153, 255, 0.04)),
    #fff;
}

.composer-popover.note-popover.is-drop-target::after {
  content: "Drop image to attach";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.72);
  color: #0b6cb5;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  pointer-events: none;
}

.composer-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 28px;
}

.composer-pop-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink-2);
  min-width: 0;
}

/* Solid disc, centered against the title text.
   Modifiers are `is-*` prefixed on purpose: a bare `.pin` here collided with
   the canvas pin marker rule (position:absolute; margin:-14px 0 0 -14px),
   which tore the dot out of the flex row and parked it above/left of the
   title. `position`/`margin` are restated so no future global can do it again. */
.composer-kind-dot {
  position: static;
  margin: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex: 0 0 8px;
  display: block;
  line-height: 0;
  align-self: center;
}
.composer-kind-dot.is-highlight {
  background: var(--purple);
  border-radius: 2px;
}
.composer-kind-dot.is-reply {
  background: var(--muted);
}

.composer-popover .note-popover-close {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--faint);
  margin: 0 -4px 0 0;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.composer-popover .note-popover-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Textarea + live @/# tag preview.
   Grid-stack both layers in the same cell so wrap width/height stay locked.
   Highlight text must be character-identical or caret/selection drift. */
.composer-field {
  position: relative;
  width: 100%;
  display: grid;
  grid-template: 1fr / 1fr;
}

.composer-highlight,
.composer-input.composer-input--preview {
  grid-area: 1 / 1;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  tab-size: 8;
  box-sizing: border-box;
}

.composer-highlight {
  /* Sit under the textarea; no interaction */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
  background: transparent;
  border-style: solid;
  border-color: transparent;
  /* Defaults; JS copies exact computed padding/border from the textarea */
  padding: 9px 10px;
  border-width: 1px;
  border-radius: 8px;
  /* Reset <pre> */
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
}

/* Layout-neutral tag tint only — padding/border/weight would shift the caret */
.composer-highlight .composer-preview-tag {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.15em;
  font: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  vertical-align: baseline;
  box-shadow: none !important;
  white-space: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.composer-highlight .composer-preview-tag.is-mention {
  background: color-mix(in srgb, var(--mention-color, #64748b) 20%, transparent);
  color: color-mix(in srgb, var(--mention-color, #64748b) 82%, #0f172a);
}
.composer-highlight .composer-preview-tag.is-ticket {
  background: color-mix(in srgb, var(--blue, #0d99ff) 18%, transparent);
  color: #0b6cb5;
}

.composer-input {
  width: 100%;
  min-height: 64px;
  max-height: 148px;
  resize: none;
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  margin: 0 0 0;
  outline: none;
  font-size: 13px;
  line-height: 1.45;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease),
    background 0.12s var(--ease);
  z-index: 1;
  caret-color: var(--ink);
}

.composer-input::placeholder {
  color: var(--faint);
}

.composer-input:focus {
  border-color: #c7d2fe;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(13, 153, 255, 0.08);
}

/* Hide raw glyphs once we have content — tinted tokens show underneath.
   Keep caret + selection on this layer. */
.composer-field.has-value .composer-input.composer-input--preview {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: transparent;
}
.composer-field.has-value .composer-input.composer-input--preview::placeholder {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.composer-field.has-value .composer-input.composer-input--preview::selection {
  background: color-mix(in srgb, var(--blue, #0d99ff) 32%, transparent);
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.composer-field.has-value
  .composer-input.composer-input--preview::-moz-selection {
  background: color-mix(in srgb, var(--blue, #0d99ff) 32%, transparent);
  color: transparent;
}
.composer-field.has-value .composer-input.composer-input--preview:focus {
  background: transparent;
}

/* Pin composer: open field, no nested box */
.composer-popover .composer-field {
  margin: 0;
}
.composer-popover .composer-highlight {
  padding: 0 0 6px;
  border-width: 0;
  border-radius: 0;
  background: transparent;
}
.composer-popover .composer-input {
  min-height: 64px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 6px;
  box-shadow: none;
}

.composer-popover .composer-input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.composer-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.composer-pop-left {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.composer-priority {
  flex: 0 0 auto;
}

.composer-priority .priority-select,
.composer-priority .field-select {
  height: 28px;
  font-size: 11px;
  font-weight: 600;
  padding: 0 20px 0 8px;
  max-width: 88px;
  border-radius: 7px;
  border: 1px solid transparent;
  background-color: var(--surface-2);
  color: var(--ink-2);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23999' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.1s var(--ease), background-color 0.1s var(--ease);
}

.composer-priority .priority-select:hover,
.composer-priority .field-select:hover,
.composer-priority .priority-select:focus,
.composer-priority .field-select:focus {
  border-color: var(--border-2);
  background-color: #fff;
}

.composer-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s var(--ease), color 0.1s var(--ease);
}

.composer-icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.composer-pop-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.composer-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
  user-select: none;
  font-family: var(--mono);
}

.composer-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--faint);
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.composer-save {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.1s var(--ease), opacity 0.1s var(--ease),
    transform 0.08s var(--ease);
}

.composer-save:hover:not(:disabled) {
  background: var(--blue-press, #0b86e0);
}

.composer-save:active:not(:disabled) {
  transform: scale(0.98);
}

.composer-save:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Saving now waits on the screenshot capture — always show progress */
.composer-save.is-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 1;
  cursor: progress;
  background: var(--blue);
}

.btn-spinner {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: bn-spin 0.6s linear infinite;
}

@keyframes bn-spin {
  to {
    transform: rotate(360deg);
  }
}


/* Composer hint replacing the old live snapshot preview */
.composer-snap-hint {
  display: flex;
  width: 100%;
  text-align: left;
  cursor: default;
  font-family: inherit;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.composer-snap-hint svg {
  flex: 0 0 13px;
  opacity: 0.75;
}

.composer-file-status {
  font-size: 10.5px;
  color: var(--muted);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-snap {
  margin: 0 0 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.composer-snap[hidden] {
  display: none !important;
}

.composer-snap .snapshot-img {
  display: block;
  width: 100%;
  max-height: 64px;
  object-fit: cover;
  object-position: center;
  background: #fff;
}

.composer-images:empty {
  display: none;
}

.composer-images:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}

/* Selected-note callout on canvas */
.note-popover:not(.composer-popover) {
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Page snapshot at note time */
.snapshot-preview {
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.snapshot-status {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
}

.snapshot-status.ok {
  color: var(--green);
  border-top: 1px solid var(--border);
  background: var(--green-soft);
}

.snapshot-img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  object-position: center;
  background: #fff;
}

.note-snapshot-wrap {
  margin-top: 8px;
}

.note-snapshot {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 72px;
  text-decoration: none;
}

.note-snapshot img {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  object-position: center;
}

.note-snapshot-label {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* Figma-style note callout when clicking a pin on the canvas */
.note-popover {
  position: fixed;
  z-index: 200;
  width: min(300px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  padding: 12px 12px 10px;
  transform-origin: top left;
  animation: notePopIn 0.18s var(--ease) both;
  pointer-events: auto;
}

.note-popover.from-bottom {
  transform-origin: bottom left;
  animation-name: notePopInBottom;
}

@keyframes notePopIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes notePopInBottom {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.note-popover-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
  left: var(--arrow-left, 18px);
  top: -6px;
}

.note-popover.from-bottom .note-popover-arrow {
  top: auto;
  bottom: -6px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Popover reuses list .note-top / .note-byline; only close needs extra style */
.note-popover .note-top {
  margin-bottom: 8px;
  padding-left: 0;
}

.note-popover .note-byline {
  margin-bottom: 8px;
}

.note-popover .note-props {
  /* stay visible next to close; no hover-hide in the callout */
  opacity: 1 !important;
  pointer-events: auto !important;
}

.note-popover-close {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--muted);
  flex-shrink: 0;
}

.note-popover-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.note-popover-body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow-y: auto;
}

.note-popover .note-mention-chips,
.note-popover .note-ticket-chips,
.note-popover .note-ref-chips {
  margin-top: 6px;
}

.note-popover-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 8px;
}

.note-popover-tags .note-ref-chips,
.note-popover-tags .note-mention-chips,
.note-popover-tags .note-ticket-chips {
  padding: 0;
  margin: 0;
}

.note-popover-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--purple-soft);
  color: var(--purple);
}

.note-popover-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.note-popover-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.note-popover-reply-btn svg {
  flex-shrink: 0;
  opacity: 0.95;
}

.note-popover-icon-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.note-popover-icon-actions .icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-2);
}

.note-popover-icon-actions .icon-btn:hover {
  color: var(--ink);
  background: var(--surface-hover, #eceef1);
}

.note-popover-icon-actions .icon-btn-danger:hover {
  color: var(--red);
  background: var(--red-soft);
}

.note-popover-tags .mini-select.popover-prop {
  flex-shrink: 0;
}

/* Thread + inline reply inside pin popover */
.note-popover-replies {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
}

.note-popover-reply-item {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.note-popover-reply-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  min-width: 0;
}

.note-popover-reply-meta .note-reply-actions .note-when {
  font-size: 10px;
}

.note-popover-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-top: 0.5px;
}

.note-popover-avatar.sm {
  width: 16px;
  height: 16px;
  font-size: 7px;
  padding-top: 0.5px;
}

.note-popover-reply-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}

.note-popover-reply-body {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.note-popover-reply-form {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.note-popover-reply-form .composer-input {
  min-height: 56px;
  margin-bottom: 8px;
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  resize: none;
}

.note-popover-reply-form .composer-input:focus {
  border-color: #93c5fd;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(13, 153, 255, 0.1);
}

.note-popover-reply-form .composer-pop-foot {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.note-popover-snap {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  max-height: 100px;
  background: var(--surface-2);
  cursor: zoom-in;
}

.note-popover-snap[hidden] {
  display: none !important;
}

.note-popover-snap-loading {
  display: grid;
  place-items: center;
  height: 56px;
  font-size: 11px;
  color: var(--faint);
}

.note-popover-snap img {
  display: block;
  width: 100%;
  max-height: 100px;
  object-fit: cover;
  object-position: top;
}

.note-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: transparent;
  pointer-events: none;
}

/* ── Full-height comment detail drawer ───────────────────────────── */
.note-detail-shell {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  grid-template-columns: 1fr;
  pointer-events: none;
}

.note-detail-shell[hidden] {
  display: none !important;
}

.note-detail-backdrop {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0);
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.28s var(--ease);
  z-index: 0;
}

.note-detail-shell.is-open .note-detail-backdrop {
  background: rgba(15, 23, 42, 0.28);
}

.note-detail-shell.is-closing .note-detail-backdrop {
  background: rgba(15, 23, 42, 0);
}

.note-detail-shell.has-replay.is-open .note-detail-backdrop {
  background: rgba(8, 12, 22, 0.55);
}

/* Full-session theater: same shell, right rail lists comments */
.note-detail-shell.is-theater .note-detail-panel {
  flex: 0 0 min(380px, 36vw);
  width: min(380px, 36vw);
  max-width: 420px;
}

.theater-comment-scroll {
  padding: 10px 12px 16px;
}

.theater-comment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theater-comment-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 10px 11px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.12s var(--ease),
    background 0.12s var(--ease),
    box-shadow 0.12s var(--ease);
}

.theater-comment-card:hover {
  border-color: var(--border-strong, #c9ced6);
  background: var(--surface-2);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.theater-comment-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.theater-comment-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Session is one person — no per-card avatar/name; # + pri/status + time */
.theater-comment-props {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: wrap;
}

.theater-comment-props .note-tag,
.theater-comment-props .priority-badge,
.theater-comment-props .status-badge {
  font-size: 9px;
  padding: 1px 5px;
  pointer-events: none;
}

.theater-comment-time {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.theater-comment-body {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.theater-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
}

.theater-comment-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  flex-shrink: 0;
  font-size: 12px;
}

.theater-comment-replies {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--faint);
}

.theater-comment-replies svg {
  width: 11px;
  height: 11px;
}

.theater-comment-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 14px;
  text-align: center;
  color: var(--muted);
}

.theater-comment-empty strong {
  font-size: 13px;
  color: var(--ink-2);
}

.theater-comment-empty span {
  font-size: 12px;
  line-height: 1.4;
}

.theater-note-ts {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
}

.note-detail-layout {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  min-width: 0;
  pointer-events: none;
}

.note-detail-shell.has-replay .note-detail-layout {
  justify-content: stretch;
  pointer-events: auto;
  background: #0b0d12;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.note-detail-replay-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: #0c0c0c;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.note-detail-replay-pane[hidden] {
  display: none !important;
}

.note-detail-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--notes-sidebar-width, 320px);
  width: var(--notes-sidebar-width, 320px);
  max-width: 100vw;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.12);
  pointer-events: auto;
  will-change: transform, opacity;
  transform: translateX(12px);
  opacity: 0.85;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

.note-detail-shell.is-pass-through {
  top: 48px;
  z-index: 80;
}

.note-detail-shell.is-pass-through .note-detail-backdrop {
  pointer-events: none;
  background: transparent;
  cursor: default;
}

.note-detail-shell.is-pass-through.is-open .note-detail-backdrop,
.note-detail-shell.is-pass-through.is-closing .note-detail-backdrop {
  background: transparent;
}

.note-detail-shell.has-replay .note-detail-panel {
  flex: 0 0 min(400px, 38vw);
  width: min(400px, 38vw);
  max-width: 440px;
  box-shadow: none;
}

.note-detail-shell.is-pass-through .note-detail-panel {
  box-shadow: none;
}

.note-detail-shell.is-pass-through:not(.is-theater) .note-detail-panel {
  flex: 0 0 var(--notes-sidebar-width, 320px);
  width: var(--notes-sidebar-width, 320px);
  max-width: none;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    width 0.22s var(--ease),
    flex-basis 0.22s var(--ease);
}

.note-detail-shell.is-open .note-detail-panel {
  transform: translateX(0);
  opacity: 1;
}

.note-detail-shell.is-closing .note-detail-panel {
  transform: translateX(28px);
  opacity: 0;
}

.note-detail-shell.has-replay.is-closing .note-detail-layout {
  opacity: 0;
  transition: opacity 0.28s ease;
}

.note-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 0;
}

.note-detail-back,
.note-detail-close {
  appearance: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.note-detail-back:hover,
.note-detail-close:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.note-detail-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-top: 0.5px;
}

.note-detail-avatar.sm {
  width: 22px;
  height: 22px;
  font-size: 9px;
  padding-top: 0.5px;
}

.note-detail-meta {
  min-width: 0;
  flex: 1;
}

.note-detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.note-detail-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-detail-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  flex-shrink: 0;
}

.note-detail-kind.kind-highlight {
  background: #fff7ed;
  color: #c2410c;
}

.note-detail-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  min-width: 0;
}

.note-detail-sub .note-viewport-ico {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.note-detail-sub .note-when {
  color: var(--muted);
}

.note-detail-dot {
  color: var(--faint);
}

.note-detail-head-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.note-detail-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}

.note-detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.note-detail-tags:empty {
  display: none;
}

.note-detail-tags .note-mention-chips {
  padding: 0;
  margin: 0;
}

.note-detail-body {
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 8px;
  padding: 2px 4px;
  margin: 0 -4px;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.note-detail-body.is-timeline-active,
.note-detail-reply.is-timeline-active {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(13, 153, 255, 0.28);
}

.note-detail-reply.is-timeline-active {
  border-radius: 10px;
}

.note-detail-page {
  align-self: stretch;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid var(--border);
  padding: 10px;
  margin: 2px 0 4px;
  border-radius: 10px;
  background: var(--surface-2);
  color: inherit;
  min-width: 0;
  box-sizing: border-box;
}

.note-detail-page-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.note-detail-page-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--blue-soft);
  color: #0b6cb5;
}

.note-detail-page-ico svg {
  display: block;
}

.note-detail-page-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.note-detail-page-path {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.note-detail-page-host {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.note-detail-page-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.note-detail-page-action {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--surface);
  color: var(--ink);
  font: 600 12px/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease),
    color 0.12s var(--ease);
}

.note-detail-page-action:hover {
  background: var(--surface-hover);
  border-color: var(--border-2);
}

.note-detail-page-action.is-primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.note-detail-page-action.is-primary:hover {
  border-color: var(--blue-press);
  background: var(--blue-press);
}

.note-detail-page-action:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.note-detail-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.note-detail-thumb {
  width: 96px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 0;
  cursor: pointer;
}

.note-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.note-detail-snap {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
}

.note-detail-snap[hidden] {
  display: none !important;
}

.note-detail-snap img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  object-position: top;
}

.note-detail-snap-loading {
  display: block;
  padding: 16px;
  font-size: 12px;
  color: var(--muted);
}

.note-detail-replay {
  display: flex;
}

.note-detail-thread {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-detail-thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.note-detail-thread-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 650;
  color: var(--ink-2);
}

.note-detail-replies {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-detail-replies-empty {
  font-size: 12.5px;
  color: var(--faint);
  padding: 4px 0 2px;
}

.note-detail-reply {
  position: relative;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.note-detail-reply-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  min-width: 0;
}

.note-detail-reply-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}

.note-detail-reply-meta .note-reply-actions .note-when {
  font-size: 10.5px;
  color: var(--faint);
}

.note-detail-reply-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.note-detail-reply .note-mention-chips {
  padding: 0;
  margin-top: 6px;
}

.note-detail-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 10px 12px 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.note-detail-icon-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.note-detail-icon-actions .icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-2);
}

.note-detail-icon-actions .icon-btn:hover {
  color: var(--ink);
  background: var(--surface-hover, #eceef1);
}

.note-detail-icon-actions .icon-btn-danger:hover {
  background: var(--red-soft);
  color: var(--red);
}

.note-detail-reply-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-detail-reply-form .composer-input {
  min-height: 72px;
  max-height: 220px;
  resize: none;
  overflow-y: hidden;
}

.note-detail-reply-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.note-detail-reply-form .composer-images,
.note-popover-reply-form .composer-images {
  margin-top: 6px;
}

.note-detail-reply-form,
.note-popover-reply-form {
  position: relative;
}

.note-detail-reply-form.is-drop-target,
.note-popover-reply-form.is-drop-target {
  border-color: rgba(13, 153, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.14);
}

.note-detail-reply-form.is-drop-target::after,
.note-popover-reply-form.is-drop-target::after {
  content: "Drop file to attach";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.78);
  color: #0b6cb5;
  font-size: 12.5px;
  font-weight: 650;
  pointer-events: none;
}

.note-detail-reply .note-images,
.note-popover-reply-item .note-images {
  margin-top: 6px;
}

body.note-detail-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .note-detail-shell.has-replay .note-detail-layout {
    flex-direction: column;
  }

  .note-detail-shell.has-replay .note-detail-replay-pane {
    flex: 1 1 48%;
    min-height: 240px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .note-detail-shell.has-replay .note-detail-panel {
    flex: 1 1 52%;
    width: 100%;
    max-width: none;
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .note-detail-backdrop {
    display: none;
  }

  .note-detail-panel {
    width: 100%;
    max-width: 100vw;
    flex-basis: 100%;
    border-left: 0;
    box-shadow: none;
  }

  .note-detail-shell.has-replay .note-detail-replay-pane {
    min-height: 36vh;
  }
}

/* Keyboard hints on tools */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}

.tool-btn.active .kbd {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
}

.tool-btn[data-mode="none"].active {
  background: var(--surface-hover);
  color: var(--ink);
}

.shortcuts-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  font-weight: 600;
  color: var(--muted);
}

.shortcuts-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Status toast — click × or toast body (or Esc) to dismiss */
.bn-app-toast {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 190;
  max-width: min(440px, calc(100vw - 24px));
  padding: 10px 8px 10px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.94);
  color: #f8fafc;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  cursor: pointer;
  animation: modeBannerIn 0.16s var(--ease) both;
}

.bn-app-toast[hidden] {
  display: none !important;
}

.bn-app-toast-msg {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.bn-app-toast-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.85;
}

.bn-app-toast-dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}

.bn-app-toast-action {
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font: 650 12px/1 var(--font);
  cursor: pointer;
}
.bn-app-toast-action:hover {
  background: rgba(255, 255, 255, 0.24);
}
.bn-app-toast-action:disabled {
  opacity: 0.55;
  cursor: wait;
}

.bn-app-toast[data-tone="warn"] {
  background: rgba(69, 26, 3, 0.95);
  color: #ffedd5;
}

.bn-app-toast[data-tone="info"] {
  background: rgba(15, 23, 42, 0.94);
}

/* Locating note — preview banner + list feedback */
.locating-banner {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px, calc(100% - 24px));
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
  animation: modeBannerIn 0.16s var(--ease) both;
}

.locating-banner-dismiss {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.locating-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.2);
}

.locating-banner[hidden] {
  display: none !important;
}

.locating-banner-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.locating-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  flex-shrink: 0;
  animation: bn-spin 0.7s linear infinite;
}

.note-card.is-locating {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #f0f7ff 0%, #fff 100%);
  box-shadow: 0 0 0 2px rgba(13, 153, 255, 0.12);
  pointer-events: none;
}

.note-card.is-locating::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(13, 153, 255, 0.25);
  border-top-color: var(--blue);
  animation: bn-spin 0.7s linear infinite;
}

.notes-list,
.kanban-board {
  transition: opacity 0.16s var(--ease);
}

body.is-locating-note .notes-list,
body.is-locating-note .kanban-board {
  opacity: 0.72;
  cursor: wait;
}

body.is-locating-note .note-card:not(.is-locating) {
  pointer-events: none;
}

.shortcuts-modal .shortcuts-grid {
  display: grid;
  gap: 10px;
  margin: 8px 0 0;
}

.shortcuts-modal .shortcuts-grid > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}

.shortcuts-modal .shortcuts-grid .kbd {
  min-width: 22px;
  height: 22px;
  font-size: 11px;
}

/* View toggle List / Board */
.view-toggle {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}

.view-btn {
  border: 0;
  background: transparent;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
    box-shadow 0.14s var(--ease), transform 0.08s var(--ease);
}

.view-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.view-btn:hover:not(.active) {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
}

.view-btn:active {
  transform: scale(0.96);
}

/* "Something is waiting on you" dot on the Review workspace tab */
.workspace-btn-dot {
  width: 6px;
  height: 6px;
  margin-left: 1px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}

/* Unread count on the Mine tab */
.view-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
}

/* ── Mine: comments waiting on you ─────────────────────────────────────── */
.task-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 2px 10px;
}

.task-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.task-header-text strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.task-header-text span {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-list.is-handled {
  margin-top: 6px;
  opacity: 0.75;
}

.task-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease),
    box-shadow 0.14s var(--ease);
}

.task-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--border-2);
}

.task-row.pri-accent-low::before {
  background: #d1d5db;
}
.task-row.pri-accent-medium::before {
  background: var(--blue);
}
.task-row.pri-accent-high::before {
  background: #f59e0b;
}
.task-row.pri-accent-urgent::before {
  background: var(--red);
}

.task-row:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}

.task-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.task-row.is-unread {
  background: var(--blue-soft);
  border-color: rgba(13, 153, 255, 0.28);
}

.task-row.is-handled {
  background: var(--surface-2);
}

.task-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.task-top .note-when {
  margin-left: auto;
  flex-shrink: 0;
}

.task-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  visibility: hidden;
}

.task-row.is-unread .task-dot {
  visibility: visible;
}

.task-chip {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.task-chip.is-mention {
  background: var(--purple-soft);
  color: #6d28d9;
}

.task-chip.is-reply {
  background: var(--green-soft);
  color: #0f7a43;
}

.task-chip.is-assigned {
  background: var(--blue-soft);
  color: #1d6fb8;
}

.task-event {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.task-event-text {
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

.task-event-author {
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}

.task-event-body {
  overflow-wrap: anywhere;
}

.task-root {
  display: flex;
  gap: 5px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  overflow: hidden;
}

.task-root-author {
  font-weight: 600;
  color: var(--ink-2);
  flex-shrink: 0;
}

.task-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-page {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.task-meta {
  font-size: 10.5px;
  color: var(--muted);
  flex-shrink: 0;
}

.task-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.task-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
    border-color 0.14s var(--ease);
}

.task-btn:hover {
  background: var(--surface-hover);
  color: var(--ink);
  border-color: var(--border-2);
}

.task-btn:active {
  transform: scale(0.97);
}

.task-btn-icon {
  min-width: 24px;
  padding: 3px 6px;
  line-height: 1;
}

.task-handled-toggle {
  margin-top: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}

.task-handled-toggle:hover {
  background: var(--surface-2);
  color: var(--ink-2);
}

/* Priority / status tags. Cards are read-only; drawer controls use selects. */
.note-tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.3;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.priority-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.3;
}

.pri-low {
  background: #eef0f2;
  color: #6b7280;
}

.pri-medium {
  background: var(--blue-soft);
  color: #1d6fb8;
}

.pri-high {
  background: #fff3e0;
  color: #c2410c;
}

.pri-urgent {
  background: var(--red-soft);
  color: var(--red);
}

.status-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.3;
}

.status-badge.status-open {
  background: var(--surface-2);
  color: var(--muted);
}

.status-badge.status-in_progress {
  background: #f5f3ff;
  color: #6d28d9;
}

.status-badge.status-pending_review {
  background: #fff7ed;
  color: #b45309;
}

.status-badge.status-done {
  background: var(--green-soft);
  color: var(--green);
}

/* Tone palette — every column (built in or custom) maps to one of these.
   Custom columns only ever get a tone class, so these must stand alone. */
.status-badge.status-tone-gray,
.mini-select.status-tone-gray {
  background: var(--surface-2);
  color: var(--muted);
  --mini-fill: var(--surface-2);
}
.status-badge.status-tone-violet,
.mini-select.status-tone-violet {
  background: #f5f3ff;
  color: #6d28d9;
  --mini-fill: #f5f3ff;
}
.status-badge.status-tone-amber,
.mini-select.status-tone-amber {
  background: #fff7ed;
  color: #b45309;
  --mini-fill: #fff7ed;
}
.status-badge.status-tone-green,
.mini-select.status-tone-green {
  background: var(--green-soft);
  color: var(--green);
  --mini-fill: var(--green-soft);
}
.status-badge.status-tone-blue,
.mini-select.status-tone-blue {
  background: #eff6ff;
  color: #1d4ed8;
  --mini-fill: #eff6ff;
}
.status-badge.status-tone-rose,
.mini-select.status-tone-rose {
  background: #fff1f2;
  color: #be123c;
  --mini-fill: #fff1f2;
}
.status-badge.status-tone-teal,
.mini-select.status-tone-teal {
  background: #f0fdfa;
  color: #0f766e;
  --mini-fill: #f0fdfa;
}
.mini-select[class*="status-tone-"] {
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}

.note-detail-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.note-detail-tags .note-tag,
.note-detail-tags .priority-badge,
.note-detail-tags .status-badge {
  font-size: 10px;
  padding: 3px 7px;
}

.note-detail-tags .note-tag-select {
  width: auto;
  min-width: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
}

.note-detail-tags .note-tag-select:hover {
  filter: brightness(0.96);
}

.note-detail-tags .note-tag-select:focus-visible {
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.18);
}

.note-assignee {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.note-assignee .note-avatar {
  box-shadow: 0 0 0 1.5px var(--surface);
}

.assignee-combo {
  position: relative;
  flex-shrink: 0;
  min-width: 0;
}

.assignee-combo-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 148px;
  height: 26px;
  padding: 0 8px 0 5px;
  border: 0;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  outline: none;
  transition: background-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.assignee-combo-trigger:hover {
  background: #eceef1;
}

.assignee-combo-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.18);
}

.assignee-combo.has-assignee .assignee-combo-trigger {
  background: var(--blue-soft);
  color: #1d4ed8;
}

.assignee-combo.has-assignee .assignee-combo-trigger:hover {
  filter: brightness(0.97);
}

.assignee-combo-trigger .note-avatar.sm {
  width: 16px;
  height: 16px;
}

.assignee-combo-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignee-combo-label.is-empty {
  color: var(--muted);
  font-weight: 600;
}

.assignee-combo-empty-ico,
.assignee-combo-empty-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
}

.assignee-combo-empty-avatar {
  width: 24px;
  height: 24px;
}

.assignee-combo-chev {
  margin-left: 1px;
  flex-shrink: 0;
  opacity: 0.55;
}

.assignee-combo-menu {
  max-height: none;
  overflow: visible;
  padding: 6px;
}

.assignee-combo-search {
  padding: 2px 2px 6px;
}

.assignee-combo-input {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
}

.assignee-combo-input:focus {
  border-color: var(--border-2);
  background: #fff;
}

.assignee-combo-list {
  max-height: 240px;
  overflow: auto;
  scrollbar-width: thin;
}

.assignee-combo-empty {
  padding: 12px 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.assignee-combo-item.is-selected {
  background: var(--surface-2);
}

.assignee-combo-check {
  margin-left: auto;
  color: #1d4ed8;
  display: inline-flex;
}

.assignee-combo-you {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.note-detail-tags .assignee-combo-trigger {
  height: 24px;
  max-width: 160px;
  padding: 0 7px 0 4px;
  font-size: 11px;
}

.composer-priority .assignee-combo-trigger {
  height: 28px;
  max-width: 118px;
  padding: 0 8px 0 6px;
}

.status-mini {
  font-size: 10.5px;
  padding: 3px 4px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  max-width: 96px;
}

.field-select,
.priority-select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 9px 11px;
  font-size: 13px;
  outline: none;
}

.field-select:focus,
.priority-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}

/* Kanban — board fills sidebar; columns keep a readable min width and
   scroll horizontally when the sidebar is too narrow for all of them. */
.kanban-board {
  --kanban-col-min: 280px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  /* 0 + flex-grow forces a definite height so columns can scroll inside */
  height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  display: grid;
  /* Equal tracks — item min-width:0 so content cannot stretch one column */
  grid-template-columns: repeat(var(--kanban-cols, 4), minmax(var(--kanban-col-min), 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  padding: 0 10px 12px;
  align-content: stretch;
  align-items: stretch;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-snap-type: x proximity;
  scrollbar-gutter: stable both-edges;
}

.kanban-board::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.kanban-board::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}

.kanban-board::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
}

.kanban-board[hidden] {
  display: none !important;
}

.kanban-board.is-status-filtered {
  grid-template-columns: minmax(var(--kanban-col-min), 1fr);
}

.kanban-col[data-tone="violet"] .kanban-col-title { color: #6d28d9; }
.kanban-col[data-tone="amber"] .kanban-col-title { color: #b45309; }
.kanban-col[data-tone="green"] .kanban-col-title { color: var(--green); }
.kanban-col[data-tone="blue"] .kanban-col-title { color: #1d4ed8; }
.kanban-col[data-tone="rose"] .kanban-col-title { color: #be123c; }
.kanban-col[data-tone="teal"] .kanban-col-title { color: #0f766e; }

.kanban-col {
  display: flex;
  flex-direction: column;
  /* Grid default min-height:auto blocks shrinking → no scroll */
  min-height: 0;
  /* Keep the track min so extra columns overflow and the board can scroll */
  min-width: var(--kanban-col-min, 280px);
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  box-sizing: border-box;
}

.kanban-col-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface-2);
}

.kanban-col-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-col-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border-radius: 999px;
  padding: 1px 7px;
}

.kanban-col-body {
  flex: 1 1 auto;
  min-height: 72px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

.kanban-col-body::-webkit-scrollbar {
  width: 7px;
}

.kanban-col-body::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}

.kanban-col-body::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
}

.kanban-col-body {
  transition: background 0.14s var(--ease), box-shadow 0.14s var(--ease);
}

.kanban-col.drag-over,
.kanban-col-body.drag-over {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 2px rgba(13, 153, 255, 0.35);
}

.kanban-col-body.drag-over .kanban-empty {
  border-color: var(--blue);
  border-style: solid;
  color: var(--blue);
  background: rgba(255, 255, 255, 0.6);
}

.kanban-empty {
  font-size: 11.5px;
  color: var(--faint);
  text-align: center;
  padding: 20px 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  flex-shrink: 0;
  transition: border-color 0.14s var(--ease), color 0.14s var(--ease),
    background 0.14s var(--ease);
}

/* While a card is in flight, make every column read as a target */
body.is-dragging-note .kanban-board {
  scroll-snap-type: none;
}

body.is-dragging-note .kanban-col-body {
  background: rgba(13, 153, 255, 0.04);
}

body.is-dragging-note .note-card:not(.dragging) {
  pointer-events: none;
}

.note-card.compact {
  margin-bottom: 0;
  padding: 8px 9px;
  min-height: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
  cursor: grab;
}

.note-card.compact.dragging {
  cursor: grabbing;
  opacity: 0.55;
}

.note-card.compact .note-body {
  flex: 1 1 auto;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.note-card.dragging {
  opacity: 0.45;
  transform: scale(0.98) rotate(-1deg);
  box-shadow: none;
  cursor: grabbing;
}

.note-card.compact {
  cursor: grab;
}

.note-card.compact:active {
  cursor: grabbing;
}

/* Kanban uses the same header as list: # · size | priority, then byline. */
.note-card.compact .note-top {
  margin-bottom: 4px;
  gap: 4px;
  min-height: 0;
  flex-wrap: nowrap;
}

.note-card.compact .note-meta {
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.note-card.compact .note-props {
  margin-left: auto;
  opacity: 1;
  pointer-events: auto;
}

.note-card.compact:hover .note-props,
.note-card.compact.active .note-props,
.note-card.compact:focus-within .note-props {
  opacity: 1;
  pointer-events: auto;
}

.note-card.compact .note-byline {
  margin: 0 0 4px;
  gap: 6px;
}

.note-card.compact .note-byline .note-author {
  font-size: 11.5px;
}

.note-card.compact .note-byline .note-when {
  font-size: 10px;
}

/* Board cards are narrow — keep tools in-flow under the byline/body so they
   don't cover priority. */
.note-card.compact .note-tools {
  position: static;
  transform: none;
  background: none;
  padding-left: 0;
  opacity: 1;
  pointer-events: auto;
  gap: 3px;
  width: auto;
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

.note-card.compact .mini-select {
  max-width: 84px;
  min-width: 0;
  flex: 0 1 auto;
  font-size: 10px;
  padding-right: 16px;
  background: var(--mini-fill) var(--mini-chev) no-repeat right 5px center / 7px 5px;
}

.note-card.compact .note-tools .icon-btn:last-child {
  margin-left: auto;
}

.note-card.compact .note-tools .note-reply-count {
  margin-left: 2px;
  color: var(--muted);
}

.note-card.compact .board-play-btn {
  background: var(--blue-soft);
  color: var(--blue-press);
}

.note-card.compact .board-play-btn:hover {
  background: #d5edff;
}

.note-thumbnail-loading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

.note-thumbnail-spinner {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 2px solid rgba(13, 153, 255, 0.2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: bn-spin 0.7s linear infinite;
}

.note-card.compact .note-thumbnail-loading {
  min-height: 28px;
  margin-top: 3px;
  padding: 5px 7px;
  font-size: 9.5px;
}

/* Board needs three columns, so give the sidebar more room when there is any
   to give. Driven by a body attribute rather than :has() so the width is
   stable in every browser and animates with the layout. The comment sheet
   uses the same --notes-sidebar-width so it covers the Kanban exactly. */
.room-body {
  transition: grid-template-columns 0.22s var(--ease);
}

@media (min-width: 940px) {
  body[data-bn-view="board"]:not([data-bn-sidebar-resized]) {
    --notes-sidebar-width: max(440px, 34vw);
  }
}

@media (min-width: 1400px) {
  body[data-bn-view="board"]:not([data-bn-sidebar-resized]) {
    --notes-sidebar-width: max(480px, 32vw);
  }
}

/* Mode cursors only on the page preview — not on composer / panels / chrome.
   (Previously body itself used the pin cursor, so the comment modal kept it.) */
body[data-bn-tool="pin"],
body[data-bn-tool="highlight"],
body[data-bn-tool="none"] {
  cursor: default;
}

body[data-bn-tool="pin"] .preview-wrap {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%230d99ff' stroke='%23fff' stroke-width='1.5' d='M16 3c-4.4 0-8 3.4-8 7.6 0 5.4 6.2 12.6 7.5 14.1a.7.7 0 0 0 1 0C17.8 23.2 24 16 24 10.6 24 6.4 20.4 3 16 3z'/%3E%3Ccircle cx='16' cy='11' r='3' fill='%23fff'/%3E%3C/svg%3E") 16 28, crosshair;
}

body[data-bn-tool="highlight"] .preview-wrap {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='5' y='5' width='22' height='22' rx='3' fill='none' stroke='%239747ff' stroke-width='2.5'/%3E%3Cpath stroke='%239747ff' stroke-width='2' stroke-linecap='round' d='M5 16h22M16 5v22'/%3E%3C/svg%3E") 16 16, cell;
}

/* Comment / reply popovers + drawers always use normal UI cursors */
.composer-popover,
.composer-popover *,
.composer-backdrop,
.note-popover,
.note-detail-shell,
.note-detail-shell * {
  cursor: revert;
}
.composer-popover button,
.composer-popover label,
.composer-popover .composer-icon-btn,
.composer-popover .composer-save,
.composer-popover .composer-thumb-remove,
.note-popover button,
.note-detail-shell button {
  cursor: pointer;
}
.composer-popover textarea,
.composer-popover input,
.note-detail-shell textarea,
.note-detail-shell input {
  cursor: text;
}

/* Base geometry for both lives with the note-card block above; these are the
   button resets plus the affordance for opening the lightbox. */
.note-snapshot,
.note-thumb {
  cursor: zoom-in;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  width: 100%;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
    border-color 0.16s var(--ease);
}

.note-thumb {
  width: 56px;
}

.note-snapshot:hover,
.note-thumb:hover {
  border-color: var(--border-2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.note-snapshot:active,
.note-thumb:active {
  transform: translateY(0) scale(0.98);
}

.thumb-err {
  color: var(--red) !important;
  font-size: 10px !important;
  padding: 8px;
  text-align: center;
}

/* Fullscreen lightbox */
.bn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: fadeIn 0.15s var(--ease);
}

.bn-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.78);
  backdrop-filter: blur(4px);
}

.bn-lightbox-panel {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.bn-lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
}

.bn-lightbox-panel.has-note .bn-lightbox-img {
  max-height: calc(92vh - 180px);
}

.bn-lightbox-img {
  display: block;
  max-width: min(1100px, 92vw);
  max-height: calc(92vh - 72px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  background: #111;
}

.bn-lightbox-caption {
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  opacity: 0.9;
  max-width: min(720px, 90vw);
  padding: 0 40px;
}

.bn-lightbox-caption[hidden] {
  display: none !important;
}

.bn-lightbox-counter {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.bn-lightbox-nav {
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(15, 15, 15, 0.55);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: background 0.12s var(--ease), transform 0.12s var(--ease);
}

.bn-lightbox-nav:hover {
  background: rgba(15, 15, 15, 0.78);
}

.bn-lightbox-nav:active {
  transform: translateY(-50%) scale(0.96);
}

.bn-lightbox-nav svg {
  display: block;
}

.bn-lightbox-prev {
  left: 10px;
}

.bn-lightbox-next {
  right: 10px;
}

.bn-lightbox-note {
  width: 100%;
  max-width: min(720px, 92vw);
  padding: 12px 14px 14px;
  border-radius: 10px;
  background: #fff;
  color: #171717;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

.bn-lightbox-note-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.bn-lightbox-note-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  box-sizing: border-box;
  padding-top: 0.5px;
}

.bn-lightbox-note-author {
  font-size: 12px;
  font-weight: 700;
}

.bn-lightbox-note-number {
  color: #737373;
  font-size: 11px;
  font-weight: 600;
}

.bn-lightbox-note-body {
  max-height: 96px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.45;
}

.bn-lightbox-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: #fff;
  color: #111;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 4;
  line-height: 0;
}

.bn-lightbox-close svg {
  display: block;
  flex-shrink: 0;
}

.bn-lightbox-close:hover {
  background: #f3f4f6;
}

@media (max-width: 640px) {
  .bn-lightbox-prev {
    left: 4px;
  }
  .bn-lightbox-next {
    right: 4px;
  }
  .bn-lightbox-nav {
    width: 36px;
    height: 36px;
  }
}

/* note-popover-snap styles live above with the popover block */

/* =========================
   Responsive chrome
   The toolbar packs a title, URL bar, 4 resolutions, 3 tools, presence and
   Share into 48px. Below ~1200px that stops fitting, so pieces drop in order
   of how recoverable they are elsewhere (labels → keycaps → resolutions).
   ========================= */

@media (max-width: 1240px) {
  .tool-btn .kbd {
    display: none;
  }

  .toolbar-center {
    gap: 4px;
    padding: 0 4px;
  }
}

@media (max-width: 1100px) {
  /* Tools become icon-only; the tooltip still names them */
  .tool-btn {
    padding: 0 8px;
    gap: 0;
    font-size: 0;
  }

  .tool-btn .icon {
    width: 15px;
    height: 15px;
  }

  .toolbar-title {
    max-width: 150px;
  }
}

@media (max-width: 900px) {
  .toolbar {
    gap: 6px;
    padding: 0 8px;
  }

  /* Resolution switching is meaningless on a phone-width canvas */
  .viewport-btns,
  .toolbar-divider,
  .shortcuts-btn {
    display: none;
  }

  .url-form {
    min-width: 0;
  }

  .toolbar-title {
    max-width: 120px;
  }

  .viewport-badge {
    right: 8px;
    bottom: 8px;
    font-size: 10px;
    padding: 4px 7px;
  }

  .preview-wrap {
    padding: 10px;
  }

}

/* Below the width where three columns fit in the sidebar, stop pretending:
   the board becomes a snapped carousel rather than three squeezed columns
   with the last one sliced off at the edge. */
@media (max-width: 939px) {
  .kanban-board {
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 85%);
    grid-template-columns: none;
    scroll-snap-type: x mandatory;
  }
}

@media (max-width: 700px) {
  .toolbar-title-text {
    display: none;
  }

  .toolbar-title-static {
    display: none;
  }

  .toolbar-title {
    max-width: none;
    padding: 0 6px;
  }

  .share-btn {
    padding: 0 10px;
  }

  /* Keep at most a couple of faces; the rest is in the notes themselves */
  .presence .avatar:nth-child(n + 4) {
    display: none;
  }

  .sidebar-header {
    padding: 10px 10px 8px;
  }

}

@media (max-width: 560px) {
  /* The URL bar and Share cannot both fit — the bar wins, Share is in the
     title menu's share flow and via the browser's own address bar. */
  .toolbar-center {
    padding: 0;
  }

  .url-form .btn {
    padding: 0 8px;
  }

  .tool-btn {
    padding: 0 6px;
  }

  .room-body {
    grid-template-rows: minmax(0, 1fr) minmax(180px, 42dvh);
  }
}

/* Coarse pointers never hover, so controls that only appear on hover would be
   unreachable. Show them outright. */
@media (hover: none) {
  .note-tools {
    opacity: 1;
    pointer-events: auto;
  }

  .note-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* =========================
   Session replay
   ========================= */

.rec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
/* `hidden` must beat the display above — Rec is Web-only. */
.rec-btn[hidden] {
  display: none !important;
}
.rec-btn:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.rec-btn .rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  flex-shrink: 0;
}
.rec-btn.is-recording {
  color: var(--red);
  border-color: rgba(242, 72, 34, 0.35);
  background: var(--red-soft);
}
.rec-btn.is-recording .rec-dot {
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(242, 72, 34, 0.5);
  animation: rec-pulse 1.4s ease infinite;
}
.rec-btn.is-paused {
  color: var(--orange);
  border-color: rgba(255, 114, 98, 0.4);
  background: #fff3f0;
}
.rec-btn.is-paused .rec-dot {
  background: var(--orange);
}
.rec-btn.is-failed {
  color: var(--muted);
  border-color: var(--border-2);
}
.rec-btn.is-failed .rec-dot {
  background: var(--faint);
}
.rec-btn.is-off .rec-dot {
  background: var(--border-2);
}
/* No page on canvas — auto-record idle */
.rec-btn.is-idle-canvas {
  color: var(--faint);
  border-color: var(--border);
  background: var(--surface);
}
.rec-btn.is-idle-canvas .rec-dot {
  background: var(--border-2);
  box-shadow: none;
  animation: none;
}

@keyframes rec-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 72, 34, 0.45);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(242, 72, 34, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 72, 34, 0);
  }
}

.note-context-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-soft);
  flex-shrink: 0;
}

.replay-modal-backdrop {
  z-index: 10050;
}
.replay-modal {
  width: min(1100px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Embedded inside full-comment detail (left pane) */
.replay-embed {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
  background: #0c0c0c;
  color: #f2f2f2;
  overflow: hidden;
}
.replay-embed .replay-modal-head {
  padding: 6px 10px;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}
.replay-modal-head[hidden] {
  display: none !important;
}
.replay-modal-head .replay-modal-actions {
  margin-left: auto;
}
.replay-embed .replay-modal-head-main {
  flex: 1;
  min-width: 0;
}
.replay-embed .replay-modal-head strong,
.replay-embed .replay-session-title {
  color: #f5f5f5;
  font-size: 13px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.replay-embed .replay-modal-head .modal-hint,
.replay-embed .replay-modal-head .replay-size-hint {
  color: rgba(255, 255, 255, 0.48);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.replay-session-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.replay-browser-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 6px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.replay-browser-address {
  flex: 1;
  min-width: 0;
}
.replay-browser-address-placeholder {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11.5px;
}
.replay-embed .replay-browser-bar {
  background: #111318;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.replay-embed .replay-browser-address-placeholder {
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.12);
}
.replay-session-nav-btn {
  min-width: 30px;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-weight: 700 !important;
}
.replay-session-nav-btn:disabled,
.theater-session-nav .icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.replay-modal-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* All-sessions switcher (over full recording head) */
.theater-session-switcher {
  position: absolute;
  top: calc(100% + 6px);
  right: 10px;
  z-index: 40;
  width: min(340px, calc(100vw - 48px));
  max-height: min(420px, 55vh);
  display: flex;
  flex-direction: column;
  background: #161920;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  color: #f2f2f2;
}
.theater-session-switcher-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.theater-session-search-wrap {
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.theater-session-search {
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f2f2f2;
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.theater-session-search::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.theater-session-search:focus {
  border-color: rgba(13, 153, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(13, 153, 255, 0.15);
}
.theater-session-search-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
.theater-session-item {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-radius: 9px;
}
.theater-session-pick {
  appearance: none;
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 9px 8px 9px 10px;
  border-radius: 9px 0 0 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.theater-session-rename {
  appearance: none;
  border: 0;
  flex-shrink: 0;
  width: 32px;
  margin: 0;
  padding: 0;
  border-radius: 0 9px 9px 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  cursor: pointer;
}
.theater-session-rename:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.theater-session-item.is-current .theater-session-pick {
  background: transparent;
}
.theater-session-switcher-head strong {
  font-size: 12.5px;
  font-weight: 650;
  color: #f5f5f5;
}
.theater-session-switcher-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}
.theater-session-switcher-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.theater-session-switcher-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.theater-session-switcher-list {
  overflow: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theater-session-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.theater-session-item.is-current {
  background: rgba(13, 153, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(13, 153, 255, 0.35);
}
.theater-session-item[hidden] {
  display: none !important;
}
.theater-session-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.theater-session-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theater-session-item-title {
  font-size: 12.5px;
  font-weight: 650;
  color: #f2f2f2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theater-session-now {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6ec8ff;
}
.theater-session-item-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.48);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theater-session-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.theater-session-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.theater-session-badge {
  font-weight: 600;
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.replay-embed .replay-player-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}
.replay-embed .replay-timeline {
  flex-shrink: 0;
  padding: 9px 14px 2px;
  background: #111318;
}
.replay-embed .replay-modal-foot {
  flex-shrink: 0;
  background: #111318;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.replay-embed .replay-time-labels {
  color: rgba(255, 255, 255, 0.45);
}
/* Ghost buttons inside the dark embed must not keep the light-surface .btn-ghost fill */
.replay-embed .btn,
.replay-embed .btn-ghost,
.replay-embed .btn-sm {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
}
.replay-embed .btn:hover,
.replay-embed .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
.replay-embed .btn.active {
  background: rgba(13, 153, 255, 0.22) !important;
  border-color: rgba(13, 153, 255, 0.4) !important;
  color: #9ad4ff !important;
}
.replay-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.replay-modal-head strong {
  font-size: 15px;
}
.replay-modal-head .modal-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.replay-modal-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.replay-modal-actions .replay-delete-btn {
  color: var(--red);
}
.replay-modal-actions .replay-delete-btn:hover {
  background: var(--red-soft);
  color: var(--red);
}
.replay-modal-actions .replay-delete-btn:disabled,
.replay-modal-actions .replay-delete-btn.is-deleting {
  opacity: 0.75;
  cursor: wait;
}
.replay-icon-action {
  min-width: 32px !important;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.replay-delete-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: replays-spin 0.7s linear infinite;
  display: block;
}
.replay-embed .replay-delete-btn {
  color: #f87171 !important;
}
.replay-embed .replay-delete-btn:hover {
  background: rgba(248, 113, 113, 0.16) !important;
  color: #fecaca !important;
}
.replay-player-wrap {
  position: relative;
  background: #0c0c0c;
  min-height: 320px;
  height: min(62vh, 720px);
  max-height: min(62vh, 720px);
  overflow: hidden;
  /* Stage is absolutely centered (see .replay-player-stage) so the letterbox
     sits in the true middle of whatever space the wrap gets. */
  display: block;
  padding: 0;
  box-sizing: border-box;
}
.replay-player-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  z-index: 2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(13, 153, 255, 0.08), transparent 70%),
    #0c0c0c;
}
.replay-player-loading[hidden] {
  display: none !important;
}

/* —— Replay loader —— */
.replay-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(320px, 100%);
  text-align: center;
}
.replay-loader-frame {
  width: 168px;
  height: 108px;
  border-radius: 10px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.replay-loader-chrome {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.replay-loader-chrome span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.replay-loader-chrome span:nth-child(1) {
  background: rgba(242, 72, 34, 0.55);
}
.replay-loader-chrome span:nth-child(2) {
  background: rgba(255, 205, 41, 0.5);
}
.replay-loader-chrome span:nth-child(3) {
  background: rgba(20, 174, 92, 0.5);
}
.replay-loader-screen {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #161616 0%, #0f0f0f 100%);
}
.replay-loader-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(13, 153, 255, 0.07) 48%,
    rgba(151, 71, 255, 0.08) 52%,
    transparent 65%
  );
  background-size: 200% 100%;
  animation: bn-replay-shimmer 1.6s ease-in-out infinite;
}
.replay-loader-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  left: 28%;
  top: 38%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5 3l15 11-7 1.5L10 24z' fill='%230d99ff' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  animation: bn-replay-cursor 2.4s ease-in-out infinite;
  z-index: 1;
}
.replay-loader-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.replay-loader-title {
  font-size: 14px;
  font-weight: 600;
  color: #f0f0f0;
  letter-spacing: -0.01em;
}
.replay-loader-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  min-height: 1.4em;
  transition: opacity 0.2s var(--ease);
}
.replay-loader-bar {
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.replay-loader-bar-fill {
  height: 100%;
  width: 4%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--purple) 100%);
  box-shadow: 0 0 12px rgba(13, 153, 255, 0.45);
  transition: width 0.28s var(--ease);
}
.replay-loader-pct {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.02em;
}
.replay-loader-error {
  gap: 10px;
  max-width: 340px;
}
.replay-loader-error-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #ffb4a8;
  background: rgba(242, 72, 34, 0.15);
  border: 1px solid rgba(242, 72, 34, 0.25);
}
.replay-loader-error .replay-loader-title {
  color: #ffe8e4;
}
.replay-loader-error .replay-loader-sub {
  color: rgba(255, 255, 255, 0.48);
}

@keyframes bn-replay-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@keyframes bn-replay-cursor {
  0%,
  100% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(42px, 18px);
  }
  55% {
    transform: translate(28px, 36px);
  }
  80% {
    transform: translate(56px, 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .replay-loader-shimmer,
  .replay-loader-cursor {
    animation: none;
  }
  .replay-loader-bar-fill {
    transition: none;
  }
}

/* Letterbox that matches scaled visual size of the recording.
   Centered in the wrap via top/left 50% + translate(-50%,-50%). */
.replay-player-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex-shrink: 0;
  overflow: hidden;
  background: #111;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  margin: 0;
}

/* Native recorded viewport size — scaled via transform, never stretched */
.replay-player-host {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background: #fff;
  transform-origin: top left;
}
.replay-player-host .replayer-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.replay-player-host iframe,
.replay-player-host .replayer-wrapper iframe {
  border: 0 !important;
  max-width: none !important;
  max-height: none !important;
  background: #fff !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  /* width/height set in JS from Meta event (original screen size) */
}

/* Cursor must sit above the replay iframe (rrweb appends mouse first, iframe second) */
.replay-player-host .replayer-mouse {
  position: absolute !important;
  z-index: 20 !important;
  pointer-events: none !important;
  width: 40px !important;
  height: 40px !important;
  /* The pointer tip is at 6,3.5 in the SVG's 32px viewBox. Keep that exact
     hotspot on rrweb's recorded coordinate as the cursor is resized. */
  margin-left: -7.5px;
  margin-top: -4.375px;
  /* High-contrast pointer + soft halo so it reads on any page */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 3.5l18 13.2-8.2 1.7L12.5 28z' fill='%230d99ff' stroke='%23ffffff' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M6 3.5l18 13.2-8.2 1.7L12.5 28z' fill='none' stroke='%230a0a0a' stroke-width='0.6' stroke-linejoin='round' opacity='0.35'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 6px rgba(13, 153, 255, 0.55)) !important;
  transition: left 0.08s linear, top 0.08s linear !important;
}
/* Outer click ripple */
.replay-player-host .replayer-mouse::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(13, 153, 255, 0.9) !important;
  background: transparent !important;
  /* These two properties must remain non-important so keyframes can animate. */
  transform: translate(-40%, -40%) scale(0.4);
  opacity: 0;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
/* Inner click flash */
.replay-player-host .replayer-mouse::after {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 2px !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(13, 153, 255, 0.45) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 12px rgba(13, 153, 255, 0.7) !important;
  transform: translate(-40%, -40%) scale(0.35);
  opacity: 0;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
.replay-player-host .replayer-mouse.active::before {
  animation: bn-replay-click-ring 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 1 !important;
}
.replay-player-host .replayer-mouse.active::after {
  animation: bn-replay-click 0.65s ease-out 1 !important;
}
/* Right-click: purple pulse so it reads differently from left-click */
.replay-player-host .replayer-mouse.bn-right-click::before {
  border-color: rgba(151, 71, 255, 0.95) !important;
}
.replay-player-host .replayer-mouse.bn-right-click::after {
  background: rgba(151, 71, 255, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 14px rgba(151, 71, 255, 0.75) !important;
  width: 22px !important;
  height: 22px !important;
}
.replay-player-host .replayer-mouse-tail {
  position: absolute !important;
  z-index: 15 !important;
  pointer-events: none !important;
  /* Soften the trail canvas so it reads without fighting the cursor */
  opacity: 0.95 !important;
  filter: drop-shadow(0 0 2px rgba(13, 153, 255, 0.35)) !important;
}
@keyframes bn-replay-click {
  0% {
    opacity: 0.85;
    transform: translate(-40%, -40%) scale(0.35);
  }
  45% {
    opacity: 0.55;
    transform: translate(-40%, -40%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-40%, -40%) scale(1.85);
  }
}
@keyframes bn-replay-click-ring {
  0% {
    opacity: 0.95;
    transform: translate(-40%, -40%) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(-40%, -40%) scale(4.5);
  }
}
.replay-video-host {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px;
}
.replay-pin-marker {
  position: absolute;
  z-index: 5;
}
.replay-player-host {
  /* Isolate layout thrash from the parent modal during cast.
     Do NOT set transform here — fitReplayToStage owns scale + translateZ. */
  contain: layout style;
  will-change: transform;
  position: relative;
  overflow: visible;
}
.replay-player-stage {
  contain: layout;
}
.replay-timeline {
  padding: 10px 16px 4px;
  position: relative;
}

.replay-transport {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 8px 12px 10px;
}
.replay-transport-center {
  grid-column: 2;
}
.replay-transport-main {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}
.replay-transport-meta {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  flex-wrap: nowrap;
}
.replay-transport-divider {
  width: 1px;
  height: 20px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.1);
}
.replay-speed-btn {
  min-width: 34px;
  font-size: 11.5px;
  font-weight: 650;
}
.replay-utility-icon {
  display: grid !important;
  place-items: center;
  width: 30px !important;
  padding: 0 !important;
}
.replay-utility-icon svg {
  width: 15px;
  height: 15px;
}
.replay-comment-step:disabled {
  opacity: 0.3;
  cursor: default;
}
.replay-transport-meta .btn {
  width: auto;
  height: 30px;
  margin: 0;
  padding: 0 9px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: 11.5px;
}
.replay-skip-idle.is-active {
  border-color: rgba(13, 153, 255, 0.45);
  background: rgba(13, 153, 255, 0.18);
  color: #7dceff;
}
.replay-skip-idle.did-skip {
  border-color: rgba(20, 174, 92, 0.45);
  background: rgba(20, 174, 92, 0.16);
  color: #79dba8;
}
.replay-embed .replay-transport-meta .btn {
  background: transparent !important;
  border-color: transparent !important;
}
.replay-embed .replay-transport-meta .btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: transparent !important;
}
.replay-embed .replay-skip-idle.is-active {
  border-color: rgba(13, 153, 255, 0.38) !important;
  background: rgba(13, 153, 255, 0.16) !important;
  color: #8fd0ff !important;
}
.replay-embed .replay-skip-idle.did-skip {
  border-color: rgba(20, 174, 92, 0.4) !important;
  background: rgba(20, 174, 92, 0.15) !important;
  color: #8ce0b3 !important;
}
.replay-skip-idle svg {
  flex-shrink: 0;
}
.replay-transport-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: #f5f5f5;
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease),
    border-color 0.12s var(--ease), transform 0.12s var(--ease);
}
.replay-transport-btn svg {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
  pointer-events: none;
}
.replay-transport-btn svg[fill="none"] {
  fill: none;
}
.replay-modal .replay-transport-btn {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink);
}
.replay-transport-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.replay-modal .replay-transport-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-2);
}
.replay-transport-btn:active {
  transform: scale(0.96);
}
.replay-transport-play {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 999px;
  border-color: transparent;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 10px rgba(13, 153, 255, 0.35);
}
.replay-transport-play:hover {
  background: var(--blue-press, #0b7fd4);
  border-color: transparent;
  color: #fff;
}
.replay-transport-play.is-playing {
  background: rgba(13, 153, 255, 0.2);
  border-color: rgba(13, 153, 255, 0.45);
  color: #8fd0ff;
  box-shadow: none;
}
.replay-embed .replay-transport-play {
  background: #0d99ff;
  color: #fff;
}
.replay-embed .replay-transport-play.is-playing {
  background: rgba(13, 153, 255, 0.22);
  border: 1px solid rgba(13, 153, 255, 0.5);
  color: #9ad4ff;
  box-shadow: none;
}
.replay-transport-hint {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.replay-comment-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--blue-soft);
  border: 1px solid rgba(13, 153, 255, 0.22);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  animation: bn-comment-banner-in 0.22s var(--ease-out-back);
}
.replay-comment-banner[hidden] {
  display: none !important;
}
.replay-comment-banner-inner {
  flex: 1;
  min-width: 0;
}
.replay-comment-banner-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-press);
  font-variant-numeric: tabular-nums;
}
.replay-comment-banner-author {
  color: var(--ink-2);
  font-weight: 600;
}
.replay-comment-banner-author:not([hidden])::before {
  content: "·";
  margin-right: 8px;
  color: var(--faint);
  font-weight: 400;
}
.replay-comment-banner-body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 4.5em;
  overflow: auto;
}
.replay-comment-banner-body.is-url {
  font-size: 11.5px;
  line-height: 1;
  overflow: hidden;
  max-height: none;
  white-space: normal;
}
.replay-page-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
}
.replay-page-nav[hidden] {
  display: none !important;
}
.replay-page-nav-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
}
.replay-page-nav-btn:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--ink);
}
.replay-page-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.replay-page-nav-btn svg {
  width: 14px;
  height: 14px;
}
.replay-nav-url {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0 4px 0 9px;
  border-radius: 7px;
  min-width: 0;
  text-align: left;
  cursor: copy;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  letter-spacing: -0.015em;
  line-height: 1;
  color: inherit;
}
.replay-nav-url:hover {
  border-color: var(--border-2);
}
.replay-nav-url:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.replay-nav-address {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.replay-nav-copy-hint {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  transition: background 0.12s ease, color 0.12s ease;
}
.replay-nav-copy-hint svg {
  width: 13px;
  height: 13px;
}
.replay-nav-url:hover .replay-nav-copy-hint {
  background: var(--surface-hover);
  color: var(--ink-2);
}
.replay-nav-url.is-copied .replay-nav-copy-hint {
  opacity: 1;
  color: var(--green, #16a34a);
}
.replay-nav-url.is-failed .replay-nav-copy-hint {
  opacity: 1;
  color: var(--red, #dc2626);
}
.replay-nav-host {
  font-weight: 700;
  color: var(--ink);
  margin-right: 1px;
}
.replay-nav-path {
  font-weight: 500;
  color: var(--ink-2);
}
.replay-nav-path.is-home {
  color: var(--muted);
  font-weight: 500;
}
.replay-nav-query,
.replay-nav-hash {
  font-weight: 450;
  color: var(--muted);
}
/* Dark embed player (full session / detail left pane) */
.replay-embed .replay-comment-banner {
  background: rgba(13, 153, 255, 0.14);
  border-color: rgba(13, 153, 255, 0.28);
  color: #e8f4ff;
  box-shadow: none;
}
.replay-embed .replay-comment-banner-meta {
  color: #7dd3fc;
}
.replay-embed .replay-comment-banner-author {
  color: rgba(255, 255, 255, 0.88);
}
.replay-embed .replay-comment-banner-body {
  color: rgba(255, 255, 255, 0.92);
}
.replay-embed .replay-nav-host {
  color: #f5f5f5;
}
.replay-embed .replay-nav-path {
  color: rgba(255, 255, 255, 0.82);
}
.replay-embed .replay-nav-path.is-home {
  color: rgba(255, 255, 255, 0.45);
}
.replay-embed .replay-nav-query,
.replay-embed .replay-nav-hash {
  color: rgba(255, 255, 255, 0.5);
}
.replay-embed .replay-page-nav-btn {
  color: rgba(255, 255, 255, 0.72);
}
.replay-embed .replay-page-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.replay-embed .replay-nav-url {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.12);
}
.replay-embed .replay-nav-url:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.replay-embed .replay-nav-url:hover .replay-nav-copy-hint {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.replay-embed .replay-comment-banner-close {
  color: rgba(255, 255, 255, 0.55);
}
.replay-embed .replay-comment-banner-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.replay-comment-reply {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}
.replay-comment-reply[hidden] {
  display: none !important;
}
.replay-comment-reply-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(13, 153, 255, 0.3);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  outline: none;
}
.replay-comment-reply-input::placeholder {
  color: var(--muted);
}
.replay-comment-reply-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(13, 153, 255, 0.12);
}
.replay-comment-reply .btn {
  flex: 0 0 auto;
  width: auto;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  box-shadow: none;
}
.replay-comment-reply-status {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.replay-comment-banner-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}
.replay-comment-banner-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}
@keyframes bn-comment-banner-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.replay-marker-track {
  position: relative;
  z-index: 2;
  height: 18px;
  margin: 0 9px -18px;
  pointer-events: none;
}
.replay-marker-track[hidden] {
  display: none;
}
.replay-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}
.replay-marker[hidden] {
  display: none !important;
}
.replay-marker-comment.is-active {
  z-index: 4;
}
.replay-marker-comment.is-active .replay-marker-dot {
  width: 12px;
  height: 12px;
  box-shadow:
    0 0 0 3px rgba(13, 153, 255, 0.35),
    0 0 12px rgba(13, 153, 255, 0.55);
  transform: scale(1.15);
}
.replay-marker-comment.is-flash .replay-marker-dot {
  animation: bn-marker-flash 0.65s var(--ease-out-back);
}
@keyframes bn-marker-flash {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.55);
  }
  100% {
    transform: scale(1.15);
  }
}
.replay-marker-dot {
  display: block;
  width: 10px;
  height: 10px;
  margin: 2px auto 0;
  border-radius: 50%;
  border: 2px solid #fff;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), width 0.15s var(--ease), height 0.15s var(--ease);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.15);
}
.replay-marker-comment .replay-marker-dot {
  background: var(--blue);
}
.replay-marker-nav .replay-marker-dot {
  background: var(--purple);
  border-radius: 2px;
  width: 8px;
  height: 8px;
  margin-top: 3px;
  transform: rotate(45deg);
}
.replay-marker.is-active .replay-marker-dot {
  box-shadow: 0 0 0 2px var(--blue), 0 0 0 4px rgba(13, 153, 255, 0.25);
  width: 12px;
  height: 12px;
  margin-top: 1px;
}
.replay-marker:hover .replay-marker-dot {
  transform: scale(1.2);
}
.replay-marker-nav:hover .replay-marker-dot {
  transform: rotate(45deg) scale(1.2);
}
.replay-marker:focus-visible {
  outline: none;
}
.replay-marker:focus-visible .replay-marker-dot {
  box-shadow: var(--focus-ring);
}
.replay-scrub {
  --replay-progress: 0%;
  display: block;
  width: 100%;
  height: 20px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.replay-scrub::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--blue) 0 var(--replay-progress),
    rgba(127, 127, 127, 0.28) var(--replay-progress) 100%
  );
}
.replay-scrub::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 1px rgba(13, 153, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.replay-scrub::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.28);
}
.replay-scrub::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--blue);
}
.replay-scrub::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 1px rgba(13, 153, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.replay-scrub:focus-visible {
  outline: none;
}
.replay-scrub:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.32), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.replay-time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 0;
}
.replay-modal-foot {
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.replay-modal-foot.replay-transport {
  justify-content: center;
  gap: 8px;
  margin-top: 0;
}

@media (max-width: 720px) {
  .replay-transport {
    grid-template-columns: 1fr;
  }

  .replay-transport-spacer {
    display: none;
  }

  .replay-transport-center,
  .replay-transport-meta {
    grid-column: 1;
    justify-self: center;
  }

  .replay-transport-meta {
    max-width: 100%;
    overflow-x: auto;
  }
}
.replay-modal-foot .btn.active {
  background: var(--purple-soft);
  color: var(--purple);
}
.replay-diag {
  margin: 0 18px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  max-height: 180px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.replay-diag[hidden] {
  display: none !important;
}
.replay-diag-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.replay-diag-head strong {
  font-size: 12px;
  font-weight: 600;
}
.replay-diag-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.replay-diag-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  flex: 1;
  min-height: 0;
}
.replay-diag-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.replay-diag-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.replay-diag-row:hover {
  background: var(--surface-hover);
}
.replay-diag-main {
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.replay-diag-sub {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.replay-diag-console.is-error .replay-diag-main,
.replay-diag-console.is-warn .replay-diag-main {
  color: #c2410c;
}
.replay-diag-network.is-error .replay-diag-main {
  color: var(--red);
}

/* Console & network panel — dark chrome inside the embedded player */
.replay-embed .replay-diag {
  margin: 8px 14px 0;
  border-color: rgba(255, 255, 255, 0.1);
  background: #161a22;
  color: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.replay-embed .replay-diag-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.replay-embed .replay-diag-head strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 650;
}
.replay-embed .replay-diag-count {
  color: rgba(255, 255, 255, 0.45);
}
.replay-embed .replay-diag-empty {
  color: rgba(255, 255, 255, 0.48);
}
.replay-embed .replay-diag-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.replay-embed .replay-diag-main {
  color: rgba(230, 236, 245, 0.92);
}
.replay-embed .replay-diag-sub {
  color: rgba(255, 255, 255, 0.42);
}
.replay-embed .replay-diag-console.is-log .replay-diag-main,
.replay-embed .replay-diag-console.is-info .replay-diag-main {
  color: rgba(190, 210, 240, 0.92);
}
.replay-embed .replay-diag-console.is-warn .replay-diag-main {
  color: #fbbf24;
}
.replay-embed .replay-diag-console.is-error .replay-diag-main,
.replay-embed .replay-diag-network.is-error .replay-diag-main {
  color: #f87171;
}
.replay-embed .replay-diag-list {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.replay-embed .replay-diag-list::-webkit-scrollbar {
  width: 8px;
}
.replay-embed .replay-diag-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
}
.replay-embed .replay-diag-list::-webkit-scrollbar-track {
  background: transparent;
}

/* Cookies & storage panel (sibling to Debug) */
.replay-storage {
  margin: 0 18px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.replay-storage[hidden] {
  display: none !important;
}
.replay-storage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 6px 12px 4px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.replay-storage-page {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.replay-storage-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 8px 10px;
  flex: 1;
  min-height: 0;
}
.replay-storage-section {
  margin-bottom: 10px;
}
.replay-storage-section:last-child {
  margin-bottom: 2px;
}
.replay-storage-section-title {
  margin: 0 0 4px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.replay-storage-section-title span {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 0.8;
}
.replay-storage-empty {
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--faint);
}
.replay-storage-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.replay-storage-row {
  appearance: none;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(72px, 34%) 1fr;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  border-radius: 6px;
  text-align: left;
  cursor: copy;
  font: inherit;
  color: inherit;
}
.replay-storage-row:hover {
  background: var(--surface-hover);
}
.replay-storage-row.is-copied {
  background: var(--green-soft, #dcfce7);
}
.replay-storage-row.is-failed {
  background: var(--red-soft, #fee2e2);
}
.replay-storage-key {
  font-size: 11px;
  font-weight: 650;
  color: var(--ink-2);
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.replay-storage-val {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.replay-embed .replay-storage {
  margin: 8px 14px 0;
  border-color: rgba(255, 255, 255, 0.1);
  background: #161a22;
  color: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.replay-embed .replay-storage-meta {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
}
.replay-embed .replay-storage-page {
  color: rgba(230, 236, 245, 0.88);
}
.replay-embed .replay-storage-section-title {
  color: rgba(255, 255, 255, 0.48);
}
.replay-embed .replay-storage-empty {
  color: rgba(255, 255, 255, 0.4);
}
.replay-embed .replay-storage-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.replay-embed .replay-storage-row.is-copied {
  background: rgba(34, 197, 94, 0.16);
}
.replay-embed .replay-storage-key {
  color: rgba(230, 236, 245, 0.95);
}
.replay-embed .replay-storage-val {
  color: rgba(255, 255, 255, 0.55);
}
.replay-embed .replay-storage-body {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Device, browser and network facts captured when recording starts. */
.replay-environment {
  margin: 0 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  max-height: min(360px, 42vh);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.replay-environment[hidden] {
  display: none !important;
}
.replay-environment-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding: 10px 12px 12px;
}
.replay-environment-section h4 {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.replay-environment-section dl {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
}
.replay-environment-section dl > div {
  display: grid;
  grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
  gap: 8px;
  padding: 4px 5px;
  border-radius: 5px;
}
.replay-environment-section dl > div:nth-child(odd) {
  background: rgba(127, 127, 127, 0.06);
}
.replay-environment-section dt,
.replay-environment-section dd {
  min-width: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}
.replay-environment-section dt {
  color: var(--muted);
}
.replay-environment-section dd {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.replay-embed .replay-environment {
  margin: 8px 14px 0;
  border-color: rgba(255, 255, 255, 0.1);
  background: #161a22;
}
.replay-embed .replay-environment .replay-diag-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.replay-embed .replay-environment-section h4,
.replay-embed .replay-environment-section dt {
  color: rgba(255, 255, 255, 0.46);
}
.replay-embed .replay-environment-section dd {
  color: rgba(255, 255, 255, 0.86);
}
.replay-embed .replay-environment-section dl > div:nth-child(odd) {
  background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 720px) {
  .replay-environment-body {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Reduced motion — keep state changes, drop the movement
   ========================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Spinners still need to read as "working" */
  .btn-spinner,
  .locating-spinner,
  .note-card.is-locating::after {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }

  .note-card:hover,
  .note-card:active {
    transform: none;
  }

  .rec-btn.is-recording .rec-dot {
    animation: none;
  }
}

/* --- Connect AI (agent tokens for MCP) --- */

.connect-ai-modal .session-settings-body {
  gap: 16px;
}

/* Overrides .session-settings-field label, which is a baseline flex row. */
.connect-ai-choice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 9px 10px;
  border: 1px solid var(--border-2);
  border-radius: 7px;
  background: var(--surface-2);
  font-weight: 500 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: var(--ink-2);
  cursor: pointer;
}

.connect-ai-choice:hover {
  border-color: var(--border);
}

.connect-ai-choice input {
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--accent, #0d99ff);
}

.connect-ai-choice strong {
  color: var(--ink);
  font-weight: 600;
}

.connect-ai-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
}

.connect-ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-2);
  border-radius: 7px;
  background: var(--surface-2);
}

.connect-ai-row > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.connect-ai-meta {
  font-size: 11px;
  color: var(--faint);
}

.connect-ai-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
}

.connect-ai-tab {
  flex: 1;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}

.connect-ai-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.connect-ai-modal [data-panel] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.connect-ai-modal [data-panel][hidden] {
  display: none;
}

.connect-ai-modal code {
  font-family: var(--mono);
  font-size: 11px;
}

/* =========================
   Web / Images / Videos / Document / Review / Replays / Settings workspace
   ========================= */

.workspace-toggle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
  margin-left: 0;
}
.workspace-toggle-gap {
  width: 1px;
  align-self: stretch;
  margin: 2px 3px;
  background: var(--border);
}

@media (max-width: 700px) {
  .workspace-toggle {
    position: static;
    transform: none;
    margin-left: 0;
  }

}

.workspace-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
    box-shadow 0.14s var(--ease);
}
.workspace-btn[hidden] {
  display: none !important;
}
.workspace-btn-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

.workspace-btn.active {
  background: var(--ink);
  color: var(--surface);
  box-shadow:
    0 1px 2px rgba(15, 18, 24, 0.22),
    0 4px 10px rgba(15, 18, 24, 0.12);
}

.workspace-btn:hover:not(.active) {
  color: var(--ink-2);
}

/* Web landing (no page loaded yet) is a full-width hero — nothing to list. */
body[data-bn-source="web"][data-bn-canvas="empty"] .room-body {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}

body[data-bn-source="web"][data-bn-canvas="empty"] .sidebar {
  display: none;
}

body[data-bn-source="web"][data-bn-canvas="live"] .record-url-strip {
  display: block;
  position: static;
  flex: 0 0 auto;
  transform: none;
}

body[data-bn-source="web"][data-bn-canvas="live"] .preview-wrap {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

body[data-bn-source="web"][data-bn-canvas="live"] .recording-dock {
  position: static;
  flex: 0 0 auto;
  align-self: center;
  transform: none;
}

body[data-bn-workspace="replays"] .room-body {
  grid-template-columns: 1fr;
}

body[data-bn-workspace="replays"] .preview-wrap,
body[data-bn-workspace="replays"] .sidebar {
  display: none;
}

body[data-bn-workspace="settings"] .room-body {
  grid-template-columns: 1fr;
}

body[data-bn-workspace="settings"] .preview-wrap,
body[data-bn-workspace="settings"] .sidebar {
  display: none;
}

body[data-bn-workspace="replays"] #url-form,
body[data-bn-workspace="replays"] #viewport,
body[data-bn-workspace="replays"] #recording-dock,
body[data-bn-workspace="replays"] .viewport-badge {
  display: none !important;
}

body[data-bn-workspace="settings"] #url-form,
body[data-bn-workspace="settings"] #viewport,
body[data-bn-workspace="settings"] #recording-dock,
body[data-bn-workspace="settings"] .viewport-badge {
  display: none !important;
}

body[data-bn-workspace="review"] .preview-wrap {
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body[data-bn-workspace="review"] .preview-stage {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}

body[data-bn-workspace="review"] .preview-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
}

body[data-bn-workspace="review"] .review-landing {
  justify-self: center;
  align-self: center;
  width: min(100%, 360px);
  padding: 0 24px;
  margin: 0;
}

body[data-bn-workspace="review"] #url-form,
body[data-bn-workspace="review"] #viewport,
body[data-bn-workspace="review"] #recording-dock,
body[data-bn-workspace="review"] .viewport-badge {
  display: none !important;
}

body[data-bn-source="web"][data-bn-canvas="empty"] #recording-dock {
  display: none;
}

body[data-bn-source="asset"][data-bn-canvas="empty"] .room-body {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}

body[data-bn-source="asset"][data-bn-canvas="empty"] .sidebar {
  display: none;
}

body[data-bn-source="asset"][data-bn-canvas="empty"] #recording-dock {
  display: none;
}

/* Rec stays on Web even when a file is open and the comment dock is showing. */
body:not([data-bn-source="web"]) #rec-btn,
body:not([data-bn-source="web"]) #dock-divider-rec {
  display: none !important;
}

/* Video has its own transport + Comment control — the page dock is redundant. */
body[data-bn-asset-kind="video"] #recording-dock {
  display: none !important;
}

body[data-bn-asset-kind="video"] .preview-wrap {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

body[data-bn-asset-kind="video"] .preview-stage {
  margin: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  background: #08090b;
  box-shadow: none;
}

body[data-bn-asset-kind="video"] .asset-view {
  background: #08090b;
}

body[data-bn-asset-kind="video"] .asset-head {
  background: var(--surface);
}

body[data-bn-asset-kind="video"] .asset-body:not(.is-comparing) {
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
}

body[data-bn-asset-kind="video"] .asset-body:not(.is-comparing) .asset-media {
  max-width: none;
  flex: 1;
  min-height: 0;
  display: flex;
  background: #08090b;
  box-shadow: none;
  border-radius: 0;
}

body[data-bn-asset-kind="video"] .asset-body:not(.is-comparing) .asset-video-frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-bn-asset-kind="video"] .asset-body:not(.is-comparing) .asset-video-player {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
}

body[data-bn-asset-kind="video"] .asset-body:not(.is-comparing) .asset-video-stage {
  flex: 1;
  aspect-ratio: auto;
  width: 100%;
  min-height: 0;
  container-type: size;
}

body[data-bn-asset-kind="video"] .asset-body:not(.is-comparing) .asset-video-frame .asset-video {
  aspect-ratio: var(--video-aspect);
  width: min(100cqw, calc(100cqh * var(--video-aspect)));
  height: min(100cqh, calc(100cqw / var(--video-aspect)));
  max-height: none;
  object-fit: contain;
}

/* The generic empty canvas is non-interactive so clicks can reach a live
   frame. Asset landings own real controls in that layer, so they must opt the
   whole hit-testing subtree back in. */
body[data-bn-source="asset"][data-bn-canvas="empty"] .preview-empty {
  pointer-events: auto;
}

/* Record + rolling take: the list stays readable so a tester can check what
   they already said, but anything that would move the live page or swap the
   canvas for a replay is parked until Stop. Reading and replying stay open. */
.record-lock-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.3;
  flex-shrink: 0;
}

.record-lock-note[hidden] {
  display: none;
}

.record-lock-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e5484d;
  animation: rec-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .record-lock-dot {
    animation: none;
  }
}

body[data-bn-record-lock="on"] .sidebar [data-act="play-context"],
body[data-bn-record-lock="on"] .sidebar [data-act="play-full"],
body[data-bn-record-lock="on"] .sidebar [data-act="play-journey"],
body[data-bn-record-lock="on"] .sidebar [data-act="browse-person-replays"] {
  display: none !important;
}

body[data-bn-record-lock="on"] .sidebar [data-act="open-page"]:not(.url-group-header) {
  cursor: default;
  opacity: 0.72;
}

body[data-bn-record-lock="on"] .note-detail-page-action[data-act="prefill-test"] {
  display: none;
}

body[data-bn-record-lock="on"] .sidebar .note-tools [data-act="reply"],
body[data-bn-record-lock="on"] .sidebar .note-tools [data-act="delete"],
body[data-bn-record-lock="on"] .sidebar .note-reply-delete,
body[data-bn-record-lock="on"] .note-detail-foot,
body[data-bn-record-lock="on"] .note-detail-reply .note-reply-delete,
body[data-bn-record-lock="on"] .note-popover-reply-btn,
body[data-bn-record-lock="on"] .note-popover-icon-actions [data-act="delete"],
body[data-bn-record-lock="on"] .note-popover-reply-form,
body[data-bn-record-lock="on"] .note-popover-reply-item .note-reply-delete {
  display: none !important;
}

/* Board view widens the sidebar; in Record the live page needs that room, so
   the columns scroll horizontally instead. */
@media (min-width: 940px) {
  body[data-bn-source="web"][data-bn-view="board"]:not([data-bn-sidebar-resized]) {
    --notes-sidebar-width: 360px;
  }
}

@media (max-width: 640px) {
  .record-url-strip {
    top: 8px;
    width: calc(100% - 16px);
  }

  .recording-dock {
    bottom: 10px;
    max-width: calc(100% - 16px);
  }

  .recording-dock .tool-btn {
    padding: 0 9px;
  }

  .recording-dock .kbd {
    display: none;
  }
}

.preview-empty > .test-landing,
.preview-empty > .review-landing,
.preview-empty > .files-landing,
.test-landing,
.review-landing,
.files-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 560px);
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  pointer-events: auto;
  gap: 0;
}

.test-landing[hidden],
.review-landing[hidden] {
  display: none !important;
}

.test-landing .empty-icon,
.review-landing .empty-icon {
  margin-bottom: 14px;
}

.test-url-slot {
  width: 100%;
  margin-top: 18px;
  pointer-events: auto;
  display: flex;
  justify-content: center;
}

.test-viewport-slot {
  width: 100%;
  margin-top: 14px;
  pointer-events: auto;
  display: flex;
  justify-content: center;
}

.test-viewport-slot:empty {
  display: none;
}

.viewport-btns-hero {
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.viewport-btns-hero .viewport-btn {
  width: 40px;
  height: 36px;
  border-radius: 8px;
}

.viewport-btns-hero .viewport-btn svg {
  width: 18px;
  height: 18px;
}

.url-form-hero {
  max-width: 560px;
  width: 100%;
  height: 48px;
  padding: 4px 4px 4px 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.url-form-hero:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(13, 153, 255, 0.14);
}

.url-form-hero input {
  height: 100%;
  font-size: 14px;
  font-family: var(--font);
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.url-form-hero input:focus,
.url-form-hero input:focus-visible {
  outline: none;
  box-shadow: none;
}

.url-form-hero .btn {
  height: 100%;
  padding: 0 14px;
  border-radius: 9px;
  font-weight: 600;
  background: var(--red);
  color: #fff;
}

.url-form-hero .btn:hover:not(:disabled) {
  background: #d63d1a;
  color: #fff;
}

.review-player {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #0c0c0c;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.review-player[hidden] {
  display: none !important;
}

.review-player .replay-embed {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.replay-pin-layer {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: auto;
  overflow: visible;
}

.replay-pin-marker[hidden],
.replay-highlight-marker[hidden] {
  display: none !important;
}

.replay-pin-layer .replay-highlight-marker {
  --highlight-color: #9747ff;
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  box-sizing: border-box;
  min-width: 2px;
  min-height: 2px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--highlight-color);
  border-radius: 4px;
  background: color-mix(in srgb, var(--highlight-color) 12%, transparent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
  overflow: visible;
}

.replay-pin-layer .replay-highlight-marker.is-fallback {
  transform: translate(-50%, -50%);
}

.replay-highlight-label {
  position: absolute;
  left: -2px;
  bottom: calc(100% + 4px);
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--highlight-color);
  color: #fff;
  font: 700 10px/1.1 system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.replay-highlight-marker.is-active {
  border-color: #0d99ff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(13, 153, 255, 0.8);
  z-index: 6;
}

.replay-pin-layer .replay-pin-marker {
  pointer-events: auto;
  cursor: pointer;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  background: var(--pin-color, var(--blue));
  color: #fff;
  font: 700 11px/1 system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px #fff;
  overflow: visible;
}

.replay-pin-marker .bn-pin-num {
  position: relative;
  z-index: 1;
}

.replay-pin-marker .bn-pin-author {
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  transform: translateX(-50%);
  max-width: 88px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.88);
  color: #fff;
  font: 650 9px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.replay-pin-marker .bn-pin-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #0d99ff;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

.replay-pin-marker.is-active {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 0 3px #0d99ff;
  z-index: 6;
}

.replay-pin-marker.is-active .bn-pin-ring {
  animation: bn-pin-pulse 1.1s ease-out 2;
}

@keyframes bn-pin-pulse {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(13, 153, 255, 0.5);
  }
  70% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(2.6);
    box-shadow: 0 0 0 12px rgba(13, 153, 255, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.9);
    box-shadow: 0 0 0 0 rgba(13, 153, 255, 0);
  }
}

#popover-root {
  position: relative;
  z-index: 280;
}

/* Full comment popover on DOM replay — lives in #popover-root, not the scaled
   replay host, so it stays 300px and interactive even on a small player. */
.note-popover.is-on-replay {
  z-index: 280;
  width: min(300px, calc(100vw - 24px));
  max-width: min(300px, calc(100vw - 24px));
  pointer-events: auto;
}

@media (max-width: 900px) {
  .workspace-toggle {
    margin-left: 0;
  }

  .workspace-btn {
    padding: 5px 8px;
    gap: 0;
  }

  .workspace-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .workspace-btn-ico {
    width: 14px;
    height: 14px;
  }

  .replays-view {
    padding: 16px 10px 24px;
  }

  .replays-view-tools {
    padding-bottom: 10px;
  }

  .settings-view {
    padding: 16px 10px 28px;
  }

  .settings-view-grid {
    grid-template-columns: 1fr;
  }

  .settings-danger-card {
    order: 2;
  }

  .settings-danger-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-danger-row .btn {
    width: 100%;
  }
}

/* =========================
   Account / org dashboard
   Same chrome language as the session room: 48px toolbar, surface-2 canvas,
   bordered settings cards, segmented nav.
   ========================= */

.acct-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  background: var(--surface-2);
}

/* —— Top bar —— */
.acct-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 10px 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Segmented nav — mirrors .workspace-toggle in the session room, and centred
   in the bar the same way so both halves of the app read alike. */
.acct-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.acct-nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
    box-shadow 0.14s var(--ease);
}

.acct-nav a:hover {
  color: var(--ink-2);
  text-decoration: none;
}

.acct-nav a.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.acct-nav svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Placeholder for the switcher while the workspace is still loading. */
.acct-org-skel {
  width: 132px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
}

.acct-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

/* Org switcher — reads as a toolbar control, not a form select */
.acct-org {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.acct-org-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  max-width: 230px;
  min-width: 0;
  padding: 0 8px 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}

.acct-org-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.acct-org-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.acct-org-btn svg {
  flex-shrink: 0;
  color: var(--faint);
}

.acct-org-btn.is-static {
  cursor: default;
  color: var(--ink-2);
}

.acct-org-btn.is-static:hover {
  background: transparent;
  border-color: transparent;
}

.acct-org-btn.is-loading .btn-spinner {
  border-color: rgba(30, 30, 30, 0.2);
  border-top-color: var(--ink-2);
}

.acct-org-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}

.acct-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  /* Zeroed for the <button> variant — the UA's 1px 6px squeezes the content
     box below the width of two glyphs and the initials spill out of the disc. */
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-press);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(13, 153, 255, 0.22);
}

.acct-avatar.is-muted {
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}

.acct-avatar-skel {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
}

.acct-avatar.is-lg {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

/* —— Page canvas —— */
.acct-main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 28px 20px 56px;
}

.acct-shell-inner {
  width: min(880px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.acct-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 2px;
}

.acct-page-head h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.acct-page-head p {
  margin: 4px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.acct-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.acct-page-actions .btn-primary {
  width: auto;
  margin-top: 0;
}

/* —— Rows —— */
.acct-list {
  display: flex;
  flex-direction: column;
  margin: -4px -6px -6px;
}

.acct-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 8px;
  border-top: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s var(--ease);
}

.acct-row:first-child {
  border-top: 0;
}

a.acct-row:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.acct-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acct-row-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.acct-row-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-row-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.acct-row-sub .acct-dot {
  color: var(--faint);
}

.acct-row-sub .acct-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
}

.acct-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.acct-row-actions .btn {
  width: auto;
  margin-top: 0;
}

.acct-row-cta {
  flex-shrink: 0;
  color: var(--faint);
  transition: transform 0.14s var(--ease), color 0.14s var(--ease);
}

a.acct-row:hover .acct-row-cta {
  color: var(--muted);
  transform: translateX(2px);
}

.acct-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  flex-shrink: 0;
}

.acct-tag.is-owner {
  background: var(--purple-soft);
  color: var(--purple);
}

.acct-tag.is-admin {
  background: var(--blue-soft);
  color: var(--blue-press);
}

.acct-tag.is-you {
  background: var(--green-soft);
  color: var(--green);
}

.acct-tag.is-pending {
  background: var(--yellow-soft);
  color: #8a6400;
}

/* —— Empty / error / skeleton states —— */
.acct-empty {
  padding: 22px 8px 18px;
  text-align: center;
}

.acct-empty-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--faint);
}

.acct-empty strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.acct-empty p {
  margin: 0 auto;
  max-width: 44ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.acct-empty .btn {
  width: auto;
  margin-top: 14px;
}

.acct-error-card {
  border-color: #f3cec4;
  background: var(--red-soft);
}

.acct-error-card .acct-empty-ico {
  background: rgba(242, 72, 34, 0.12);
  color: var(--red);
}

.acct-error-card .acct-empty strong {
  color: var(--red);
}

.acct-skel {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-hover) 37%,
    var(--surface-2) 63%
  );
  background-size: 400% 100%;
  animation: acct-shimmer 1.3s var(--ease) infinite;
}

@keyframes acct-shimmer {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

.acct-skel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 8px;
  border-top: 1px solid var(--border);
}

.acct-skel-row:first-child {
  border-top: 0;
}

.acct-skel-line {
  height: 10px;
}

.acct-skel-title {
  width: 46%;
  max-width: 220px;
  margin-bottom: 7px;
}

.acct-skel-sub {
  width: 30%;
  max-width: 150px;
  height: 8px;
}

.acct-skel-cta {
  width: 62px;
  height: 22px;
  margin-left: auto;
  border-radius: 999px;
}

/* —— Inline status (pending / ok / error) —— */
.acct-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.acct-status[hidden] {
  display: none;
}

.acct-status.is-ok {
  color: var(--green);
}

.acct-status.is-error {
  color: var(--red);
}

.acct-status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.acct-status.is-pending::before {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  background: none;
  opacity: 0.7;
  animation: bn-spin 0.65s linear infinite;
}

/* Spinner inside ghost/secondary buttons needs ink-toned strokes */
.btn-ghost .btn-spinner,
.btn-soft .btn-spinner,
.acct-row-actions .btn-ghost .btn-spinner {
  border-color: rgba(30, 30, 30, 0.2);
  border-top-color: var(--ink-2);
}

.acct-form-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid #f3cec4;
  border-radius: 8px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.acct-form-error[hidden] {
  display: none;
}

.acct-form-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.acct-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

/* —— Forms inside account cards —— */
.acct-field-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.acct-field-row > .settings-field {
  flex: 1;
  min-width: 0;
}

.acct-field-row > .settings-field.is-narrow {
  flex: 0 0 138px;
}

.settings-field select {
  width: 100%;
  height: 38px;
  padding: 0 9px;
  box-sizing: border-box;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  outline: none;
  background: var(--surface-2);
  color: var(--ink);
  font: 500 13px/1.45 var(--font);
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease),
    background 0.14s var(--ease);
}

.settings-field select:focus {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}

.settings-field input:disabled {
  color: var(--muted);
  background: var(--surface-2);
  cursor: not-allowed;
}

.acct-card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.acct-card-foot .btn-primary,
.acct-card-foot .btn {
  width: auto;
  margin-top: 0;
}

/* —— New session modal —— */
.acct-modal {
  width: min(420px, 100%);
  text-align: left;
}

.acct-modal .settings-fields {
  gap: 13px;
}

.acct-modal .modal-actions {
  margin-top: 18px;
}

.acct-modal .modal-actions .btn {
  width: auto;
  margin-top: 0;
}

/* —— Auth screens —— */
.acct-auth-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.acct-auth-card .settings-fields {
  gap: 13px;
}

.acct-auth-card .account-toggle {
  margin: 14px 0 0;
  text-align: center;
}

.acct-auth-card .account-toggle[hidden] {
  display: none;
}

.linkish {
  color: var(--blue);
  background: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 500;
}

.linkish:hover {
  text-decoration: underline;
}

.acct-auth-card .btn-primary {
  width: 100%;
  margin-top: 16px;
}

/* —— Landing (/) — same card language as the auth + settings screens —— */
.landing-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-card {
  padding: 22px;
  box-shadow: var(--shadow);
}

.landing-card .settings-card-head {
  margin-bottom: 16px;
}

/* The brief is a nice-to-have — it should not dominate the fold. */
.landing-card .settings-field textarea {
  min-height: 76px;
}

.landing-signin {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.settings-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 420px) {
  .settings-field-pair {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .acct-nav {
    position: static;
    transform: none;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .acct-nav a span {
    display: none;
  }

  .acct-nav a {
    padding: 5px 8px;
  }

  .acct-org-btn {
    max-width: 120px;
  }

  .acct-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .acct-page-actions .btn {
    flex: 1;
  }

  .acct-field-row {
    flex-direction: column;
    align-items: stretch;
  }

  .acct-field-row > .settings-field.is-narrow {
    flex: 1;
  }
}

.acct-invite-link {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.acct-invite-link .acct-note {
  margin: 0 0 8px;
}

.acct-invite-link .share-row input {
  font-size: 10.5px;
}

.acct-invite-link .btn {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
}

.acct-invite-link .btn.is-copied {
  color: var(--green);
  border-color: rgba(20, 174, 92, 0.35);
  background: var(--green-soft);
}

/* =========================
   Account — workspace menu, people at scale
   ========================= */

/* —— Workspace switcher menu (top bar) —— */
.acct-org-avatar {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  background: linear-gradient(145deg, #1e1e1e 0%, #4a4a4a 100%);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.acct-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: min(280px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  animation: popIn 0.14s var(--ease);
}

.acct-menu[hidden] {
  display: none;
}

.acct-menu-head {
  padding: 6px 8px 5px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.acct-menu-scroll {
  max-height: 264px;
  overflow: auto;
  margin: 0 -2px;
  padding: 0 2px;
}

.acct-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: 500 12.5px/1.35 var(--font);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s var(--ease);
}

.acct-menu-item:hover {
  background: var(--surface-2);
}

.acct-menu-item.is-current {
  background: var(--blue-soft);
}

.acct-menu-item-text {
  flex: 1;
  min-width: 0;
}

.acct-menu-item-text strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.acct-menu-item-text small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  text-transform: capitalize;
}

.acct-menu-check {
  flex-shrink: 0;
  color: var(--blue);
}

.acct-menu-sep {
  height: 1px;
  margin: 5px 2px;
  background: var(--border);
}

.acct-menu-item.is-action {
  color: var(--ink-2);
  font-weight: 600;
}

.acct-menu-item.is-action svg {
  flex-shrink: 0;
  color: var(--muted);
}

/* —— People card at scale —— */
.acct-people-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
}

.acct-search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--faint);
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease),
    background 0.14s var(--ease);
}

.acct-search-field:focus-within {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
  color: var(--muted);
}

.acct-search-field svg {
  flex-shrink: 0;
}

.acct-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: 500 12.5px/1 var(--font);
}

.acct-search-field input::-webkit-search-cancel-button {
  cursor: pointer;
}

.acct-search-field input:focus,
.acct-search-field input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Segmented Members / Pending — same idiom as the room's workspace toggle */
.acct-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.acct-seg button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 600 12px/1 var(--font);
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
    box-shadow 0.14s var(--ease);
}

.acct-seg button:hover:not(.is-active) {
  color: var(--ink-2);
}

.acct-seg button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.acct-seg-count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font-size: 10px;
  font-weight: 700;
}

.acct-seg button.is-active .acct-seg-count {
  background: var(--blue-soft);
  color: var(--blue-press);
}

/* Denser rows so long lists stay scannable */
.acct-people-card .acct-row {
  padding: 7px 8px;
}

.acct-people-card .acct-row-title {
  font-size: 12.5px;
}

/* Row actions stay quiet until the row is touched or focused */
.acct-people-card .acct-row-actions {
  opacity: 0;
  transition: opacity 0.12s var(--ease);
}

.acct-people-card .acct-row:hover .acct-row-actions,
.acct-people-card .acct-row:focus-within .acct-row-actions {
  opacity: 1;
}

@media (hover: none) {
  .acct-people-card .acct-row-actions {
    opacity: 1;
  }
}

/* Paging keeps the list short — no nested scroll area on top of the page. */
.acct-people-list {
  min-width: 0;
}

.acct-row[hidden] {
  display: none;
}

.acct-show-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 600 11.5px/1 var(--font);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.acct-show-more:hover {
  background: var(--surface-2);
  color: var(--ink-2);
}

.acct-show-more[hidden] {
  display: none;
}

.acct-list-empty {
  padding: 20px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.acct-list-empty[hidden] {
  display: none;
}

.acct-list-empty strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 13px;
}

/* Seat meter in the People header */
.acct-seats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.acct-seat-bar {
  width: 64px;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-hover);
  overflow: hidden;
}

.acct-seat-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
  transition: width 0.25s var(--ease);
}

.acct-seat-fill.is-full {
  background: var(--yellow);
}

.acct-seat-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* —— Workspaces card —— */
.acct-ws-row .acct-org-avatar {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 10.5px;
}

.acct-ws-row .acct-row-actions .btn {
  min-width: 68px;
}

.acct-current-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-press);
  font-size: 10px;
  font-weight: 650;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .acct-people-tools {
    flex-wrap: wrap;
  }

  .acct-search-field {
    flex: 1 0 100%;
  }
}

/* —— Account menu (avatar) —— */
.acct-me {
  position: relative;
  display: inline-flex;
}

.acct-avatar.is-btn {
  border: 0;
  cursor: pointer;
  transition: box-shadow 0.12s var(--ease), transform 0.08s var(--ease);
}

.acct-avatar.is-btn:hover {
  box-shadow: inset 0 0 0 1px rgba(13, 153, 255, 0.5);
}

.acct-avatar.is-btn:active {
  transform: scale(0.96);
}

.acct-me-menu {
  width: min(240px, calc(100vw - 24px));
  /* Anchored to the avatar on the right edge. */
  left: auto;
  right: 0;
}

.acct-me-head {
  padding: 8px 8px 6px;
  min-width: 0;
}

.acct-me-head strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
}

.acct-me-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}

a.acct-menu-item {
  text-decoration: none;
}

a.acct-menu-item:hover {
  text-decoration: none;
}

/* —— Platform super-admin: independent operations cockpit —— */
.bn-admin-shell {
  --admin-ink: #171714;
  --admin-paper: #f3f0e8;
  --admin-panel: #fcfbf7;
  --admin-line: #dcd7ca;
  --admin-muted: #777369;
  --admin-accent: #dfff55;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  background: var(--admin-paper);
  color: var(--admin-ink);
}

.bn-admin-side {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 16px;
  background: #181816;
  color: #f7f5ee;
}

.bn-admin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 7px 26px;
  color: inherit;
  text-decoration: none;
}

.bn-admin-brand:hover {
  color: inherit;
  text-decoration: none;
}

.bn-admin-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 3px 10px 3px 3px;
  background: var(--admin-accent, #dfff55);
  color: #111;
  font: 800 11px/1 var(--mono);
  letter-spacing: -0.04em;
}

.bn-admin-brand strong,
.bn-admin-brand small {
  display: block;
}

.bn-admin-brand strong {
  font-size: 13px;
  font-weight: 700;
}

.bn-admin-brand small {
  margin-top: 2px;
  color: #949389;
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bn-admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bn-admin-nav a,
.bn-admin-back {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 7px;
  color: #96958d;
  font-size: 12px;
  font-weight: 620;
  text-decoration: none;
  transition: color 0.14s var(--ease), background 0.14s var(--ease);
}

.bn-admin-nav a:hover,
.bn-admin-back:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
}

.bn-admin-nav a.is-active {
  background: #2b2b27;
  color: #fff;
}

.bn-admin-nav a.is-active::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(223, 255, 85, 0.1);
}

.bn-admin-nav svg,
.bn-admin-back svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.bn-admin-side-foot {
  margin-top: auto;
}

.bn-admin-back {
  margin-bottom: 10px;
  border-bottom: 1px solid #30302d;
  border-radius: 0;
  padding-bottom: 10px;
}

.bn-admin-back svg {
  transform: rotate(180deg);
}

.bn-admin-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 7px 2px;
}

.bn-admin-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid #41413d;
  border-radius: 50%;
  color: #dddcd4;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.bn-admin-identity > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.bn-admin-identity strong,
.bn-admin-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bn-admin-identity strong {
  color: #e8e6df;
  font-size: 10.5px;
}

.bn-admin-identity small {
  margin-top: 2px;
  color: #77766f;
  font-size: 9px;
}

.bn-admin-identity button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #77766f;
}

.bn-admin-identity button:hover {
  background: #2b2b27;
  color: #fff;
}

.bn-admin-main {
  min-width: 0;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 48px clamp(24px, 4vw, 64px) 72px;
}

.bn-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  animation: bn-admin-rise 0.35s var(--ease) both;
}

.bn-admin-eyebrow,
.bn-admin-section-head > div > span {
  display: block;
  margin-bottom: 8px;
  color: #858178;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bn-admin-head h1 {
  margin: 0;
  color: var(--admin-ink);
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.bn-admin-head p {
  margin: 12px 0 0;
  max-width: 600px;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.55;
}

.bn-admin-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--admin-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  color: #666259;
  font: 650 10px/1 var(--mono);
  white-space: nowrap;
}

.bn-admin-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #67a339;
  box-shadow: 0 0 0 3px rgba(103, 163, 57, 0.12);
}

.bn-admin-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  border: 1px solid var(--admin-line);
  background: var(--admin-panel);
  box-shadow: 0 8px 30px rgba(36, 33, 24, 0.04);
  animation: bn-admin-rise 0.42s 0.04s var(--ease) both;
}

.bn-admin-metric {
  min-width: 0;
  padding: 22px 20px;
  border-left: 1px solid var(--admin-line);
}

.bn-admin-metric:first-child {
  border-left: 0;
}

.bn-admin-metric > span {
  display: block;
  margin-bottom: 18px;
  color: var(--admin-muted);
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bn-admin-metric > strong {
  display: block;
  overflow: hidden;
  color: var(--admin-ink);
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: clamp(27px, 3vw, 39px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  text-overflow: ellipsis;
}

.bn-admin-metric > small {
  display: block;
  min-height: 14px;
  margin-top: 12px;
  color: var(--admin-muted);
  font-size: 10px;
  line-height: 1.35;
}

.bn-admin-metric.is-primary {
  background: var(--admin-ink);
}

.bn-admin-metric.is-primary > span,
.bn-admin-metric.is-primary > small {
  color: #98978e;
}

.bn-admin-metric.is-primary > strong {
  color: var(--admin-accent);
}

.bn-admin-metric.is-alert {
  background: #fff5ec;
}

.bn-admin-metric.is-alert > strong,
.is-down {
  color: #c45238 !important;
}

.is-up {
  color: #4d7b2e !important;
}

.is-flat {
  color: var(--admin-muted) !important;
}

.bn-admin-pulse,
.bn-admin-panel {
  margin-top: 18px;
  border: 1px solid var(--admin-line);
  background: var(--admin-panel);
  animation: bn-admin-rise 0.42s 0.08s var(--ease) both;
}

.bn-admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--admin-line);
}

.bn-admin-section-head > div > span {
  margin-bottom: 5px;
}

.bn-admin-section-head h2 {
  margin: 0;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -0.025em;
}

.bn-admin-section-head > strong,
.bn-admin-section-head > a {
  color: var(--admin-muted);
  font: 650 10px/1 var(--mono);
  text-decoration: none;
}

.bn-admin-section-head > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bn-admin-section-head > a:hover {
  color: var(--admin-ink);
  text-decoration: none;
}

.bn-admin-section-head > a svg {
  width: 12px;
  height: 12px;
}

.bn-admin-pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.bn-admin-pulse-grid article {
  position: relative;
  min-width: 0;
  padding: 20px 18px 18px;
  border-left: 1px solid var(--admin-line);
}

.bn-admin-pulse-grid article:first-child {
  border-left: 0;
}

.bn-admin-pulse-n {
  position: absolute;
  top: 17px;
  right: 16px;
  color: #cbc6b9;
  font: 500 9px/1 var(--mono);
}

.bn-admin-pulse-grid small,
.bn-admin-pulse-grid strong,
.bn-admin-pulse-grid article > span:last-child {
  display: block;
}

.bn-admin-pulse-grid small {
  color: var(--admin-muted);
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bn-admin-pulse-grid strong {
  margin-top: 16px;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.025em;
}

.bn-admin-pulse-grid article > span:last-child {
  margin-top: 7px;
  font-size: 9.5px;
}

.bn-admin-two-col {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

.bn-admin-plan-mix {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 20px 18px 17px;
}

.bn-admin-plan-mix > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
}

.bn-admin-plan-mix span {
  color: var(--admin-muted);
  font: 700 9px/1 var(--mono);
  text-transform: uppercase;
}

.bn-admin-plan-mix i {
  height: 7px;
  overflow: hidden;
  background: #ebe7dc;
}

.bn-admin-plan-mix b {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--admin-ink);
  animation: bn-admin-bar 0.65s 0.2s var(--ease) both;
  transform-origin: left;
}

.bn-admin-plan-mix strong {
  font: 700 11px/1 var(--mono);
  text-align: right;
}

.bn-admin-subscription-line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 13px 18px;
  border-top: 1px solid var(--admin-line);
  color: var(--admin-muted);
  font-size: 9.5px;
}

.bn-admin-subscription-line span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bn-admin-subscription-line i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c7a64e;
}

.bn-admin-subscription-line i.is-good {
  background: #5f983b;
}

.bn-admin-subscription-line i.is-bad {
  background: #d05b40;
}

.bn-admin-attention {
  padding: 8px;
}

.bn-admin-attention a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 39px;
  padding: 0 10px;
  border-bottom: 1px solid #ece8de;
  color: var(--admin-ink);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.bn-admin-attention a:last-child {
  border-bottom: 0;
}

.bn-admin-attention a:hover {
  background: #f5f2e9;
  text-decoration: none;
}

.bn-admin-all-clear {
  padding: 26px 18px;
  text-align: center;
}

.bn-admin-all-clear > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #e9f4dc;
  color: #527b36;
}

.bn-admin-all-clear strong {
  display: block;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 17px;
  font-weight: 550;
}

.bn-admin-all-clear p {
  margin: 5px 0 0;
  color: var(--admin-muted);
  font-size: 10px;
}

.bn-admin-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--admin-line);
}

.bn-admin-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(340px, 100%);
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--admin-line);
  background: #fff;
  color: #aaa59a;
}

.bn-admin-search:focus-within {
  border-color: #858178;
  box-shadow: 0 0 0 2px rgba(23, 23, 20, 0.06);
}

.bn-admin-search svg {
  width: 13px;
  height: 13px;
}

.bn-admin-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--admin-ink);
  font: 500 11px/1 var(--font);
}

.bn-admin-tools select {
  height: 34px;
  padding: 0 27px 0 9px;
  border: 1px solid var(--admin-line);
  border-radius: 0;
  background-color: #fff;
  color: #57544d;
  font: 600 10px/1 var(--font);
}

.bn-admin-tools > span:last-child {
  margin-left: auto;
  color: var(--admin-muted);
  font: 650 9.5px/1 var(--mono);
  white-space: nowrap;
}

.bn-admin-panel.is-table {
  overflow: hidden;
}

.bn-admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.bn-admin-table {
  width: 100%;
  border-collapse: collapse;
  color: #403e38;
  font-size: 10.5px;
}

.bn-admin-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--admin-line);
  background: #f4f1e9;
  color: #878278;
  font: 700 8.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.bn-admin-table td {
  height: 54px;
  padding: 8px 12px;
  border-bottom: 1px solid #ebe7dc;
  vertical-align: middle;
}

.bn-admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.bn-admin-table tbody tr:hover td {
  background: #f7f4ec;
}

.bn-admin-table tr[hidden] {
  display: none;
}

.bn-admin-table .is-number {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bn-admin-table .is-action {
  width: 54px;
  text-align: right;
}

.bn-admin-client,
.bn-admin-user {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
}

.bn-admin-client-mark,
.bn-admin-user > span:first-child {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  border-radius: 4px 9px 4px 4px;
  background: #252521;
  color: #f5f2e9;
  font: 700 8px/1 var(--mono);
  text-transform: uppercase;
}

.bn-admin-user > span:first-child {
  border-radius: 50%;
  background: #e8e3d7;
  color: #4a4740;
}

.bn-admin-client strong,
.bn-admin-client small,
.bn-admin-user strong,
.bn-admin-user small {
  display: block;
}

.bn-admin-client strong,
.bn-admin-user strong {
  color: var(--admin-ink);
  font-size: 10.5px;
  font-weight: 680;
  white-space: nowrap;
}

.bn-admin-client small,
.bn-admin-user small,
.bn-admin-table td > small {
  margin-top: 3px;
  color: #918d84;
  font-size: 8.8px;
}

.bn-admin-owner {
  display: block;
  max-width: 190px;
  overflow: hidden;
  font-size: 9.8px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bn-admin-plan,
.bn-admin-status,
.bn-admin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 7px;
  border: 1px solid #d8d3c7;
  border-radius: 999px;
  background: #f5f2e9;
  color: #6e6a62;
  font: 700 8px/1 var(--mono);
  text-transform: capitalize;
  white-space: nowrap;
}

.bn-admin-plan.is-pro {
  border-color: #bad1e3;
  background: #eaf4fb;
  color: #376d91;
}

.bn-admin-plan.is-agency {
  border-color: #c9c0df;
  background: #f1edf9;
  color: #665481;
}

.bn-admin-status.is-good {
  border-color: #bed6ad;
  background: #edf6e6;
  color: #4e762f;
}

.bn-admin-status.is-bad {
  border-color: #e4b9aa;
  background: #fff0eb;
  color: #a6412c;
}

.bn-admin-status.is-warn {
  border-color: #dfcb95;
  background: #fff7df;
  color: #82651c;
}

.bn-admin-badge {
  min-height: 16px;
  margin-left: 7px;
  border-color: #c3d35c;
  background: #f2fac2;
  color: #4f5b19;
  font-size: 7px;
  vertical-align: 1px;
}

.bn-admin-more {
  padding: 5px 8px;
  border: 1px solid var(--admin-line);
  background: #fff;
  color: #555149;
  font: 650 9px/1 var(--font);
}

.bn-admin-more:hover {
  border-color: #989389;
  background: var(--admin-ink);
  color: #fff;
}

.bn-admin-modal {
  border: 1px solid #dcd7ca;
  border-radius: 2px 14px 2px 2px;
  background: #fcfbf7;
  color: #171714;
  box-shadow: 0 24px 70px rgba(23, 23, 20, 0.24);
}

.bn-admin-modal h3 {
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 25px;
  font-weight: 550;
  letter-spacing: -0.035em;
}

.bn-admin-modal .modal-hint,
.bn-admin-modal .acct-note {
  color: #777369;
}

.bn-admin-modal .btn-primary {
  border-color: #171714;
  background: #171714;
  color: #fff;
}

.bn-admin-modal .btn-primary:hover {
  border-color: #30302c;
  background: #30302c;
}

.bn-admin-empty,
.bn-admin-fatal,
.bn-admin-loading {
  padding: 46px 20px;
  text-align: center;
}

.bn-admin-empty strong,
.bn-admin-fatal strong {
  display: block;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 19px;
  font-weight: 550;
}

.bn-admin-empty p,
.bn-admin-fatal p,
.bn-admin-loading p {
  margin: 6px 0 0;
  color: var(--admin-muted, #777369);
  font-size: 11px;
}

.bn-admin-data-note {
  margin: 14px 0 0;
  color: #908c82;
  font-size: 9.5px;
  line-height: 1.5;
}

.bn-admin-loading {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: #181816;
  color: #fff;
}

.bn-admin-loading .btn-spinner {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: var(--admin-accent);
}

@keyframes bn-admin-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bn-admin-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 1050px) {
  .bn-admin-hero-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bn-admin-metric:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--admin-line);
  }

  .bn-admin-metric:nth-child(4) {
    border-top: 1px solid var(--admin-line);
  }

  .bn-admin-pulse-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bn-admin-pulse-grid article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--admin-line);
  }

  .bn-admin-pulse-grid article:nth-child(4) {
    border-top: 1px solid var(--admin-line);
  }
}

@media (max-width: 760px) {
  .bn-admin-shell {
    display: block;
  }

  .bn-admin-side {
    position: sticky;
    z-index: 30;
    width: 100%;
    height: auto;
    padding: 10px 12px 0;
  }

  .bn-admin-brand {
    padding: 0 2px 9px;
  }

  .bn-admin-brand .bn-admin-mark {
    width: 28px;
    height: 28px;
  }

  .bn-admin-nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .bn-admin-nav a {
    min-height: 31px;
    white-space: nowrap;
  }

  .bn-admin-nav a.is-active::after,
  .bn-admin-side-foot {
    display: none;
  }

  .bn-admin-main {
    padding: 32px 14px 50px;
  }

  .bn-admin-head {
    flex-direction: column;
    margin-bottom: 24px;
  }

  .bn-admin-head h1 {
    font-size: 38px;
  }

  .bn-admin-hero-grid,
  .bn-admin-two-col {
    grid-template-columns: 1fr;
  }

  .bn-admin-metric {
    border-top: 1px solid var(--admin-line);
    border-left: 0;
  }

  .bn-admin-metric:first-child {
    border-top: 0;
  }

  .bn-admin-pulse-grid {
    grid-template-columns: 1fr;
  }

  .bn-admin-pulse-grid article {
    border-top: 1px solid var(--admin-line);
    border-left: 0;
  }

  .bn-admin-pulse-grid article:first-child {
    border-top: 0;
  }

  .bn-admin-tools {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .bn-admin-search {
    width: 100%;
  }

  .bn-admin-tools select {
    flex: 1;
  }

  .bn-admin-tools > span:last-child {
    flex: 1 0 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bn-admin-head,
  .bn-admin-hero-grid,
  .bn-admin-pulse,
  .bn-admin-panel,
  .bn-admin-plan-mix b {
    animation: none;
  }
}

/* —— Workspace URL field —— */
/* Admin visual alignment — same chrome and surfaces as the workspace app. */
.bn-admin-shell {
  --admin-ink: var(--ink);
  --admin-paper: var(--surface-2);
  --admin-panel: var(--surface);
  --admin-line: var(--border);
  --admin-muted: var(--muted);
  --admin-accent: var(--blue);
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px minmax(0, 1fr);
  background: var(--surface-2);
  color: var(--ink);
}

.bn-admin-side {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.bn-admin-brand {
  gap: 8px;
  padding: 0;
  color: var(--ink);
}

.bn-admin-brand:hover {
  color: var(--ink);
}

.bn-admin-mark,
.bn-admin-brand .bn-admin-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--surface);
  font-size: 9px;
}

.bn-admin-brand strong {
  font-size: 12.5px;
  font-weight: 650;
}

.bn-admin-brand small {
  display: inline-flex;
  width: max-content;
  margin-top: 2px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-press);
  font: 700 7px/1 var(--font);
  letter-spacing: 0.06em;
}

.bn-admin-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--surface-2);
}

.bn-admin-nav a {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
}

.bn-admin-nav a:hover {
  background: transparent;
  color: var(--ink-2);
}

.bn-admin-nav a.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.bn-admin-nav a.is-active::after {
  display: none;
}

.bn-admin-side-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 auto;
}

.bn-admin-back {
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
}

.bn-admin-back:hover {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
}

.bn-admin-identity {
  gap: 7px;
  padding: 0;
}

.bn-admin-avatar {
  width: 26px;
  height: 26px;
  border: 0;
  background: var(--blue-soft);
  color: var(--blue-press);
  box-shadow: inset 0 0 0 1px rgba(13, 153, 255, 0.22);
}

.bn-admin-identity strong,
.bn-admin-identity small {
  display: none;
}

.bn-admin-identity button {
  color: var(--muted);
}

.bn-admin-identity button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.bn-admin-main {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 28px 20px 56px;
}

.bn-admin-head {
  margin-bottom: 18px;
}

.bn-admin-eyebrow,
.bn-admin-section-head > div > span {
  margin-bottom: 6px;
  color: var(--faint);
  font: 700 9px/1 var(--font);
  letter-spacing: 0.08em;
}

.bn-admin-head h1 {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.bn-admin-head p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.bn-admin-live {
  border-color: var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font);
  box-shadow: var(--shadow-sm);
}

.bn-admin-hero-grid {
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.bn-admin-metric {
  padding: 17px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.bn-admin-metric:first-child,
.bn-admin-metric:nth-child(3),
.bn-admin-metric:nth-child(4) {
  border: 1px solid var(--border);
}

.bn-admin-metric > span {
  margin-bottom: 12px;
  color: var(--muted);
  font-family: var(--font);
  letter-spacing: 0.06em;
}

.bn-admin-metric > strong {
  font-family: var(--font);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 650;
  letter-spacing: -0.04em;
}

.bn-admin-metric.is-primary {
  border-color: rgba(13, 153, 255, 0.35);
  background: var(--surface);
  box-shadow: inset 0 3px 0 var(--blue), var(--shadow-sm);
}

.bn-admin-metric.is-primary > span,
.bn-admin-metric.is-primary > small {
  color: var(--muted);
}

.bn-admin-metric.is-primary > strong {
  color: var(--ink);
}

.bn-admin-metric.is-alert {
  background: var(--red-soft);
}

.bn-admin-pulse,
.bn-admin-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.bn-admin-section-head {
  min-height: 62px;
  border-bottom-color: var(--border);
}

.bn-admin-section-head h2,
.bn-admin-pulse-grid strong,
.bn-admin-all-clear strong,
.bn-admin-empty strong,
.bn-admin-fatal strong,
.bn-admin-modal h3 {
  font-family: var(--font);
  font-weight: 650;
}

.bn-admin-section-head h2 {
  font-size: 15px;
}

.bn-admin-pulse-grid article {
  border-color: var(--border);
}

.bn-admin-pulse-grid strong {
  font-size: 15px;
}

.bn-admin-plan-mix i {
  border-radius: 999px;
  background: var(--surface-hover);
}

.bn-admin-plan-mix b {
  border-radius: 999px;
  background: var(--blue);
}

.bn-admin-table th {
  border-bottom-color: var(--border);
  background: var(--surface-2);
  color: var(--faint);
  font-family: var(--font);
}

.bn-admin-table td {
  border-bottom-color: var(--border);
}

.bn-admin-table tbody tr:hover td {
  background: var(--surface-2);
}

.bn-admin-client-mark {
  border-radius: 7px;
  background: var(--ink);
}

.bn-admin-search,
.bn-admin-tools select {
  border-color: var(--border-2);
  border-radius: 8px;
  background-color: var(--surface-2);
}

.bn-admin-more {
  border-color: var(--border-2);
  border-radius: 7px;
  color: var(--ink-2);
}

.bn-admin-more:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
  color: var(--ink);
}

.bn-admin-modal {
  border-color: var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}

.bn-admin-modal .btn-primary {
  border-color: var(--blue);
  background: var(--blue);
}

.bn-admin-modal .btn-primary:hover {
  border-color: var(--blue-press);
  background: var(--blue-press);
}

.bn-admin-data-note {
  color: var(--faint);
}

.bn-admin-loading {
  background: var(--surface-2);
  color: var(--ink);
}

.bn-admin-loading .btn-spinner {
  border-color: rgba(13, 153, 255, 0.2);
  border-top-color: var(--blue);
}

@media (max-width: 760px) {
  .bn-admin-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .bn-admin-side {
    height: auto;
    min-height: 48px;
    padding: 8px 10px;
    flex-wrap: wrap;
  }

  .bn-admin-brand {
    padding: 0;
  }

  .bn-admin-brand .bn-admin-mark {
    width: 26px;
    height: 26px;
  }

  .bn-admin-nav {
    position: static;
    order: 3;
    width: 100%;
    transform: none;
    overflow-x: auto;
    margin-top: 7px;
    padding-bottom: 2px;
  }

  .bn-admin-nav a {
    flex: 1;
    justify-content: center;
  }

  .bn-admin-side-foot {
    display: flex;
  }

  .bn-admin-back span,
  .bn-admin-identity button {
    display: none;
  }

  .bn-admin-back {
    padding: 0 5px;
  }

  .bn-admin-main {
    padding: 24px 14px 48px;
  }

  .bn-admin-head h1 {
    font-size: 22px;
  }

  .bn-admin-metric,
  .bn-admin-metric:nth-child(3),
  .bn-admin-metric:nth-child(4) {
    border: 1px solid var(--border);
  }
}

.acct-slug-field {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface-2);
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease),
    background 0.14s var(--ease);
}

.acct-slug-field:focus-within {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
}

.acct-slug-prefix {
  flex-shrink: 0;
  padding: 0 2px 0 11px;
  color: var(--faint);
  font: 500 12.5px/1 var(--mono);
  white-space: nowrap;
}

.acct-slug-field input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 11px 0 2px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: 500 12.5px/1 var(--mono);
}

.acct-slug-field input:focus,
.acct-slug-field input:focus-visible {
  outline: none;
  box-shadow: none;
}

.acct-slug-field:has(input:disabled) {
  opacity: 0.7;
}

/* —— Workspace billing —— */
.acct-billing-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.acct-billing-notice.is-success {
  border-color: rgba(20, 174, 92, 0.28);
  background: var(--green-soft);
  color: var(--green);
}

.acct-billing-notice svg {
  flex-shrink: 0;
}

.acct-plan-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.acct-plan-badge.is-pro {
  background: var(--blue-soft);
  color: var(--blue-press);
}

.acct-plan-badge.is-agency {
  background: var(--purple-soft);
  color: var(--purple);
}

.acct-billing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 14px -18px -18px;
  border-top: 1px solid var(--border);
  background: var(--border);
}

.acct-billing-stats > div {
  min-width: 0;
  padding: 14px 18px 15px;
  background: var(--surface);
}

.acct-billing-stats span,
.acct-billing-stats small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-billing-stats strong {
  display: block;
  margin: 4px 0 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.acct-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.acct-plan-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.acct-plan-card.is-featured {
  border-color: rgba(13, 153, 255, 0.38);
  box-shadow: inset 0 0 0 1px rgba(13, 153, 255, 0.08);
}

.acct-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.acct-plan-name {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.acct-plan-pill {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-press);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.acct-plan-top p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.acct-plan-price {
  flex-shrink: 0;
  text-align: right;
}

.acct-plan-price strong {
  color: var(--ink);
  font-size: 20px;
  letter-spacing: -0.04em;
}

.acct-plan-price span {
  color: var(--muted);
  font-size: 10.5px;
}

.acct-plan-card ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 15px 0;
  padding: 0;
  list-style: none;
}

.acct-plan-card li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: 11.5px;
}

.acct-plan-card li svg {
  flex-shrink: 0;
  color: var(--green);
}

.acct-seat-picker {
  margin-top: auto;
}

.acct-plan-total {
  min-height: 17px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.acct-plan-cta {
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 760px) {
  .acct-billing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acct-plan-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .acct-slug-prefix {
    display: none;
  }

  .acct-slug-field input {
    padding-left: 11px;
  }
}

/* —— Inline role control on member rows —— */
.acct-role-select {
  height: 26px;
  padding: 0 22px 0 8px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23757575' stroke-width='1.75'%3E%3Cpath d='M4 6.5L8 10.5l4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  color: var(--ink-2);
  font: 600 11.5px/1 var(--font);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.12s var(--ease), background-color 0.12s var(--ease);
}

.acct-role-select:hover:not(:disabled) {
  border-color: #bdbdbd;
  background-color: var(--surface-2);
}

.acct-role-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.12);
  outline: none;
}

.acct-role-select:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Role is a control, not a hover affordance — keep it visible at rest. */
.acct-people-card .acct-row-actions .acct-role-select {
  opacity: 1;
}

.acct-people-card .acct-row-actions {
  gap: 6px;
}

.acct-people-card .acct-row:hover .acct-row-actions,
.acct-people-card .acct-row:focus-within .acct-row-actions {
  opacity: 1;
}

/* Only the buttons fade; the select stays put so rows do not jump. */
.acct-people-card .acct-row-actions {
  opacity: 1;
}

.acct-people-card .acct-row-actions .btn {
  opacity: 0;
  transition: opacity 0.12s var(--ease);
}

.acct-people-card .acct-row:hover .acct-row-actions .btn,
.acct-people-card .acct-row:focus-within .acct-row-actions .btn {
  opacity: 1;
}

@media (hover: none) {
  .acct-people-card .acct-row-actions .btn {
    opacity: 1;
  }
}

/* —— Share panel: workspace teammates —— */
.share-teammates {
  border-top: 1px solid var(--border);
  padding: 12px 14px 10px;
}

.share-teammates[hidden] {
  display: none;
}

.share-teammates-head strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.share-teammates-head small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}

.share-teammates-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 168px;
  overflow: auto;
  margin: 8px -6px 0;
  padding: 0 6px;
}

.share-teammate {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.1s var(--ease);
}

.share-teammate:hover {
  background: var(--surface-2);
}

.share-teammate input {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
}

.share-teammate-avatar {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--border);
}

.share-teammate-text {
  flex: 1;
  min-width: 0;
}

.share-teammate-text strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.share-teammate-text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10.5px;
}

.share-teammates-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.share-teammates-foot .btn {
  width: auto;
  margin: 0;
}

.share-teammates-status {
  color: var(--muted);
  font-size: 11px;
}

.share-teammates-status.is-error {
  color: var(--red);
}

/* ---- Review targets: images, PDFs and video on the canvas ---------------- */

.file-btn {
  flex-shrink: 0;
  gap: 5px;
}
.file-btn .icon {
  width: 13px;
  height: 13px;
}

/* Files landing + the pointer to it from Record. */
/* One column for everything: copy, dropzone, Figma and the library all share
   the same edges, so the block reads as a single card instead of three
   stray widths stacked on top of each other. */
.files-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.files-landing[hidden] {
  display: none;
}
.preview-empty > .files-landing {
  width: min(100%, 380px);
}
.preview-empty > .files-landing > p {
  margin-bottom: 22px;
}

.workspace-btn-count {
  min-width: 15px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--border-2);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}
.workspace-btn.active .workspace-btn-count {
  background: var(--blue);
  color: #fff;
}
.workspace-btn-count[hidden] {
  display: none;
}

.viewport-btns[hidden],
.recording-dock-divider[hidden],
.tool-btn[hidden] {
  display: none;
}

/* The either/or on the Record landing: load a page, or upload a file. */
.landing-or {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  margin: 22px 0 18px;
  color: var(--faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.landing-or::before,
.landing-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.landing-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 22px 20px;
  border: 1.5px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.landing-upload:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.landing-upload svg {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
  color: var(--muted);
}
.landing-upload:hover svg {
  color: var(--blue);
}
.landing-upload-main {
  font-size: 13px;
  font-weight: 600;
}
.landing-upload-sub {
  font-size: 11px;
  color: var(--muted);
}

.landing-figma {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.landing-figma:hover {
  border-color: var(--ink-2);
  background: var(--surface-hover);
  color: var(--ink);
}
.landing-figma svg {
  width: 14px;
  height: 14px;
  overflow: visible;
}
.landing-figma svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
}
.landing-figma[hidden] {
  display: none !important;
}

/* The asset library on the Record landing — scales past a handful of files. */
.target-list {
  width: 100%;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.target-list[hidden] {
  display: none;
}

.target-list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  margin-bottom: 6px;
  padding: 0 9px;
}
.target-list-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.target-list-count {
  margin-left: 2px;
  color: var(--faint);
  font-weight: 500;
}
.target-list-search {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-family: inherit;
}
.target-list-search[hidden] {
  display: none;
}
.target-list-search:focus {
  outline: none;
  border-color: var(--blue);
}

/* Caps at roughly six rows, then scrolls — 50 files must not push the
   page furniture off the canvas. */
.target-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.note-detail-page.is-asset .note-detail-page-ico {
  color: var(--muted);
}

.target-row-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.target-row-wrap:hover {
  background: var(--surface);
  border-color: var(--border);
}
.target-row-wrap.is-open {
  background: var(--blue-soft);
  border-color: var(--blue);
}
.target-row-wrap.is-open .target-row {
  color: var(--blue-press);
}

.target-row {
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Add-a-version lives on the row so a new cut is one click from the library. */
.target-row-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.target-row-add svg {
  width: 13px;
  height: 13px;
}
.target-row-wrap:hover .target-row-add,
.target-row-add:focus-visible {
  opacity: 1;
}
.target-row-add:hover {
  background: var(--blue);
  color: #fff;
}
.target-row-kind svg {
  display: block;
  width: 13px;
  height: 13px;
  color: var(--muted);
  flex-shrink: 0;
}
.target-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.target-row-v {
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.target-row-v.is-empty {
  color: var(--red);
}
/* Muted by default — a badge per row in solid blue shouts louder than the
   file names it is annotating. It goes solid on the open file only. */
.target-row-count {
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  flex-shrink: 0;
}
.target-row-wrap.is-open .target-row-count {
  background: var(--blue);
  color: #fff;
}
.target-list-empty {
  margin: 8px 9px;
  color: var(--faint);
  font-size: 11px;
}

/* Long uploads report progress in place instead of a stream of toasts. */
.upload-progress {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  transform: translateX(-50%);
  min-width: 260px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  box-shadow: var(--shadow-float);
}
.upload-progress-bar {
  display: block;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.upload-progress-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--blue);
  transition: width 0.2s ease;
}

.asset-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  z-index: 2;
}

/* `hidden` must win over the display above, or this layer covers the canvas. */
.asset-view[hidden] {
  display: none;
}

.asset-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  flex-shrink: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.asset-head-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
/* Everything after the name is right-aligned tooling; the name takes the slack
   so turning Compare on never shifts the canvas down by a whole row. */
.asset-head-name {
  margin-right: auto;
}
.asset-head-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-versions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.asset-version {
  min-width: 30px;
  padding: 3px 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.asset-version.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-press);
  font-weight: 600;
}
.asset-newver,
.asset-close,
.asset-compare-toggle,
.asset-figma-version {
  padding: 3px 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.asset-newver:hover,
.asset-close:hover,
.asset-compare-toggle:hover,
.asset-figma-version:hover {
  border-color: var(--border-2);
  color: var(--ink);
  background: var(--surface-hover);
}

.figma-import-modal {
  width: min(460px, calc(100vw - 32px));
}
.figma-import-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.figma-import-head h3 {
  margin: 0 0 4px;
}
.figma-import-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.figma-import-mark {
  display: grid;
  grid-template-columns: repeat(2, 8px);
  grid-template-rows: repeat(3, 8px);
  flex: 0 0 auto;
  margin-top: 2px;
}
.figma-import-mark i {
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
.figma-import-mark i:nth-child(5) {
  grid-column: 1;
}
.figma-import-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
.figma-import-field input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  box-sizing: border-box;
}
.figma-import-field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.figma-import-help {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.figma-import-status {
  min-height: 16px;
  margin-top: 8px;
  color: var(--red);
  font-size: 11px;
}
.asset-compare-toggle.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-press);
}

/* Compare rides a floating dock over the canvas — the controls sit with the
   thing they act on, and the header keeps its height whether or not you are
   comparing. It stacks above the recording dock instead of colliding. */
.asset-compare-dock {
  position: absolute;
  left: 50%;
  bottom: 74px;
  z-index: 4;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 5px 7px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.asset-compare-dock-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
}
/* Keep the media clear of the dock it sits under. */
.asset-body.is-comparing {
  padding-bottom: 132px;
}

/* A ⇄ B. One control carries both sides of the comparison, so there is no
   second row of chrome and no guessing which version is which. A is the one
   comments land on; the tags repeat on the canvas panels. */
.asset-ab {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface-2);
}
.asset-ab-slot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 5px 0 4px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.asset-ab-tag {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.asset-ab-slot.is-b .asset-ab-tag {
  background: var(--ink-2);
}
.asset-ab-slot select {
  max-width: 150px;
  border: 0;
  padding: 0 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.asset-ab-slot select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-radius: 3px;
}
.asset-ab-swap {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.asset-ab-swap svg {
  width: 13px;
  height: 13px;
}
.asset-ab-swap:hover {
  background: var(--surface);
  color: var(--ink);
}

.asset-compare-layout {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--surface-2);
}
.asset-compare-layout button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.asset-compare-layout button svg {
  width: 15px;
  height: 15px;
}
.asset-compare-layout button:hover {
  color: var(--ink);
}
.asset-compare-layout button.active {
  background: var(--surface);
  color: var(--blue-press);
  box-shadow: var(--shadow-sm);
}

.asset-compare-opacity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}
.asset-compare-opacity[hidden] {
  display: none;
}
.asset-compare-opacity input {
  width: 96px;
  accent-color: var(--blue);
}
.asset-compare-opacity output {
  width: 30px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.asset-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Match recordings: center media in the available canvas. `safe` falls
     back to the top edge when tall media needs to scroll. */
  justify-content: safe center;
  gap: 16px;
}

.asset-compare-shell {
  display: grid;
  align-items: start;
  gap: 16px;
  width: 100%;
}
.compare-side .asset-compare-shell {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.compare-stack .asset-compare-shell {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px;
}
/* Stacked-in-place modes hug the media instead of the canvas, so the wipe
   divider lands on the image and not on empty gutter. */
.compare-overlay .asset-compare-shell,
.compare-wipe .asset-compare-shell,
.compare-diff .asset-compare-shell {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  width: fit-content;
  max-width: min(100%, 1100px);
}
.asset-compare-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.asset-compare-panel.is-secondary {
  pointer-events: none;
}
.compare-overlay .asset-compare-panel,
.compare-wipe .asset-compare-panel,
.compare-diff .asset-compare-panel {
  grid-area: 1 / 1;
}
.compare-overlay .asset-compare-panel.is-secondary {
  z-index: 2;
  opacity: var(--compare-opacity, 0.5);
}

/* Wipe: B is clipped to the right of the divider, so dragging it sweeps one
   version over the other in place. */
.compare-wipe .asset-compare-panel.is-secondary {
  z-index: 2;
  clip-path: inset(0 0 0 var(--compare-wipe, 50%));
}

/* Difference: identical pixels go black, everything that moved lights up. */
.compare-diff .asset-compare-panel.is-secondary {
  z-index: 2;
  mix-blend-mode: difference;
}
.compare-diff .asset-compare-shell {
  background: #000;
  border-radius: 4px;
}
.compare-diff .asset-compare-panel .asset-media {
  box-shadow: none;
}
.compare-diff .asset-compare-label {
  display: none;
}

.asset-wipe {
  position: absolute;
  inset: 0;
  left: var(--compare-wipe, 50%);
  z-index: 4;
  width: 0;
  cursor: ew-resize;
  touch-action: none;
}
.asset-wipe::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 16px;
}
.asset-wipe::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.22);
}
.asset-wipe-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  cursor: ew-resize;
  box-shadow: var(--shadow-md);
}
.asset-wipe-grip svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}
.asset-wipe.is-dragging .asset-wipe-grip,
.asset-wipe-grip:focus-visible {
  border-color: var(--blue);
  color: var(--blue-press);
  outline: none;
}
.asset-compare-label {
  position: sticky;
  top: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.asset-compare-label b {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.asset-compare-panel.is-secondary .asset-compare-label b {
  background: var(--ink-2);
}
/* In the stacked-in-place modes the panel must be exactly the size of the
   media, or the wipe divider runs up past the top edge of the image. */
.compare-overlay .asset-compare-label,
.compare-wipe .asset-compare-label,
.compare-diff .asset-compare-label {
  position: absolute;
  top: 8px;
  left: 8px;
}
.compare-overlay .asset-compare-panel.is-secondary .asset-compare-label,
.compare-wipe .asset-compare-panel.is-secondary .asset-compare-label {
  left: auto;
  right: 8px;
}
.asset-compare-panel .asset-media {
  max-width: 100%;
}

@media (max-width: 760px) {
  .asset-ab-slot select {
    max-width: 84px;
  }
  .compare-side .asset-compare-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

.asset-media {
  position: relative;
  max-width: 100%;
  line-height: 0;
  box-shadow: var(--shadow-md);
  background: #fff;
  border-radius: 2px;
}
.asset-video-frame {
  --video-aspect: 1.7777778;
  width: min(100%, 1120px);
  overflow: hidden;
  border-radius: 10px;
  background: #0a0b0d;
  box-shadow:
    0 24px 70px rgba(10, 12, 16, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.asset-video-frame.is-passive {
  border-radius: 6px;
}
.asset-video-player {
  --video-accent: #ffcc33;
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #f7f7f5;
  background: #08090b;
  outline: none;
}
.asset-video-player:focus-visible {
  box-shadow: inset 0 0 0 2px var(--video-accent);
}
.asset-video-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--video-aspect);
  min-height: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.055), transparent 42%),
    #08090b;
}
.asset-video-frame .asset-video {
  width: 100%;
  max-height: min(72vh, 760px);
  object-fit: contain;
  background: #08090b;
}
.asset-video-frame.is-passive .asset-video {
  max-height: 62vh;
}
.asset-video-frame-time {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(7, 8, 10, 0.72);
  color: rgba(255, 255, 255, 0.82);
  font: 600 10px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.asset-video-comment-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 204, 51, 0.5);
  border-radius: 999px;
  transform: translate(-50%, 8px);
  background: rgba(16, 15, 10, 0.84);
  color: #ffe28a;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(10px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.asset-video-comment-cross {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 500 13px/1 monospace;
}
.asset-video-player.is-commenting .asset-video-comment-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}
.asset-video-player.is-commenting .asset-video-stage {
  cursor: crosshair;
}
.asset-video-controls {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: #111216;
  line-height: 1;
}
.asset-video-control,
.asset-video-comment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  font: inherit;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.asset-video-control {
  width: 32px;
}
.asset-video-control:hover,
.asset-video-comment:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.asset-video-control:focus-visible,
.asset-video-comment:focus-visible,
.asset-video-marker:focus-visible,
.asset-video-timeline:focus-visible {
  outline: 2px solid var(--video-accent);
  outline-offset: 2px;
}
.asset-video-control svg {
  width: 18px;
  height: 18px;
}
.asset-video-play .is-pause,
.asset-video-volume .is-muted {
  display: none;
}
.asset-video-player.is-playing .asset-video-play .is-play,
.asset-video-player.is-muted .asset-video-volume .is-sound {
  display: none;
}
.asset-video-player.is-playing .asset-video-play .is-pause,
.asset-video-player.is-muted .asset-video-volume .is-muted {
  display: block;
}
.asset-video-clock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 76px;
  color: rgba(255, 255, 255, 0.48);
  font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.asset-video-current {
  color: rgba(255, 255, 255, 0.9);
}
.asset-video-timeline-wrap {
  position: relative;
  flex: 1 1 auto;
  height: 32px;
  min-width: 80px;
}
.asset-video-timeline {
  --video-progress: 0%;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.asset-video-timeline::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--video-accent) 0 var(--video-progress),
    rgba(255, 255, 255, 0.18) var(--video-progress) 100%
  );
}
.asset-video-timeline::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.asset-video-timeline::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--video-accent);
}
.asset-video-timeline::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 2px solid #111216;
  border-radius: 50%;
  appearance: none;
  background: var(--video-accent);
  box-shadow: 0 0 0 1px rgba(255, 204, 51, 0.5);
}
.asset-video-timeline::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid #111216;
  border-radius: 50%;
  background: var(--video-accent);
}
.asset-video-markers {
  position: absolute;
  inset: 0 6px;
  z-index: 3;
  pointer-events: none;
}
.asset-video-marker {
  position: absolute;
  top: 3px;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid #111216;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  transition: transform 0.12s ease, background 0.12s ease;
}
.asset-video-marker:hover,
.asset-video-marker.is-current {
  transform: translateX(-50%) scale(1.55);
  background: var(--video-accent);
}
.asset-video-marker.is-resolved {
  opacity: 0.42;
}
.asset-video-comment {
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.015em;
}
.asset-video-comment[hidden] {
  display: none;
}
.asset-video-comment svg {
  width: 16px;
  height: 16px;
}
.asset-video-comment.active {
  border-color: rgba(255, 204, 51, 0.65);
  background: rgba(255, 204, 51, 0.14);
  color: #ffe28a;
}
.asset-video-player.has-error .asset-video-stage::after {
  content: "This video could not be decoded by your browser";
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 8px 11px;
  border-radius: 6px;
  transform: translate(-50%, -50%);
  background: rgba(10, 11, 13, 0.84);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  line-height: 1.3;
}
.asset-video-player:fullscreen {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100vw;
  height: 100vh;
  background: #050607;
}
.asset-video-player:fullscreen .asset-video-stage,
.asset-video-player:fullscreen .asset-video {
  width: 100%;
  height: 100%;
  max-height: none;
}
.asset-video-player:fullscreen > .pin-layer {
  z-index: 6;
}
/* Comment mode: the media is a target, not something to drag or select. */
body[data-bn-tool="pin"] .asset-media {
  cursor: crosshair;
}
body[data-bn-tool="pin"] .asset-image,
body[data-bn-tool="pin"] .asset-page {
  pointer-events: auto;
}

.asset-image,
.asset-page {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
}
.asset-video {
  display: block;
  max-width: 100%;
  max-height: 70vh;
}

@media (max-width: 720px) {
  .asset-video-controls {
    gap: 5px;
    padding: 0 7px;
  }
  .asset-video-clock {
    min-width: 62px;
    font-size: 9px;
  }
  .asset-video-comment {
    width: 32px;
    padding: 0;
  }
  .asset-video-comment span {
    display: none;
  }
}

.asset-status {
  padding: 40px 0;
  color: var(--muted);
  font-size: 12px;
}

.asset-pin {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pin-color, var(--blue));
  color: #fff;
  font: 700 11px/1 system-ui, sans-serif;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px #fff;
  pointer-events: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
body[data-bn-workspace="review"] .asset-pin {
  cursor: pointer;
  touch-action: auto;
}
.asset-pin.is-dragging {
  z-index: 6;
  cursor: grabbing;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 3px #0d99ff;
}
body.is-dragging-asset-pin {
  cursor: grabbing;
  user-select: none;
}
body.is-dragging-asset-pin .asset-pin {
  cursor: grabbing;
}
.asset-pin.is-resolved {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.asset-pin.is-active {
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 0 3px #0d99ff;
}
.asset-pin .bn-pin-num {
  position: relative;
  z-index: 1;
}
.asset-pin .bn-pin-author {
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  transform: translateX(-50%);
  max-width: 88px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.88);
  color: #fff;
  font: 650 9px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.asset-pin .bn-pin-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  border: 3px solid #0d99ff;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.asset-pin.is-pulse .bn-pin-ring {
  animation: bn-pin-pulse 1.1s ease-out 2;
}
.asset-pin.is-pulse {
  animation: bn-pin-glow 1.1s ease-out 2;
}
@keyframes bn-pin-glow {
  0%, 100% { filter: none; }
  40% { filter: drop-shadow(0 0 10px rgba(13, 153, 255, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .asset-pin.is-pulse,
  .asset-pin.is-pulse .bn-pin-ring {
    animation: none;
  }
}

.asset-drop {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 153, 255, 0.08);
  border: 2px dashed var(--blue);
  border-radius: 4px;
  pointer-events: none;
}
.asset-drop[hidden] {
  display: none;
}
.asset-drop-inner {
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.direct-recording-open {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--muted, #666);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.direct-recording-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  overflow: auto;
  padding: 22px;
}

.direct-recording-head,
.direct-recording-create,
.direct-recording-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.direct-recording-head h3,
.direct-recording-head p {
  margin: 0;
}

.direct-recording-head p,
.direct-recording-modal small,
.direct-recording-warning {
  color: var(--muted, #6b6b68);
}

.direct-recording-head p {
  margin-top: 4px;
}

.direct-recording-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.direct-recording-modes > div,
.direct-recording-create,
.direct-recording-result,
.direct-recording-keys {
  border: 1px solid var(--border, #deded9);
  border-radius: 10px;
  padding: 13px;
}

.direct-recording-modes strong,
.direct-recording-modes small,
.direct-recording-create strong,
.direct-recording-create small,
.direct-recording-key span,
.direct-recording-key small {
  display: block;
}

.direct-recording-modes ol {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text, #252523);
  font-size: 12px;
  line-height: 1.45;
}

.direct-recording-modes li + li {
  margin-top: 5px;
}

.direct-recording-result,
.direct-recording-keys {
  margin-top: 12px;
}

.direct-recording-result label {
  display: block;
  margin: 8px 0 5px;
  font-weight: 600;
}

.direct-recording-result textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  resize: vertical;
  border: 1px solid var(--border, #d8d8d3);
  border-radius: 7px;
  padding: 9px;
  background: var(--surface-subtle, #f7f7f5);
  color: inherit;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.direct-recording-warning {
  margin: 10px 0 0;
  font-size: 12px;
}

.direct-recording-key {
  padding: 9px 0;
  border-bottom: 1px solid var(--border, #e3e3df);
}

.direct-recording-key:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 620px) {
  .direct-recording-modes { grid-template-columns: 1fr; }
  .direct-recording-create { align-items: flex-start; flex-direction: column; }
}

/* =========================
   Public legal + authorization pages
   ========================= */

.legal-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface-2);
}

.legal-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
}

.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
}

.legal-brand:hover {
  color: var(--ink);
  text-decoration: none;
}

.legal-brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--surface);
  font: 700 8px/1 var(--font);
  letter-spacing: -0.04em;
  box-shadow: var(--shadow-sm);
}

.legal-topnav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--surface-2);
}

.legal-topnav a,
.legal-product {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.legal-topnav a.is-active,
.legal-product {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.legal-product {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  box-shadow: none;
}

.legal-top-action,
.legal-secure {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.legal-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
}

.legal-secure::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.legal-main {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.legal-main-compact {
  width: min(520px, 100%);
  align-self: center;
  padding-top: 48px;
}

.legal-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.legal-kicker,
.legal-date,
.legal-index > span,
.legal-section-number,
.legal-limited-use > span,
.legal-permissions > span {
  font: 600 9.5px/1.35 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-press);
}

.legal-page-head h1 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.035em;
}

.legal-page-head p {
  max-width: 62ch;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.legal-date {
  flex-shrink: 0;
  margin-top: 21px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--faint);
  box-shadow: inset 0 0 0 1px var(--border);
}

.legal-layout {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.legal-index {
  position: sticky;
  top: 68px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.legal-index > span {
  padding: 4px 7px 7px;
  color: var(--faint);
}

.legal-index a {
  padding: 6px 7px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
}

.legal-index a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.legal-document {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.legal-summary {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 11px;
  padding: 18px 20px;
  border-bottom: 1px solid #cde7fa;
  background: var(--blue-soft);
}

.legal-summary p {
  margin: 0;
  color: #315b78;
  font-size: 12.5px;
  line-height: 1.55;
}

.legal-summary strong {
  color: #174f75;
}

.legal-record-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px rgba(242, 72, 34, 0.18);
}

.legal-document section {
  position: relative;
  padding: 22px 22px 24px 58px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 66px;
}

.legal-section-number {
  position: absolute;
  top: 25px;
  left: 22px;
  color: var(--faint);
}

.legal-document h2 {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.legal-document p,
.legal-document li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.58;
}

.legal-document p { margin: 0; }
.legal-document p + p { margin-top: 10px; }

.legal-document strong {
  color: var(--ink-2);
  font-weight: 600;
}

.legal-document ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.legal-document li + li { margin-top: 5px; }

.legal-callout {
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.legal-limited-use {
  padding: 18px 22px;
  background: var(--surface-2);
}

.legal-limited-use > span {
  display: block;
  margin-bottom: 6px;
  color: var(--faint);
}

.legal-limited-use p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.legal-consent-card {
  padding: 0;
  overflow: hidden;
}

.legal-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.legal-account-row > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.legal-account-row strong,
.legal-account-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legal-account-row strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.legal-account-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

.legal-permissions { padding: 18px; }
.legal-permissions > span { color: var(--faint); }

.legal-permissions ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.legal-permissions li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.legal-permissions i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--green-soft);
  color: var(--green);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.legal-permissions li:last-child i {
  background: var(--surface-2);
  color: var(--faint);
}

.legal-permissions strong,
.legal-permissions small { display: block; }

.legal-permissions strong {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.legal-permissions small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.legal-consent-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

.legal-consent-actions .btn {
  width: auto;
  min-height: 34px;
  margin: 0;
}

.legal-security-note {
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.legal-security-note span {
  color: var(--green);
  font-size: 9px;
}

@media (max-width: 700px) {
  .legal-main { padding: 24px 14px 48px; }
  .legal-page-head { flex-direction: column; gap: 10px; }
  .legal-date { margin-top: 0; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-index { position: static; flex-direction: row; overflow-x: auto; }
  .legal-index > span { display: none; }
  .legal-index a { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 520px) {
  .legal-topnav,
  .legal-product {
    position: static;
    transform: none;
    margin-left: auto;
  }
  .legal-top-action,
  .legal-secure { display: none; }
  .legal-page-head h1 { font-size: 20px; }
  .legal-document section { padding: 20px 18px; }
  .legal-section-number { position: static; display: block; margin-bottom: 6px; }
  .legal-consent-actions .btn { flex: 1; }
}