/* ============================================================================
   Record — the standalone screen recorder (view #/record).

   Scoped under #recordView so nothing here can leak into another view, matching
   the modular CSS convention the other studios follow. Tokens come from
   design.css; each has a literal fallback so the page is still styled if it is
   ever loaded without that sheet.

   The layout is deliberately ONE centred card: the page has a single job (press
   record, then save), and every control the user needs is within a thumb's
   reach below the preview.
   ========================================================================= */
#recordView { max-width: 980px; margin: 0 auto; }

#recordView .rec-wrap { display: flex; flex-direction: column; gap: 14px; }

#recordView .rec-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
#recordView .rec-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--text, #0f172a); }
#recordView .rec-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: #64748b; }
#recordView .rec-head .grow { flex: 1 1 auto; min-width: 180px; }

/* The plan chip: which ladder this account is on, and what is left this month. */
#recordView .rec-chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0); background: var(--surface-2, #f1f5f9);
  color: #475569;
}
#recordView .rec-chip.free { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
#recordView .rec-chip.paid { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
#recordView .rec-chip b { font-weight: 800; }

/* ---- the preview --------------------------------------------------------- */
#recordView .rec-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px;
  background: #0b1020; overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
}
#recordView .rec-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0b1020; }
#recordView .rec-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; color: #94a3b8; text-align: center;
  font-size: 13px; padding: 20px;
}
#recordView .rec-empty .big { font-size: 34px; line-height: 1; }
#recordView.rec-live .rec-empty { display: none; }

/* The recording badge over the preview: it IS the "the camera is on" light. */
#recordView .rec-badge {
  position: absolute; top: 12px; left: 12px; display: none; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px; background: rgba(11, 16, 32, .72);
  color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(4px);
}
#recordView.rec-live .rec-badge { display: inline-flex; }
#recordView .rec-badge .dot {
  width: 9px; height: 9px; border-radius: 50%; background: #ef4444;
  animation: recPulse 1.1s ease-in-out infinite;
}
#recordView.rec-paused .rec-badge .dot { animation: none; opacity: .5; }
@keyframes recPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
#recordView .rec-badge .t { font-variant-numeric: tabular-nums; }

/* Between Start and the first number the stage is blank (and, in fullscreen, the
   whole SCREEN is) — this says what is being waited for instead of showing a
   black rectangle while a camera another program holds takes its time. */
#recordView .rec-prep {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 5; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: #fff; background: rgba(11, 16, 32, .78); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px); white-space: nowrap;
}
#recordView .rec-prep[hidden] { display: none; }
#recordView .rec-prep .dot {
  width: 9px; height: 9px; border-radius: 50%; background: #fff;
  animation: rec-blink 1s ease-in-out infinite;
}

/* ---- the 3-2-1 before the first frame ------------------------------------ */
/* The stage is GREYED OUT, not blacked out: the user still sees what is about to
   be recorded while being told the take has not begun. The one number is the
   biggest thing on the page for a second at a time, and the shortcut keys are
   here because this is the only moment something is counting on the screen. */
#recordView .rec-count {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px; text-align: center; color: #fff;
  background: rgba(28, 32, 40, .78);
  backdrop-filter: grayscale(1) blur(1px);
}
#recordView .rec-count[hidden] { display: none; }
/* The FALLBACK when the fullscreen request was refused (or the browser has no
   element fullscreen, like iOS Safari): the whole page greys out, not just the
   preview box, so the numbers are as big as this page can make them. */
#recordView .rec-count.loose {
  position: fixed; inset: 0; z-index: 2147483000;
  background: rgba(28, 32, 40, .94);
}
/* The stage's "press Start…" placeholder is answered by the numbers, and it
   would otherwise show through the wash. */
#recordView.rec-counting .rec-empty { display: none; }
#recordView .rec-count .num {
  font-size: clamp(80px, 20vmin, 210px); line-height: 1; font-weight: 800;
  color: #fff; font-variant-numeric: tabular-nums;
  /* A countdown is a NUMBER, not a word: it is never mirrored in an RTL page. */
  direction: ltr; unicode-bidi: isolate;
  text-shadow: 0 6px 26px rgba(0, 0, 0, .5);
}
/* The flash is a class the script re-adds for EVERY number, so each count is its
   own beat rather than one long fade (a running animation does not restart). */
#recordView .rec-count .num.pop { animation: recCountPop .95s ease-out; }
@keyframes recCountPop {
  0% { opacity: 1; transform: scale(1.18); }
  45% { opacity: .35; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#recordView .rec-count .keys-title {
  margin: 4px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
#recordView .rec-count .keys { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#recordView .rec-count .k {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 10px; font-size: 12px; color: #fff;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .20);
}
#recordView .rec-count .k b {
  font: inherit; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24);
}
#recordView .rec-count .k i { font-style: normal; margin-left: 3px; color: rgba(255, 255, 255, .82); }

/* FULL SCREEN while it counts: the user is about to look at the window they are
   recording — another application — and a number drawn inside this tab would
   never be seen. Fullscreen is the only way a page can cover the screen. The
   stage keeps no rounding, no border and no 16:9 box at this size. */
#recordView .rec-stage:fullscreen {
  aspect-ratio: auto; width: 100%; height: 100%;
  border: 0; border-radius: 0; box-shadow: none; background: #0b1020;
}
/* Opaque here, unlike the in-page wash: what is behind it is not the point. */
#recordView .rec-stage:fullscreen .rec-count { background: #1c2028; backdrop-filter: none; }
#recordView .rec-stage:fullscreen .num { font-size: clamp(140px, 34vmin, 440px); }
#recordView .rec-stage:fullscreen .keys-title { font-size: 14px; }
#recordView .rec-stage:fullscreen .k { font-size: 14px; padding: 9px 14px; }
#recordView .rec-stage:fullscreen .k b { font-size: 12px; }
/* A user who asked for less motion still gets the number, just not the pulse. */
@media (prefers-reduced-motion: reduce) {
  #recordView .rec-count .num.pop { animation: none; }
}

/* ---- the controls -------------------------------------------------------- */
#recordView .rec-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#recordView .rec-actions .grow { flex: 1 1 auto; }
#recordView .rec-go {
  display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 15px;
  font-weight: 700; padding: 12px 24px; border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-500, #6366f1), var(--accent-500, #06b6d4));
  color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
}
#recordView .rec-go:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
#recordView .rec-go .dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; }

/* WHILE A TAKE RUNS THE SAME BUTTON IS STOP, AND IT IS RED. The dot becomes a
   square, the way every recorder on earth draws "stop", so the change is legible
   without reading the label. */
#recordView .rec-go.rec-stop {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 8px 20px rgba(220, 38, 38, .3);
}
#recordView .rec-go.rec-stop:hover { background: linear-gradient(135deg, #dc2626, #991b1b); }
#recordView .rec-go.rec-stop .dot {
  border-radius: 3px;
  animation: none;
}

/* The meter is the biggest number on the page, like the presenter's clock: it
   is the one figure a speaker reads while talking. */
#recordView .rec-clock {
  font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 800;
  color: var(--text, #0f172a); min-width: 4.6ch; direction: ltr; unicode-bidi: isolate;
}

#recordView .rec-note { font-size: 13px; line-height: 1.6; color: #475569; margin: 0; }
#recordView .rec-note.bad { color: var(--danger, #e11d48); font-weight: 600; }
#recordView .rec-note.ok { color: #047857; font-weight: 600; }
#recordView .rec-hint { font-size: 12px; color: #64748b; margin: 0; line-height: 1.6; }

/* ---- the saved take ------------------------------------------------------ */
#recordView .rec-take {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0); background: var(--surface-2, #f1f5f9);
}
#recordView .rec-take[hidden] { display: none; }
#recordView .rec-take .name { font-weight: 700; color: var(--text, #0f172a); word-break: break-all; }
#recordView .rec-take .meta { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
#recordView .rec-take .grow { flex: 1 1 auto; min-width: 120px; }

/* ---- saving: ONE ROW PER UPLOAD, each with its own bar and its red ✕ ------
   Uploads run in the background (a screen recording is tens of megabytes), so
   several can be in flight at once: every row is a job, and the ✕ at the end of
   the row throws that one away. */
#recordView .rec-ups { display: flex; flex-direction: column; gap: 8px; }
#recordView .rec-ups[hidden] { display: none; }
#recordView .rec-up {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0); background: #f8fafc;
}
#recordView .rec-up .nm {
  flex: 1 1 auto; min-width: 90px; font-size: 12.5px; color: #475569;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#recordView .rec-up .bar {
  flex: 0 0 38%; max-width: 320px; height: 6px; border-radius: 999px;
  background: var(--border, #e2e8f0); overflow: hidden;
}
#recordView .rec-up .bar i {
  display: block; height: 100%; width: 0; transition: width .25s;
  background: var(--brand-600, #4f46e5);
}
#recordView .rec-up .pc {
  font-size: 11.5px; color: #64748b; font-variant-numeric: tabular-nums;
  min-width: 3.4ch; text-align: right;
}
/* RED, at the END of the row: cancelling throws the file away, so it has to look
   like the destructive act it is (the house rule for delete buttons). */
#recordView .rec-up-x {
  flex: none; font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
}
#recordView .rec-up-x:hover { background: #fee2e2; border-color: #fca5a5; }
@media (max-width: 640px) {
  #recordView .rec-up { flex-wrap: wrap; }
  #recordView .rec-up .bar { flex: 1 1 100%; max-width: none; order: 3; }
}

/* Where the take went, spelled out: the Media Library is the whole point of the
   feature (that is where Video Studio picks it up from). */
#recordView .rec-dest { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #475569; flex-wrap: wrap; }
#recordView .rec-dest button.link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--brand-600, #4f46e5); font-weight: 700; cursor: pointer; text-decoration: underline;
}

/* The Free-plan mark is announced in the hint text rather than with a badge:
   the user has not recorded anything yet at that point, and a warning chip next
   to a button nobody has pressed reads as an error. */
#recordView .rec-prefs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #475569; }
#recordView .rec-prefs label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---- the speaker, composited into the file ------------------------------- */
/* The canvas IS the recording: it draws the shared screen and the speaker's card
   into ONE picture, and the MediaRecorder captures that canvas. It stays out of
   the way until a take is running - the plain <video> is what the user sees when
   the view opens.

   Hidden with `visibility`, never `display: none`: a display:none element stops
   painting, and the frame loop would then copy blank frames into the file. */
#recordView .rec-comp {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: #0b1020; visibility: hidden;
}
#recordView.rec-live .rec-comp { visibility: visible; }
/* While recording, the raw screen preview sits BEHIND the canvas rather than
   beside it: the canvas already carries that same picture plus the speaker, so
   showing both would be one picture too many. */
#recordView.rec-live #recVideo { visibility: hidden; }
#recordView .rec-empty { pointer-events: none; }

#recordView .rec-dev { display: inline-flex; align-items: center; gap: 6px; }
#recordView .rec-dev select {
  max-width: 190px; font: inherit; font-size: 12.5px; padding: 4px 6px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #fff;
  color: var(--text, #0f172a);
}
/* The little live view of the speaker: the same picture, and the same aspect, as
   the card that will be drawn into the corner of the recording. */
#recordView .rec-cam-mini {
  width: 40px; height: 30px; border-radius: 6px; object-fit: cover;
  background: #0b1020; border: 1px solid var(--border, #e2e8f0);
}
#recordView .rec-cam-mini[hidden] { display: none; }

/* ---- what the BROWSER has allowed (camera and microphone) ------------------ */
/* The line the app's Permissions-Policy makes necessary: until a page is NAMED
   for camera/microphone, `getUserMedia` is refused with no dialog at all - so the
   empty device list needs an explanation and a button, not a shrug. */
#recordView .rec-perm {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; color: #475569;
}
#recordView .rec-perm-dot { font-weight: 700; white-space: nowrap; }
#recordView .rec-perm-dot.on { color: #047857; }
#recordView .rec-perm-dot.off { color: #94a3b8; }
#recordView .rec-perm-bad { color: var(--danger, #e11d48); font-weight: 600; line-height: 1.6; flex: 1 1 240px; }
#recordView .rec-perm-hint { color: #64748b; line-height: 1.6; flex: 1 1 240px; }
#recordView .rec-allow {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--brand-600, #4f46e5);
  background: #eef2ff; color: var(--brand-700, #4338ca);
}
#recordView .rec-allow:hover { background: #e0e7ff; }

/* ---- the setup wizard (the four questions before a take) ------------------ */
/* A real dialog over the whole page: the answers decide what Start does, and a
   modal is the one shape that cannot be missed by scrolling past it. */
#recordView .rec-wiz {
  position: fixed; inset: 0; z-index: 2147482000;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px);
}
#recordView .rec-wiz[hidden] { display: none; }
#recordView .rec-wiz-box {
  width: 100%; max-width: 520px; max-height: calc(100vh - 36px); overflow: auto;
  background: #fff; color: var(--text, #0f172a);
  border-radius: 16px; padding: 14px 18px 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}
#recordView .rec-wiz-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #64748b;
}
#recordView .rec-wiz-x {
  margin-left: auto; font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  border: 0; background: none; color: #64748b; padding: 6px;
}
#recordView .rec-wiz-body h4 { margin: 12px 0 6px; font-size: 18px; font-weight: 800; }
#recordView .rec-wiz-body p { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: #475569; }
#recordView .rec-wiz-bad { color: var(--danger, #e11d48); font-weight: 600; }
#recordView .rec-wiz-opts { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
#recordView .rec-wiz-opt {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  font: inherit; padding: 12px 14px; border-radius: 12px; color: inherit;
  border: 1px solid var(--border, #e2e8f0); background: #f8fafc;
}
#recordView .rec-wiz-opt.on { border-color: var(--brand-600, #4f46e5); background: #eef2ff; }
#recordView .rec-wiz-opt b { font-size: 14px; font-weight: 800; }
#recordView .rec-wiz-opt span { font-size: 12px; line-height: 1.6; color: #64748b; }

/* The mock of the FRAME: a 16:9 stage with the speaker card where it will be.
   Percentage sizes keep the disc square and the rectangle at the camera's own
   aspect, which is exactly what the canvas draws into the take. */
#recordView .rec-wiz-prev {
  position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 4px 0 12px;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--border, #e2e8f0);
  background: linear-gradient(135deg, #dbe6ff, #c9f0e4);
}
#recordView .rec-wiz-face {
  position: absolute; background: #0b1020; border: 2px solid #fff;
  border-radius: 10%; box-shadow: 0 3px 12px rgba(15, 23, 42, .3);
}
#recordView .rec-wiz-face.round { border-radius: 50%; }
#recordView .rec-wiz-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
#recordView .rec-wiz-label {
  font-size: 11.5px; font-weight: 800; color: #64748b; min-width: 68px;
  text-transform: uppercase; letter-spacing: .04em;
}
#recordView .rec-wiz-pill {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px 11px;
  border-radius: 999px; border: 1px solid var(--border, #e2e8f0);
  background: #fff; color: #475569;
}
/* What a browser can and cannot do, said where the choice is made — a disabled
   switch would explain less than a sentence. */
#recordView .rec-wiz-note {
  margin: 8px 0 0; font-size: 12px; line-height: 1.65; color: #64748b;
  padding: 9px 11px; border-radius: 10px; background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
}
#recordView .rec-wiz-pill.on {
  border-color: var(--brand-600, #4f46e5); background: #eef2ff;
  color: var(--brand-700, #4338ca); font-weight: 700;
}
#recordView .rec-wiz-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }#recordView .rec-wiz-foot .grow { flex: 1 1 auto; }
#recordView .rec-wiz-foot button[hidden] { display: none; }

/* An unfinished setup is not a quiet default: the button wears the brand colour
   until the wizard has been answered. */
#recordView .rec-setup-todo {
  border-color: var(--brand-600, #4f46e5) !important;
  background: #eef2ff !important; color: var(--brand-700, #4338ca) !important;
  font-weight: 700;
}

@media (max-width: 640px) {
  #recordView .rec-wiz-box { padding: 12px 14px 14px; }
  #recordView .rec-wiz-body h4 { font-size: 16px; }
  #recordView .rec-wiz-label { min-width: 100%; }
}

/* ---- the blink shared by "starting…" and the saving rows ------------------ */
@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- the recordings list (kept for N days, per the plan) ------------------ */
#recordView .rec-list { display: flex; flex-direction: column; gap: 8px; }
#recordView .rec-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 11px; border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; background: #f8fafc;
}
#recordView .rec-row-main { flex: 1 1 auto; min-width: 150px; }
#recordView .rec-row-name { font-weight: 700; font-size: 13px; color: var(--text, #0f172a); word-break: break-all; }
#recordView .rec-row-meta { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
#recordView .rec-row-btn {
  display: inline-flex; align-items: center; font-size: 12.5px; padding: 5px 10px;
  text-decoration: none;
}
/* Playing a take is the row's PRIMARY action - you look at it before you download
   or rename it - so it carries the brand colour instead of the same grey as the
   three utility buttons beside it. */
#recordView .rec-row-play {
  font-weight: 700; cursor: pointer; border-radius: 8px;
  border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3;
}
#recordView .rec-row-play:hover { background: #e0e7ff; border-color: #a5b4fc; }
#recordView .rec-list-empty { font-size: 13px; color: #64748b; }

/* Deleting a row: NAMED ("Delete") and red, like every other destructive button in
   the app - an icon-only dustbin next to a Download is a coin toss. */
#recordView .rec-row-del {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
  display: inline-flex; align-items: center;
}
#recordView .rec-row-del:hover { background: #fee2e2; border-color: #fca5a5; }

@media (max-width: 640px) {
  #recordView .rec-clock { font-size: 24px; }
  #recordView .rec-go { width: 100%; justify-content: center; }
  #recordView .rec-dev select { max-width: 130px; }
  #recordView .rec-row-btn { flex: 1 1 auto; justify-content: center; }
}

/* ===========================================================================
   THE FLOATING RECORDING DOCK — deliberately NOT scoped under #recordView.
   Two hosts use these rules: a body-level node (so the Pause/Stop bar floats
   over the whole app and is still there after a view switch) and a separate
   POP-UP WINDOW, which links this same file. Scoping them to the view would
   leave the pop-up window unstyled and the body-level dock broken.

   Nothing here can keep the bar out of the FILE by itself — that is decided by
   which surface the user shares (a window or tab excludes every other window; the
   entire screen includes anything on it). What this does is make the bar small,
   dark and self-contained so it is unobtrusive whether or not it is captured.
   ========================================================================= */
.rec-dock-host {
  /* BOTTOM-RIGHT: the corner that is out of the way of whatever is being recorded
     (a slide deck, a document, a video) and out of the middle of the screen, which
     is where the app's own content wants to be. */
  position: fixed; right: 18px; left: auto; bottom: 18px;
  z-index: 2147483000;          /* above the app's own chrome and modals */
  pointer-events: none;         /* only the bar itself takes clicks */
}
.rec-dock-host[hidden] { display: none; }
.rec-dock-host > .rec-dock { pointer-events: auto; }

.rec-dock {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 999px;
  background: rgba(11, 16, 32, .93); color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 14px 38px rgba(2, 6, 23, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 600 13px/1.2 Vazirmatn, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}
.rec-dock-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #ef4444; flex: none;
  animation: recDockPulse 1.1s ease-in-out infinite;
}
.rec-dock.paused .rec-dock-dot { animation: none; opacity: .5; }
@keyframes recDockPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}
.rec-dock-clock {
  font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800;
  min-width: 4.6ch; text-align: center; direction: ltr; unicode-bidi: isolate;
}
.rec-dock button {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .10);
}
.rec-dock button:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.rec-dock button:disabled { opacity: .45; cursor: not-allowed; }
.rec-dock .rec-dock-stop { background: #e11d48; border-color: #e11d48; }
.rec-dock .rec-dock-stop:hover:not(:disabled) { background: #be123c; }
.rec-dock .rec-dock-x { padding: 7px 10px; font-size: 14px; line-height: 1; }

/* The pop-up host: a bare document whose only content is the bar, so the bar is
   centred in its own small window. */
body.rec-dock-body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: #0b1020;
}

@media (max-width: 560px) {
  .rec-dock-host { left: 10px; right: 10px; transform: none; bottom: 12px; }
  .rec-dock { justify-content: center; flex-wrap: wrap; }
}


/* ---- the desktop recorder: download buttons ----------------------------- */
.rec-desk { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.rec-desk-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px; text-decoration: none;
  border: 1px solid var(--line, #e5e7eb); background: var(--surface, #fff);
  color: inherit; min-width: 190px; transition: transform .12s, box-shadow .12s;
}
.rec-desk-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
}
.rec-desk-btn .ico { font-size: 22px; line-height: 1; }
.rec-desk-btn .t { display: grid; gap: 2px; text-align: start; }
.rec-desk-btn .t b { font-size: 14px; font-weight: 700; }
.rec-desk-btn .t i { font-style: normal; font-size: 12px; opacity: .62; }
.rec-desk-btn .dl { margin-inline-start: auto; font-size: 15px; opacity: .7; }
.rec-desk-how { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; opacity: .72; }

/* ---- sharing one recording: the link dialog ----------------------------- */
/* The same shell as the setup wizard (it is the view's one modal shape), with a
   body of its own: a read-only link + Copy, a password switch, an expiry list
   and the three things the owner can do with them. */
#recordView .rec-share {
  position: fixed; inset: 0; z-index: 2147482000;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px);
}
#recordView .rec-share[hidden] { display: none; }
#recordView .rec-share-box {
  width: 100%; max-width: 520px; max-height: calc(100vh - 36px); overflow: auto;
  background: #fff; color: var(--text, #0f172a);
  border-radius: 16px; padding: 14px 18px 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}
#recordView .rec-share-body { margin-top: 10px; }
#recordView .rec-share-sub {
  margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #0f172a;
  word-break: break-word;
}
#recordView .rec-share-lbl {
  display: block; margin: 12px 0 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #64748b;
}
#recordView .rec-share-url { display: flex; gap: 8px; align-items: stretch; }
#recordView .rec-share-url input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px;
  padding: 9px 11px; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #f8fafc; color: #0f172a;
  direction: ltr; text-align: left;
}
#recordView .rec-share-url .btn-secondary { flex: 0 0 auto; white-space: nowrap; }
#recordView .rec-share-meta {
  margin: 8px 0 0; font-size: 12.5px; color: #64748b;
}
#recordView .rec-share-note {
  margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: #475569;
}
#recordView .rec-share-note.err { color: #b91c1c; }
#recordView .rec-share-set { display: grid; gap: 8px; margin-top: 14px; }
#recordView .rec-share-chk {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: #0f172a; cursor: pointer;
}
#recordView .rec-share-set input[type="password"] {
  font: inherit; font-size: 13.5px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff; color: inherit;
}
#recordView .rec-share-set input[type="password"]:disabled { background: #f1f5f9; opacity: .7; }
#recordView .rec-share-body select {
  font: inherit; font-size: 13.5px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff; color: inherit; width: 100%;
}
#recordView .rec-share-acts {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef2f7;
}
#recordView .rec-share-acts .btn-secondary { margin-inline-start: 0; }
#recordView .rec-share-acts [data-sh="off"] { margin-inline-end: auto; color: #b91c1c; }

@media (max-width: 560px) {
  #recordView .rec-share-box { padding: 12px 14px 14px; }
  #recordView .rec-share-url { flex-wrap: wrap; }
  #recordView .rec-share-url input { flex: 1 1 100%; }
}

/* ---- the wizard's SECOND button: the per-device re-take / re-check ---------
   The step's primary press is the combined "Allow camera and microphone" (the
   same one the permission line offers, now reachable while this modal is open).
   Once a device is already on, that press has nothing left to ask for, so the
   step offers the re-take instead — quieter, and beside the primary one. */
#recordView .rec-wiz-alt {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; margin-inline-start: 8px;
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
}
#recordView .rec-wiz-alt:hover { background: #f8fafc; }

/* ---- the desktop pop-up: states -------------------------------------------
   Three answers, three colours: "probing" is plain, "already running" is the
   good one, and the run-this-file line is the instruction a downloaded copy
   needs. The download buttons reuse .rec-desk-btn from above. */
#recordView .rec-share-note.ok { color: #047857; font-weight: 600; }
#recordView .rec-share-note.run {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 12px; color: #334155;
}
#recordView .rec-share-meta a { color: var(--brand-700, #4338ca); }
#recordView .rec-share-body .rec-desk { margin-top: 12px; }

/* ---- the recordings list: tick boxes + the bulk bar ----------------------- */
/* The tick sits at the ROW'S START (left in English, right in Farsi — the same
   place a list's selection always lives), and is its own hit area so picking a
   take never opens it. */
#recordView .rec-row-pick {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; cursor: pointer; padding: 2px;
}
#recordView .rec-row-pick input {
  width: 17px; height: 17px; margin: 0; cursor: pointer;
  accent-color: var(--brand-600, #4f46e5);
}
/* The row that IS ticked says so, so a selection is visible in a long list. */
#recordView .rec-row:has(input[data-pick]:checked) {
  border-color: var(--brand-500, #6366f1);
  background: #eef2ff;
}

#recordView .rec-bulk {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 4px; padding: 8px 10px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  background: #fff;
}
#recordView .rec-bulk[hidden] { display: none; }
#recordView .rec-bulk-all {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #334155; cursor: pointer;
}
#recordView .rec-bulk-all input {
  width: 17px; height: 17px; margin: 0; cursor: pointer;
  accent-color: var(--brand-600, #4f46e5);
}
#recordView .rec-bulk-count {
  font-size: 12.5px; color: #64748b; font-variant-numeric: tabular-nums;
}
#recordView .rec-bulk .btn-secondary,
#recordView .rec-bulk-del {
  font-size: 12.5px; padding: 5px 11px; border-radius: 8px;
}
#recordView .rec-bulk-del {
  cursor: pointer; border: 1px solid #fecaca; background: #fef2f2;
  color: #b91c1c; font-weight: 700;
}
#recordView .rec-bulk-del:hover:not(:disabled) { background: #fee2e2; }
#recordView .rec-bulk .btn-secondary:disabled,
#recordView .rec-bulk-del:disabled { opacity: .45; cursor: not-allowed; }

/* ---- the desktop pop-up: THIS machine big, the others small --------------- */
#recordView .rec-desk-hero {
  border: 2px solid var(--brand-500, #6366f1);
  border-radius: 14px; padding: 14px; margin-top: 12px;
  background: linear-gradient(180deg, #eef2ff, #fff);
  box-shadow: 0 10px 26px rgba(79, 70, 229, .12);
}
#recordView .rec-desk-hero-top { display: flex; align-items: center; gap: 12px; }
#recordView .rec-desk-hero-top .ico { font-size: 30px; line-height: 1; }
#recordView .rec-desk-hero-top .t { display: grid; gap: 3px; text-align: start; }
#recordView .rec-desk-hero-top b { font-size: 16px; font-weight: 800; }
#recordView .rec-desk-hero-top i { font-style: normal; font-size: 12.5px; color: #475569; line-height: 1.6; }
#recordView .rec-desk-hero-acts {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
#recordView .rec-desk-dl,
#recordView .rec-desk-run,
#recordView .rec-desk-cmd {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 10px 16px; border-radius: 10px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
#recordView .rec-desk-dl {
  border: 0; color: #fff;
  background: linear-gradient(135deg, var(--brand-500, #6366f1), #06b6d4);
  box-shadow: 0 8px 20px rgba(79, 70, 229, .25);
}
#recordView .rec-desk-run {
  border: 1px solid var(--brand-600, #4f46e5); background: #fff;
  color: var(--brand-700, #4338ca);
}
#recordView .rec-desk-cmd {
  margin-top: 10px; border: 0; background: none; padding: 0;
  color: #475569; font-size: 12.5px; font-weight: 600; text-decoration: underline;
}
#recordView .rec-desk-lbl {
  margin: 16px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #64748b;
}
#recordView .rec-desk-more { display: grid; gap: 6px; }
#recordView .rec-desk-mini {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 9px;
  background: #fff; color: inherit; text-decoration: none; font-size: 12.5px;
}
#recordView .rec-desk-mini:hover { background: #f8fafc; }
#recordView .rec-desk-mini .ico { font-size: 15px; }
#recordView .rec-desk-mini .t { flex: 1 1 auto; text-align: start; }
#recordView .rec-desk-mini .sz { color: #64748b; font-variant-numeric: tabular-nums; }
#recordView .rec-desk-mini .dl { opacity: .7; }