/* ══════════════════════════════════════════════════════════════════════════
 * EZ PDF Editor — Video Signing Room v2 (in-app sidebar + guest mode)
 * All rules are gated behind body.vsr-live so the normal editor is untouched
 * when VSR isn't in use.
 * ══════════════════════════════════════════════════════════════════════════ */

body.vsr-live {
  --vsr-sbw: 330px;           /* signing room sidebar width (draggable) */
  --vsr-ink: #e2e8f0;
  --vsr-panel: #111c31;
  --vsr-card: #1e293b;
  --vsr-line: rgba(148,163,184,.18);
}

/* ── Sidebar (right edge, like the Pages panel but mirrored) ─────────────── */
#vsrSidebar {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--vsr-sbw);
  z-index: 1990000000; background: #0f172a; color: var(--vsr-ink);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .2s ease;
  box-shadow: -6px 0 28px -12px rgba(0,0,0,.55);
}
#vsrSidebar.hidden { display: none; }
body.vsr-live.vsr-open #vsrSidebar { transform: none; }
body.vsr-live.vsr-open #viewer { margin-right: var(--vsr-sbw); }
@media (max-width: 760px) {
  body.vsr-live.vsr-open #viewer { margin-right: 0; }        /* mobile: floats over the doc */
  #vsrSidebar { width: min(86vw, var(--vsr-sbw)); }
}

/* drag handle on the sidebar's LEFT edge (mirror of #sidebarResize) */
#vsrSidebarResize {
  position: absolute; top: 0; left: -3px; bottom: 0; width: 12px;
  z-index: 1990000001; cursor: ew-resize; display: flex;
  align-items: center; justify-content: center; touch-action: none;
}
#vsrSidebarResize::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px;
  background: rgba(148,163,184,.25); transition: background .14s ease;
}
#vsrSidebarResize:hover::before, body.vsr-live.vsr-resizing #vsrSidebarResize::before { background: #10b981; }
#vsrSidebarResize .sb-grip {
  position: relative; z-index: 1; background: #1e293b; border: 1px solid #334155;
  color: #94a3b8; border-radius: 7px; width: 18px; height: 38px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.5);
}
#vsrSidebarResize:hover .sb-grip, body.vsr-live.vsr-resizing #vsrSidebarResize .sb-grip { color: #34d399; border-color: #10b981; }
body.vsr-live.vsr-resizing { cursor: ew-resize; user-select: none; }
body.vsr-live.vsr-resizing #vsrSidebar { transition: none; }

/* header bar */
#vsrSidebar .vsr-sb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--vsr-line); flex: 0 0 auto;
}
#vsrSidebar .vsr-sb-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 14px;
  color: #f1f5f9; display: flex; align-items: center; gap: 8px; min-width: 0;
}
#vsrSidebar .vsr-sb-title .vsr-sb-live {
  background: #065f46; color: #a7f3d0; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; flex: 0 0 auto;
}
#vsrSidebar .vsr-sb-close {
  background: none; border: none; color: #94a3b8; font-size: 16px; cursor: pointer;
  padding: 4px 8px; border-radius: 8px; line-height: 1; flex: 0 0 auto;
}
#vsrSidebar .vsr-sb-close:hover { color: #fff; background: rgba(255,255,255,.08); }

/* "X Parties Joined" heading (guest mode) */
#vsrSidebar .vsr-sb-parties {
  flex: 0 0 auto; padding: 10px 14px; border-bottom: 1px solid var(--vsr-line);
  font-size: 12.5px; color: #a5b4fc; font-weight: 700; line-height: 1.5;
  word-break: break-word;
}

/* scrollable tile body */
#vsrSidebar .vsr-sb-body {
  flex: 1; overflow-y: auto; padding: 12px 12px 16px; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
}

/* tiles */
#vsrSidebar .vsr-tile {
  position: relative; background: var(--vsr-card); border: 1px solid #334155;
  border-radius: 14px; overflow: hidden; flex: 0 0 auto;
}
#vsrSidebar .vsr-tile.on { border-color: rgba(16,185,129,.55); }
#vsrSidebar .vsr-tile.lost { opacity: .65; border-color: #7f1d1d; }
#vsrSidebar .vsr-tile-vid { position: relative; aspect-ratio: 16 / 9; background: #0b1220; }
#vsrSidebar .vsr-meter {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 4px;
  background: rgba(255,255,255,.06); z-index: 3; pointer-events: none;
  overflow: hidden;
}
#vsrSidebar .vsr-meter i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #059669, #34d399);
  box-shadow: 0 0 10px rgba(52,211,153,.9);
  transition: none;
}
#vsrSidebar .vsr-tile-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
#vsrSidebar .vsr-tile-cover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; color: #475569;
  background: linear-gradient(135deg, #0f172a, #1e293b);
}
#vsrSidebar .vsr-tile.on .vsr-tile-cover, #vsrSidebar .vsr-tile.lost .vsr-tile-cover { display: none; }
#vsrSidebar .vsr-tile-cap {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap;
}
#vsrSidebar .vsr-tile-cap b {
  font-size: 13px; color: #f1f5f9; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#vsrSidebar .vsr-tc-mail { display: block; font-size: 11px; color: #64748b; width: 100%; }
#vsrSidebar .vsr-tc-state { font-size: 11px; color: #94a3b8; font-weight: 700; flex: 0 0 auto; }
#vsrSidebar .vsr-tc-meta { display: block; width: 100%; font-size: 10.5px; font-weight: 400; color: #94a3b8; line-height: 1.35; }
#vsrSidebar .vsr-tc-meta:empty { display: none; }
#vsrSidebar .vsr-tile-ctrls { margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; }
#vsrSidebar .vsr-tc-btn {
  border: none; border-radius: 8px; background: #1e293b; color: #cbd5e1;
  width: 28px; height: 28px; font-size: 13px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s;
}
#vsrSidebar .vsr-tc-btn:hover { background: #334155; }
#vsrSidebar .vsr-tc-btn.off { background: #7f1d1d; color: #fff; }
#vsrSidebar .vsr-tile.on .vsr-tc-state { color: #34d399; }
#vsrSidebar .vsr-tile.lost .vsr-tc-state { color: #f87171; }
#vsrSidebar .vsr-host-actions { display: flex; gap: 8px; padding: 8px 10px 10px; }
#vsrSidebar .vsr-premic { font-size: 11.5px; font-weight: 600; color: #6ee7b7; padding: 0 10px 6px; }
#vsrSidebar .vsr-premic.vsr-premic-err { color: #fca5a5; }

/* buttons */
#vsrSidebar .vsr-btn {
  border: none; border-radius: 10px; background: #10b981; color: #fff;
  font-weight: 800; font-size: 13px; padding: 9px 12px; cursor: pointer;
  font-family: inherit; line-height: 1.15; transition: filter .12s ease, transform .06s ease;
}
#vsrSidebar .vsr-btn:hover { filter: brightness(1.08); }
#vsrSidebar .vsr-btn:active { transform: scale(.97); }
#vsrSidebar .vsr-btn:disabled { opacity: .5; cursor: default; }
#vsrSidebar .vsr-btn-ghost { background: #334155; color: #e2e8f0; }
#vsrSidebar .vsr-btn-ghost:hover { filter: brightness(1.18); }
#vsrSidebar .vsr-rec-btn { background: #dc2626; }
#vsrSidebar .vsr-rec-btn:hover { filter: brightness(1.12); }
#vsrSidebar .vsr-rec-btn.on { background: #b91c1c; }
#vsrSidebar .vsr-rec-btn.on::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; margin-right: 6px; animation: vsrrecpulse .9s infinite;
}
#vsrSidebar .vsr-sign-btn.on { background: #047857; }
@keyframes vsrrecpulse { 50% { opacity: .3; } }

/* invite box */
#vsrSidebar .vsr-sb-invite {
  flex: 0 0 auto; border-top: 1px solid var(--vsr-line); padding: 12px 14px 10px;
  background: var(--vsr-panel);
}
#vsrSidebar .vsr-sb-sec {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #64748b; margin-bottom: 8px;
}
#vsrSidebar .vsr-inv-row { display: flex; flex-direction: column; gap: 6px; }
#vsrSidebar .vsr-inv-fields { display: flex; gap: 6px; }
#vsrSidebar .vsr-inv-fields input { flex: 1 1 0; min-width: 0; }
#vsrSidebar .vsr-inv-row input {
  width: 100%; box-sizing: border-box; background: #0b1220; border: 1px solid #334155;
  color: #e2e8f0; border-radius: 9px; padding: 8px 10px; font-size: 13px; outline: none;
}
#vsrSidebar .vsr-inv-row input:focus { border-color: #10b981; }
#vsrSidebar .vsr-inv-row input::placeholder { color: #475569; }
#vsrSidebar .vsr-inv-url { display: block; margin-top: 8px; }
#vsrSidebar .vsr-inv-actions { display: flex; gap: 6px; margin-top: 6px; }
#vsrSidebar .vsr-inv-actions .vsr-btn { flex: 1 1 0; }
#vsrSidebar .vsr-sb-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#vsrSidebar .vsr-sb-x {
  border: none; background: transparent; color: #64748b; font-size: 13px; line-height: 1;
  cursor: pointer; width: 24px; height: 24px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; transition: background .12s, color .12s;
}
#vsrSidebar .vsr-sb-x:hover { background: #1e293b; color: #fff; }
#vsrSidebar #vsrInviteBody {
  overflow: hidden;
  max-height: 320px;
  opacity: 1;
  transition: max-height .38s cubic-bezier(.22,.61,.36,1), opacity .28s ease, margin .3s ease;
}
#vsrSidebar #vsrInviteBox.vsr-inv-collapsed #vsrInviteBody {
  max-height: 0;
  opacity: 0;
}
#vsrSidebar #vsrInviteHeader { border-radius: 8px; padding: 2px 0; transition: background .14s ease; }
#vsrSidebar #vsrInviteBox.vsr-inv-collapsed #vsrInviteHeader { cursor: pointer; }
#vsrSidebar #vsrInviteBox.vsr-inv-collapsed #vsrInviteHeader:hover { background: #1e293b; padding: 2px 6px; }
#vsrSidebar .vsr-inv-link {
  display: block; width: 100%; box-sizing: border-box; font-size: 8px; color: #a5f3fc;
  background: #0b1220; border: 1px solid #334155; border-radius: 8px; padding: 7px 8px;
  word-break: break-all; overflow-wrap: break-word; white-space: normal; line-height: 1.4;
}
#vsrSidebar .vsr-inv-copy { flex: 0 0 auto; padding: 8px 10px; }

/* ── Live Signing (host assigns signature boxes, guests sign live) ───────── */
#vsrSidebar .vsr-live-sign {
  flex: 0 0 auto; border-top: 1px solid var(--vsr-line); padding: 10px 14px;
  background: var(--vsr-panel);
}
#vsrSidebar .vsr-live-sign.hidden { display: none; }
#vsrSidebar #vsrLiveSignList {
  display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px;
  max-height: 190px; overflow-y: auto; overflow-x: hidden;
}
#vsrSidebar .vsr-live-row { display: flex; align-items: center; gap: 8px; }
#vsrSidebar .vsr-live-row.placing { background: rgba(16,185,129,.08); border-radius: 8px; padding: 4px 6px; }
#vsrSidebar .vsr-live-name {
  flex: 1; font-size: 12.5px; color: #e2e8f0; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#vsrSidebar .vsr-live-state { font-size: 11px; font-weight: 800; color: #34d399; flex: 0 0 auto; }
#vsrSidebar .vsr-live-set { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
#vsrSidebar .vsr-live-set.active { background: #0e7490; }
#vsrSidebar .vsr-live-lets-sign { width: 100%; }
#vsrSidebar .vsr-live-lets-sign.on { background: #047857; }
#vsrSidebar #vsrLiveSignStatus {
  display: block; font-size: 11.5px; color: #94a3b8; line-height: 1.4; margin-top: 8px;
  min-height: 14px;
}

/* placement mode over the document */
body.vsr-placing .page, body.vsr-placing .overlay { cursor: crosshair; touch-action: none; }
#vsrPlaceGhost {
  position: absolute; border: 2px dashed #10b981; border-radius: 4px;
  background: rgba(16,185,129,.12); z-index: 5; pointer-events: none;
  box-sizing: border-box;
}
/* signature boxes placed on the shared document (host + stream + recording) */
.vsr-live-sigbox {
  position: absolute; border: 2px dashed #10b981; border-radius: 4px; z-index: 5;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  font-weight: 800; font-size: 11px; color: #059669; background: rgba(16,185,129,.08);
  pointer-events: auto; cursor: move; text-align: center; padding: 2px; touch-action: none;
}
.vsr-live-sigbox .vsr-live-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vsr-live-sigbox.signed { border-style: solid; border-color: #059669; background: rgba(5,150,105,.14); color: #047857; }
.vsr-live-sigbox.vsr-sigbox-done { display: none; }

#vsrPadModal .vsr-pad-note {
  margin: 0 0 10px; font-size: 12.5px; color: #0e7490; font-weight: 700; line-height: 1.45;
}

/* footer bar */
#vsrSidebar .vsr-sb-foot {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--vsr-line); background: #0d1626; align-items: center;
}
#vsrSidebar .vsr-sb-foot .vsr-btn { flex: 1 1 auto; }
#vsrSidebar .vsr-btn.on { background: #dc2626; }
#vsrSidebar .vsr-sb-status {
  flex: 1 1 100%; display: block; width: 100%; font-size: 11.5px; color: #94a3b8;
  line-height: 1.4; min-height: 14px;
}

/* ── Guest-mode: "X Parties Joined" overlay under the top bar ───────────── */
#vsrGuestHeader {
  position: fixed; left: 0; right: 0; z-index: 1300000000;
  background: rgba(15,23,42,.94); color: #e0e7ff; font-size: 12.5px; font-weight: 700;
  padding: 7px 14px; border-bottom: 1px solid rgba(148,163,184,.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#vsrGuestHeader.hidden { display: none; }

/* ── Guest-mode: main pane = host's document stream video ───────────────── */
#vsrMainPane {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  background: #0b1220; min-height: 0; overflow: hidden;
}
/* guest: pin the main pane to fill the left area regardless of the editor layout */
body.vsr-live.vsr-guest #vsrMainPane {
  position: fixed; top: 0; left: 0; right: var(--vsr-sbw, 330px); bottom: 0;
  z-index: 1500; flex: none;
}
body.vsr-live.vsr-guest #vsrDocVideo {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
#vsrMainPane.hidden { display: none; }
#vsrDocVideo { width: 100%; height: 100%; object-fit: contain; display: block; }
#vsrMainPane .vsr-main-label {
  position: absolute; top: 10px; left: 12px; background: rgba(15,23,42,.72);
  color: #a5b4fc; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px; pointer-events: none;
}
#vsrMainPane .vsr-watermark {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-size: 13px; font-weight: 800; letter-spacing: .05em;
  color: rgba(255,255,255,.8); opacity: .6;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  text-decoration: none; cursor: pointer;
}
/* guest: the viewer becomes a fixed full-height stage (no page scrolling) */
body.vsr-live.vsr-guest #viewer { overflow: hidden; display: flex; flex-direction: column; }

/* ── Guest signature pad modal (pad pattern ported from sign.html) ──────── */
#vsrPadModal .padcard {
  background: #fff; border-radius: 18px; width: 100%; max-width: 560px;
  padding: 18px; box-sizing: border-box;
}
#vsrPadModal .padcard h3 { margin: 0 0 12px; color: #0f172a; font-size: 17px; }
#vsrPadModal #vsrPadCanvas {
  width: 100%; height: 190px; border: 2px dashed #94a3b8; border-radius: 12px;
  touch-action: none; background: #fff; box-sizing: border-box;
}
#vsrPadModal .padactions { display: flex; gap: 10px; margin-top: 14px; }
#vsrPadModal .padactions .ghost {
  background: #f1f5f9; color: #334155; border: none; padding: 12px 18px;
  border-radius: 10px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 14px;
}
#vsrPadModal .padactions .bigbtn { flex: 1; }

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  #vsrSidebar .vsr-tile-cover { font-size: 26px; }
  #vsrMainPane .vsr-main-label { font-size: 10px; top: 8px; left: 8px; }
}

/* ── Mobile (phone) guest layout ──────────────────────────────────────────── */
@media (max-width: 760px) {
  /* the document video pane takes ~40% of the vertical screen, not the full height */
  body.vsr-live.vsr-guest #vsrMainPane { top: 0; bottom: auto; height: 40vh; right: 0; }
  /* always-visible mute / hide-camera controls over the video */
  #vsrMainPane .vsr-pane-ctrls { display: flex; }
}
#vsrMainPane .vsr-pane-ctrls {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: none; gap: 8px;
}
#vsrMainPane .vsr-pane-ctl {
  width: 44px; height: 44px; border-radius: 13px; border: none;
  background: rgba(15,23,42,.8); color: #e2e8f0; font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
}
#vsrMainPane .vsr-pane-ctl.off { background: rgba(127,29,29,.9); }

/* ── VSR hover tooltip ─────────────────────────────────────────────────── */
.vsr-tip {
  position: fixed; z-index: 2000000010; background: #0f172a; color: #e2e8f0;
  font-size: 11.5px; font-weight: 600; padding: 6px 10px; border-radius: 7px;
  border: 1px solid #334155; box-shadow: 0 8px 20px -8px rgba(0,0,0,.6);
  pointer-events: none; white-space: nowrap; max-width: 260px;
}
.vsr-tip.hidden { display: none; }

/* ── Host: name-your-session modal (compliance audit) ───────────────────── */
#vsrNameModal .vsr-namecard { max-width: 580px; }
#vsrNameModal .vsr-namecard .name-help { margin-bottom: 12px; }
#vsrNameModal .vsr-name-lbl {
  display: block; font-size: 12px; font-weight: 800; color: #64748b;
  letter-spacing: .02em; margin: 0 0 6px;
}
#vsrNameModal .vsr-name-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
#vsrNameModal .vsr-name-2col > div { min-width: 0; }
@media (max-width: 560px) { #vsrNameModal .vsr-name-2col { grid-template-columns: 1fr; } }
#vsrNameModal .vsr-namecard input {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1.5px solid #cbd5e1; border-radius: 11px; font-size: 15px;
  outline: none; transition: border-color .14s;
}
#vsrNameModal .vsr-namecard input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
#vsrNameModal .vsr-name-doc {
  margin-top: 14px; background: #f8fafc; border: 1.5px dashed #cbd5e1;
  border-radius: 11px; padding: 10px 12px; display: flex;
  flex-direction: column; gap: 9px;
}
/* The name belongs beside its label, not flung to the far edge of the card
   with a gulf between them. gap:8px keeps them read as one phrase. */
#vsrNameModal .vsr-name-doc-top { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; }
#vsrNameModal .vsr-name-doc-lbl { font-size: 12px; font-weight: 800; color: #64748b; letter-spacing: .02em; flex: 0 0 auto; }
#vsrNameModal .vsr-name-doc-val { font-size: 13.5px; font-weight: 700; color: #0f172a; text-align: left; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vsrNameModal .vsr-name-doc button {
  align-self: flex-start; background: #fff; border: 1.5px solid #cbd5e1;
  border-radius: 9px; color: #0e7490; font-weight: 800; font-size: 13px;
  padding: 7px 12px; cursor: pointer; transition: border-color .14s, background .14s;
}
#vsrNameModal .vsr-name-doc button:hover { border-color: #0e7490; background: #ecfeff; }
#vsrNameModal .vsr-name-note {
  margin-top: 12px; font-size: 12.5px; color: #475569; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; line-height: 1.55;
}
#vsrNameModal .vsr-name-note p { margin: 0 0 6px; }
#vsrNameModal .vsr-name-note p:last-child { margin: 0; }

/* ── Host: floating invite toast ────────────────────────────────────────── */
.vsr-toast {
  position: fixed; right: 18px; bottom: 22px; z-index: 2000000015;
  max-width: 380px; box-sizing: border-box; background: #0f172a; color: #e2e8f0;
  border: 1px solid #334155; border-radius: 14px; padding: 13px 16px;
  font-size: 13.5px; font-weight: 600; line-height: 1.5;
  box-shadow: 0 18px 45px -12px rgba(0,0,0,.55);
  display: flex; align-items: center; gap: 10px;
  opacity: 1; transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease;
}
.vsr-toast.vsr-toast-out { opacity: 0; transform: translateY(8px); }
@media (max-width: 600px) {
  .vsr-toast { right: 12px; left: 12px; bottom: 14px; max-width: none; }
}

/* ── Host: sidebar header session name + rename affordance ──────────────── */
#vsrSidebar .vsr-sb-head-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
#vsrSidebar .vsr-sb-sess {
  font-size: 11px; color: #a5b4fc; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
#vsrSidebar .vsr-sb-head-btns { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
#vsrSidebar .vsr-sb-rename {
  background: none; border: none; color: #94a3b8; font-size: 14px; cursor: pointer;
  padding: 4px 7px; border-radius: 8px; line-height: 1; flex: 0 0 auto;
}
#vsrSidebar .vsr-sb-rename:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ── Host: invite wizard — "Invite Your Signing Guests" ─────────────────── */
#vsrInviteWizard .ezcard.vsr-wiz-card,
#vsrInvitePreview .ezcard.vsr-prev-card { position: relative; }
#vsrInviteWizard .vsr-wiz-card {
  max-width: 560px; width: 94vw; max-height: 88vh; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
#vsrInviteWizard .vsr-wiz-head { flex: 0 0 auto; padding: 22px 22px 4px; }
#vsrInviteWizard .vsr-wiz-head h3 { margin: 0 0 4px; padding-right: 30px; }
#vsrInviteWizard .vsr-wiz-head .essub { margin-bottom: 0; }
#vsrInviteWizard .vsr-wiz-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 22px 14px;
}
#vsrInviteWizard .vsr-wiz-foot {
  position: sticky; bottom: 0; z-index: 3; flex: 0 0 auto;
  display: flex; gap: 10px; align-items: center;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid #e2e8f0; background: #fff;
}
#vsrInviteWizard .vsr-wiz-email { flex: 1 1 auto; }
#vsrInviteWizard .vsr-wiz-sched {
  flex: 0 0 auto; border: 1.5px solid #cbd5e1; background: #fff; color: #334155;
  font-size: 13px; font-weight: 800; padding: 12px 16px; border-radius: 12px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: border-color .14s ease, background .14s ease;
}
#vsrInviteWizard .vsr-wiz-sched:hover { border-color: #0e7490; background: #ecfeff; color: #0e7490; }

/* guest cards */
#vsrInviteWizard .vsr-wiz-gcard {
  border: 1px solid #e2e8f0; border-radius: 13px; padding: 12px 12px 2px;
  background: #f8fafc; margin-bottom: 10px;
}
#vsrInviteWizard .vsr-wiz-gcard:last-child { margin-bottom: 0; }
#vsrInviteWizard .vsr-wiz-gcard.vsr-wiz-active { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.12); }
#vsrInviteWizard .vsr-wiz-ghead {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 8px;
}
#vsrInviteWizard .vsr-wiz-gnum {
  font-size: 11.5px; font-weight: 800; color: #475569;
  letter-spacing: .04em; text-transform: uppercase;
}
#vsrInviteWizard .vsr-wiz-gx {
  border: none; background: #eef2f6; color: #64748b; width: 24px; height: 24px;
  border-radius: 7px; font-size: 12px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease; flex: 0 0 auto;
}
#vsrInviteWizard .vsr-wiz-gx:hover { background: #fecaca; color: #b91c1c; }
#vsrInviteWizard .vsr-wiz-row { display: flex; gap: 8px; }
#vsrInviteWizard .vsr-wiz-row input {
  flex: 1 1 0; min-width: 0; margin-bottom: 8px; padding: 10px 12px; font-size: 14px;
}
#vsrInviteWizard .vsr-wiz-row input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
#vsrInviteWizard .vsr-wiz-add {
  width: 100%; margin-top: 12px; border: 1.5px dashed #94a3b8; background: #fff;
  color: #0e7490; font-size: 13.5px; font-weight: 800; padding: 11px;
  border-radius: 11px; cursor: pointer; font-family: inherit;
  transition: border-color .14s ease, background .14s ease;
}
#vsrInviteWizard .vsr-wiz-add:hover { border-color: #0e7490; background: #ecfeff; }
#vsrInviteWizard .vsr-wiz-add:disabled { opacity: .45; cursor: default; }

/* collapsed earlier guests (name · email preview row) */
#vsrInviteWizard .vsr-wiz-gcard.vsr-wiz-collapsed { padding: 8px 10px; }
#vsrInviteWizard .vsr-wiz-collapse {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
#vsrInviteWizard .vsr-wiz-collapse b {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#vsrInviteWizard .vsr-wiz-collapse .vsr-wiz-collapse-mail {
  flex: 0 1 auto; min-width: 0; font-size: 12px; color: #64748b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}
#vsrInviteWizard .vsr-wiz-edit {
  flex: 0 0 auto; border: none; background: #eef2ff; color: #4f46e5;
  font-size: 12px; font-weight: 800; padding: 6px 11px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: background .12s ease;
}
#vsrInviteWizard .vsr-wiz-edit:hover { background: #e0e7ff; }

/* ── Host: email invite preview (opens on top of the wizard) ────────────── */
#vsrInvitePreview.padmodal { z-index: 2000000002; }
#vsrInvitePreview .vsr-prev-card {
  max-width: 640px; width: 95vw; max-height: 90vh; padding: 22px 22px 0;
  display: flex; flex-direction: column;
}
#vsrInvitePreview .vsr-prev-card h3 { padding-right: 30px; }
#vsrInvitePreview .vsr-prev-to {
  font-size: 13px; color: #334155; font-weight: 700; line-height: 1.5;
  margin: 2px 0 12px; word-break: break-word;
}
#vsrInvitePreview .vsr-prev-lbl {
  display: block; font-size: 12px; font-weight: 800; color: #64748b; margin: 0 0 5px;
}
#vsrInvitePreview #vsrPrevSubject { margin-bottom: 12px; }
#vsrInvitePreview .vsr-prev-note { margin: 0 0 8px; font-size: 12px; color: #0e7490; font-weight: 700; }
#vsrInvitePreview .vsr-prev-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: 45vh;
  pointer-events: none; border: 1px solid #e2e8f0; border-radius: 12px;
  background: #f8fafc; padding: 14px 16px; font-size: 13px; line-height: 1.55; color: #334155;
}
#vsrInvitePreview .vsr-prev-body a { color: #0e7490; }
#vsrInvitePreview .vsr-prev-body .vsr-prev-audit {
  margin-top: 12px; padding: 9px 11px; border: 1px solid #a7f3d0; border-radius: 9px;
  background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 700;
}
#vsrInvitePreview .vsr-prev-foot {
  flex: 0 0 auto; padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
}
@media (max-width: 640px) {
  #vsrInviteWizard.padmodal, #vsrInvitePreview.padmodal { align-items: flex-end; padding: 0; }
  #vsrInviteWizard .vsr-wiz-card, #vsrInvitePreview .vsr-prev-card {
    width: 100%; max-width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0;
  }
  #vsrInviteWizard .vsr-wiz-head { padding: 18px 16px 4px; }
  #vsrInviteWizard .vsr-wiz-body { padding: 10px 16px 14px; }
  #vsrInviteWizard .vsr-wiz-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  #vsrInvitePreview .vsr-prev-card { padding: 18px 16px 0; }
  #vsrInviteWizard .vsr-wiz-row { flex-direction: column; gap: 0; }
}

/* ── Guest local document reader (guided signing) ───────────────────────── */
#vsrGuestReader {
  position: absolute; inset: 0; z-index: 4; background: #0b1220;
  display: flex; flex-direction: column;
}
#vsrGuestReader.hidden { display: none; }
#vsrGuestReader .vsr-gr-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: #0f1b2e; color: #e7edf3; font-weight: 800; flex: 0 0 auto;
}
#vsrGuestReader .vsr-gr-close { background: none; border: none; color: #94a3b8; font-size: 15px; cursor: pointer; padding: 4px 8px; }
#vsrGuestReader .vsr-gr-pages {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
#vsrGuestReader .vsr-gr-page { position: relative; background: #fff; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
#vsrGuestReader .vsr-gr-canvas { display: block; }
#vsrGuestReader .vsr-gr-spot {
  position: absolute; border: 2px dashed #10b981; border-radius: 4px;
  background: rgba(16,185,129,.14); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #059669; font-weight: 800;
}
#vsrGuestReader .vsr-gr-spot.current { border-color: #059669; background: rgba(16,185,129,.22); box-shadow: 0 0 0 4px rgba(16,185,129,.28); }
#vsrGuestReader .vsr-gr-spot.signed { border-style: solid; border-color: #059669; background: rgba(5,150,105,.16); color: #047857; }
#vsrGuestReader .vsr-gr-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #0f1b2e;
}
#vsrGuestReader .vsr-gr-prog { flex: 1; font-size: 12.5px; color: #cbd5e1; font-weight: 700; }
#vsrGuestReader .vsr-gr-sign { flex: 0 0 auto; }
#vsrGuestReader .vsr-gr-empty { color: #cbd5e1; font-size: 14px; padding: 30px; text-align: center; }

.vsr-name-lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vsr-prefill { background: none; border: none; padding: 0; font-size: 9px; font-weight: 700; color: #0e7490; cursor: pointer; text-decoration: underline; font-family: inherit; }
.vsr-prefill:hover { color: #155e75; }

.vsr-sent-guests { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.vsr-sent-guest { border: 1px solid #eef2f1; border-radius: 12px; padding: 10px 12px; }
.vsr-sg-name { font-weight: 800; font-size: 13.5px; color: #0f172a; }
.vsr-sg-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.vsr-sg-link {
  display: inline-flex; align-items: center; gap: 5px;
  background: #eef2ff; color: #3730a3; font-size: 12.5px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px; text-decoration: none;
}
.vsr-sg-link:hover { background: #e0e7ff; }

.vsr-live-sign { background: #0f766e; color: #fff; margin-left: 6px; }
.vsr-live-sign:hover { background: #115e59; }

/* Kick button — hover overlay, top-right of the guest tile */
.vsr-kick {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(127,29,29,.92); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.vsr-tile:hover .vsr-kick { display: inline-flex; }
.vsr-kick:hover { background: #991b1b; }

/* IDV / passcode UI */
.vsr-sb-idv {
  display: flex; align-items: center; gap: 6px; width: calc(100% - 24px);
  margin: 10px 12px 0; padding: 9px 12px; border-radius: 10px;
  border: 1px solid #334155; background: #1e293b; color: #e2e8f0;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.vsr-sb-idv:hover { background: #273449; }
.vsr-sb-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #dc2626; color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 800;
}
.vsr-idv-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vsr-idv-box {
  border: 1px dashed #cbd5e1; border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.vsr-idv-lbl { font-weight: 800; font-size: 12.5px; color: #0f172a; }
.vsr-idv-prev { max-width: 100%; max-height: 140px; border-radius: 8px; border: 1px solid #e2e8f0; }
.vsr-idv-msg { font-size: 13px; color: #0f766e; font-weight: 700; margin-top: 10px; min-height: 18px; }
.vsr-idv-card {
  border: 1px solid #eef2f1; border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.vsr-idv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vsr-idv-head b { font-size: 14px; color: #0f172a; }
.vsr-idv-status { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.vsr-idv-status.ok { background: #d1fae5; color: #047857; }
.vsr-idv-status.no { background: #fee2e2; color: #b91c1c; }
.vsr-idv-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vsr-idv-thumb { width: 100%; max-height: 130px; object-fit: contain; border-radius: 8px; background: #0f172a; }
.vsr-idv-mail { font-size: 12px; color: #64748b; margin-top: 6px; }
.vsr-idv-actions { display: flex; gap: 8px; margin-top: 10px; }
.vsr-idv-verify { flex: 1; background: #059669; color: #fff; }
.vsr-idv-verify:hover { background: #047857; }
.vsr-idv-reject { flex: 1; background: #e2e8f0; color: #0f172a; }
.vsr-idv-reject:hover { background: #cbd5e1; }
.vsr-live-idv {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
  border-radius: 999px; padding: 2px 8px; margin-left: 6px;
}
.vsr-live-idv.ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.vsr-live-idv.no { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* Identity policy toggle + host override button */
.vsr-idv-toggle { display: flex; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; margin-top: 4px; }
.vsr-idv-toggle button {
  flex: 1; padding: 8px 0; border: none; background: #fff; color: #475569;
  font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.vsr-idv-toggle button.on { background: #0f766e; color: #fff; }
.vsr-live-confirm {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe;
  border-radius: 999px; padding: 2px 8px; margin-left: 6px; cursor: pointer;
}
.vsr-live-confirm:hover { background: #e0e7ff; }

/* Wizard stepper */
.vsr-stepper { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; }
.vsr-step-i { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #94a3b8; }
.vsr-step-i i {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; font-weight: 800; background: #e2e8f0; color: #64748b;
}
.vsr-step-i.done { color: #047857; }
.vsr-step-i.done i { background: #d1fae5; color: #047857; }
.vsr-step-i.active { color: #0f766e; }
.vsr-step-i.active i { background: #0f766e; color: #fff; box-shadow: 0 0 0 4px rgba(15,118,110,.15); }
.vsr-step-l { flex: 1; height: 2px; background: #e2e8f0; border-radius: 2px; }

/* Unified join checklist */
.vsr-join-card { max-width: 480px; padding: 0; overflow: hidden; }
.vsr-join-hero {
  background: linear-gradient(135deg, #0f766e 0%, #10b981 60%, #34d399 100%);
  color: #fff; padding: 22px 24px 18px; text-align: center;
}
.vsr-join-hero h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 21px; margin: 8px 0 4px; color: #fff; }
.vsr-join-icon { width: 54px; height: 54px; margin: 0 auto; border-radius: 16px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; font-size: 26px; }
.vsr-join-sub { font-size: 13px; color: rgba(255,255,255,.85); margin: 0; }
.vsr-join-steps { padding: 16px 20px 4px; display: flex; flex-direction: column; gap: 10px; }
.vsr-step { display: flex; gap: 12px; align-items: flex-start; }
.vsr-step-num {
  width: 26px; height: 26px; border-radius: 50%; flex: none; margin-top: 1px;
  background: #0f766e; color: #fff; font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.vsr-step.done .vsr-step-num { background: #10b981; }
.vsr-step-body { flex: 1; }
.vsr-step-title { font-size: 13.5px; font-weight: 800; color: #0f172a; }
.vsr-step-desc { font-size: 12px; color: #64748b; line-height: 1.45; margin: 1px 0 8px; }
.vsr-step-ctl input[type="text"] { width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 14px; box-sizing: border-box; }
.vsr-step-ctl input[type="text"]:focus { border-color: #0f766e; outline: none; box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
.vsr-join-chk { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; font-weight: 700; color: #0f172a; cursor: pointer; line-height: 1.5; }
.vsr-join-chk input { margin-top: 3px; width: 16px; height: 16px; accent-color: #0f766e; }
.vsr-join-id { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vsr-join-idprev { max-width: 100%; max-height: 90px; border-radius: 8px; border: 1px solid #e2e8f0; }
.vsr-step-ok { color: #059669; font-size: 15px; font-weight: 800; }
.vsr-join-btn {
  background: linear-gradient(135deg, #0f766e, #10b981);
  box-shadow: 0 10px 24px -10px rgba(15,118,110,.55);
}
/* .vsr-join-card has padding:0, so its join button needs its own gutter margins */
.vsr-join-card .vsr-join-btn { margin: 14px 20px 0; width: calc(100% - 40px); }
/* .vsr-walkin-card keeps the base .ezcard padding as its gutter — no extra margin needed */
.vsr-walkin-card .vsr-join-btn { width: 100%; margin: 14px 0 0; }
.vsr-join-btn:disabled { opacity: .6; }
.vsr-join-cancel { margin: 10px auto 14px; display: block; background: none; border: none; color: #94a3b8; font-size: 13px; font-weight: 700; cursor: pointer; }
.vsr-join-cancel:hover { color: #64748b; }
.vsr-join-err { font-size: 12.5px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 8px 12px; margin: 12px 20px 0; }

/* Live progress pill */
.vsr-live-progress { display: flex; gap: 8px; margin: 8px 12px 2px; flex-wrap: wrap; }
.vsr-live-prog-sig, .vsr-live-prog-idv {
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: #0f766e; color: #fff;
}
.vsr-live-prog-idv { background: #312e81; }

/* Post-session summary */
.vsr-sum-card { max-width: 440px; text-align: center; }
.vsr-sum-hero { font-size: 40px; margin-bottom: 6px; }
.vsr-sum-sub { font-size: 13.5px; color: #64748b; margin: 0 0 12px; }
.vsr-sum-meta { font-size: 12.5px; color: #334155; font-weight: 700; background: #f1f5f9; border-radius: 9px; padding: 8px 12px; margin: 0 0 12px; }
.vsr-sum-parts { text-align: left; display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; }
.vsr-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #eef2f1; border-radius: 10px; padding: 9px 12px; }
.vsr-sum-name { font-size: 13.5px; font-weight: 800; color: #0f172a; }
.vsr-sum-state { font-size: 12px; font-weight: 800; color: #059669; }

/* While the live Video Signing Room is open, hide the classic async
   e-signature actions — they belong to a different flow/purpose. */
body.vsr-open #btnEsign,
body.vsr-open #pbSend,
body.vsr-open #btnSaveMine,
body.vsr-open #btnDelDoc { display: none !important; }

/* Anonymous / walk-in share */
.vsr-wiz-share {
  display: inline-block; margin-top: 2px; padding: 0; border: none; background: none;
  color: #2563eb; text-decoration: underline; font-size: 12px; font-weight: 600; cursor: pointer;
}
.vsr-wiz-share:hover { color: #1d4ed8; }
.vsr-walkin-card { max-width: 520px; }
.vsr-walkin-fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 14px; }
.vsr-walkin-fields .wiz-field { grid-column: span 6; margin: 0 0 12px; min-width: 0; }
.vsr-walkin-fields .wiz-field.wiz-full { grid-column: span 12; }
.vsr-walkin-fields label { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin: 0 0 5px; }
.vsr-walkin-fields input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 14px; }
.vsr-walkin-fields input:focus { border-color: #0f766e; outline: none; box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
@media (max-width: 560px) { .vsr-walkin-fields .wiz-field, .vsr-walkin-fields .wiz-field.wiz-full { grid-column: span 12; } }

/* Return to Video Session — bottom-bar button, shown while the room is live */
body.vsr-open #btnVsrReturn { display: inline-flex; }
#btnVsrReturn.fbtn-vsr-return {
  background: #fff; color: #b91c1c; border: 1px solid #fecaca;
}
#btnVsrReturn.fbtn-vsr-return:hover { background: #fef2f2; border-color: #fca5a5; }

/* ID-verification badge on video tiles (host: every guest; guest: own feed) */
.vsr-idv-badge {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px; line-height: 1.4;
  background: rgba(15,23,42,.78); color: #fbbf24;
  border: 1px solid rgba(255,255,255,.28);
  pointer-events: none; white-space: nowrap;
}
.vsr-idv-badge.ok { background: #fff; color: #047857; border: 1px solid #10b981; }
/* kick button sits below the badge on host guest tiles */
.vsr-kick { top: 44px; }

/* End Session footer button (host) */
.vsr-end-btn { background: #b91c1c; color: #fff; font-weight: 800; }
.vsr-end-btn:hover { background: #991b1b; }

/* IDV review panel — card, shots, badges, reason UI */
.vsr-idv-empty { color: #94a3b8; font-size: 13px; text-align: center; padding: 18px; line-height: 1.55; }
.vsr-idv-shot { position: relative; display: flex; flex-direction: column; gap: 5px; }
.vsr-idv-thumb { width: 100%; max-height: 130px; object-fit: contain; border-radius: 8px; background: #0f172a; }
.vsr-idv-thumb.missing {
  background: #1e293b; color: #94a3b8; min-height: 72px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.vsr-idv-shot-label { font-size: 10px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.vsr-idv-note {
  font-size: 12px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; padding: 7px 10px; margin-top: 8px; line-height: 1.45;
}
.vsr-idv-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  background: #475569; color: #fff; border-radius: 999px;
  padding: 4px 12px; max-width: 100%;
}
.vsr-idv-badge-name { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsr-idv-badge-occ { font-size: 11px; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsr-idv-status.warn { background: #fef3c7; color: #92400e; }
.vsr-idv-verify { flex: 1; background: #059669; color: #fff; }
.vsr-idv-verify:hover { background: #047857; }
.vsr-idv-reject { flex: 1; background: #fef3c7; color: #92400e; }
.vsr-idv-reject:hover { background: #fde68a; }
.vsr-idv-reqreason {
  font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 9px; padding: 8px 11px; margin: 0 0 10px; line-height: 1.5;
}

/* Secondary overlays must stack ABOVE the wizard/panel they open from */
#vsrShareModal, #vsrIdvReasonModal, #vsrEndConfirmModal, #vsrSummaryModal, #vsrJoinModal { z-index: 2000000001; }

/* Leave-session guard modal stays on top of any native prompt state */
#vsrLeaveSessionModal { z-index: 2000000001; }

/* Save these details to my profile sits in the session-info modal, whose text
   inputs are styled full-width with a border — which the checkbox was inheriting,
   so it rendered as a wide empty box that pushed the label into a narrow column
   and wrapped it onto two lines. Pin the box to its real size and let the label
   own the rest of the row. */
#vsrNameModal .vsr-saveprof { display: flex; align-items: center; gap: 8px; margin: 12px 0 0;
  font-size: 13.5px; font-weight: 600; color: var(--mut, #5d6b71); cursor: pointer; user-select: none; }
#vsrNameModal .vsr-saveprof input[type="checkbox"] {
  flex: 0 0 16px; width: 16px !important; height: 16px !important; min-width: 0; max-width: 16px;
  margin: 0; padding: 0; border-radius: 4px; accent-color: #10b981; cursor: pointer; }
#vsrNameModal .vsr-saveprof span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }

/* The two document actions are peers, so they sit side by side in equal columns
   rather than stacked. align-self is reset because the shared button rule above
   pins them to flex-start, which would leave them at ragged natural widths
   inside their grid cells. */
#vsrNameModal .vsr-name-doc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
#vsrNameModal .vsr-name-doc-btns button { align-self: stretch; width: 100%; text-align: center; }
@media (max-width: 560px) { #vsrNameModal .vsr-name-doc-btns { grid-template-columns: 1fr; } }

/* ── VSR button state colours ───────────────────────────────────────────────
   One meaning per colour, because the footer had three different things
   sharing one green and two states landing on the wrong colour entirely:

     emerald   #10b981  an action you can take now      (Sign, Let's Sign)
     dark green#047857  done / open, a GOOD active state (Signed, Signing open)
     red       #dc2626  stop / in progress               (Recording, Stop sharing)
     dark red  #b91c1c  destructive, affects everyone    (End Session)
     slate     #334155  secondary                        (Leave, Open Document…)

   Two measured bugs this fixes:

   1. The SIGNED button rendered red. `#vsrSidebar .vsr-btn.on{background:#dc2626}`
      and `#vsrSidebar .vsr-sign-btn.on{background:#047857}` have identical
      specificity (1,2,0), so the generic one — declared later — won. A guest who
      finished signing saw "Signed ✓" in the same alarm red as the record button.
      Measured: rgb(220,38,38) where rgb(4,120,87) was intended.

   2. End Session rendered EMERALD. Its red lives in app.css as `.vsr-end-btn`
      (0,1,0), which loses to `#vsrSidebar .vsr-btn` (1,1,0) here — so the one
      irreversible control in the room looked exactly like Schedule Signing.
      Measured: rgb(16,185,129).

   Fixed by specificity rather than by reordering or removing the generic rule,
   which is still doing its job for Record and Stop sharing. */
#vsrSidebar .vsr-btn.vsr-sign-btn.on { background: #047857; }
#vsrSidebar .vsr-btn.vsr-live-lets-sign.on { background: #047857; }
#vsrSidebar .vsr-btn.vsr-end-btn { background: #b91c1c; color: #fff; }
#vsrSidebar .vsr-btn.vsr-end-btn:hover { background: #991b1b; filter: none; }

/* Initials pad, under the signature pad in the room. Deliberately shorter and
   narrower than the signature area: initials are a few strokes, and a box the
   same size as the signature invites a full signature in the wrong field. */
#vsrPadModal .vsr-pad-lbl {
  display: block; margin: 0 0 5px; font-size: 12px; font-weight: 800;
  color: #475569; letter-spacing: .01em;
}
#vsrPadModal .vsr-pad-hint { font-weight: 600; color: #94a3b8; }
#vsrPadModal .vsr-init-wrap { margin-top: 12px; }
#vsrPadModal .vsr-init-wrap.hidden { display: none; }
#vsrPadModal #vsrInitCanvas {
  width: 55%; min-width: 180px; height: 110px; border: 2px dashed #94a3b8;
  border-radius: 12px; touch-action: none; background: #fff; box-sizing: border-box;
}