/* stanley.mfautomations.ai — site/recorder.css (owner: portal-v3.7 task, 2026-09-17)
 * In-page walk-video recorder overlay (site/recorder.js, window.StanleyRecorder). Always a dark
 * camera-app-style UI regardless of the site's own light/dark theme (var(--ink)/var(--line) etc.
 * from styles.css are theme-dependent and NOT safe to reuse unscoped on a black background — a
 * light-theme var(--ink) is near-black text, which would be unreadable here). .btn/.btn-primary/
 * .btn-secondary/.btn-sm/.btn-block from styles.css are reused for Retake/Use this/Add from
 * library so those controls match the rest of the app, with .rec-overlay-scoped overrides below
 * to keep .btn-secondary readable on black in light mode too.
 */

.rec-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}

.rec-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: rgba(0,0,0,0.55);
}
.rec-info { min-width: 0; }
.rec-slot-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; }
.rec-slot-why { font-size: 12.5px; color: rgba(255,255,255,0.78); margin-top: 2px; }
.rec-slot-hint { font-size: 12px; color: #8FD9EC; font-style: italic; margin-top: 2px; }

.rec-close {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: none; color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.rec-close:hover { background: rgba(255,255,255,0.24); }

.rec-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
  overflow: hidden;
}
.rec-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000;
}

.rec-res-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 12px; padding: 4px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.55); color: #fff;
}
.rec-res-badge[hidden] { display: none; }

.rec-guide {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  background: rgba(0,0,0,0.85);
}
.rec-guide[hidden] { display: none; }
.rec-guide-icon { font-size: 56px; animation: rec-rotate-hint 1.6s ease-in-out infinite; }
@keyframes rec-rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
.rec-guide-text { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; }
.rec-guide-sub { font-size: 13px; color: rgba(255,255,255,0.75); max-width: 280px; }
@media (prefers-reduced-motion: reduce) {
  .rec-guide-icon { animation: none; }
}

.rec-error {
  padding: 18px 20px; text-align: center;
}
.rec-error[hidden] { display: none; }
.rec-error-text { color: #fff; font-size: 14px; margin: 0 0 14px; }

.rec-timer-row {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  padding: 10px 16px 0;
}
.rec-timer-row[hidden] { display: none; }
.rec-timer { font-size: 20px; color: #fff; }
.rec-timer.rec-timer-over { color: #FFB020; }
.rec-target { font-size: 12px; color: rgba(255,255,255,0.7); }

.rec-controls {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.rec-controls[hidden] { display: none; }
.rec-shutter {
  width: 76px; height: 76px; border-radius: 50%;
  border: 4px solid #fff; background: transparent; padding: 0; cursor: pointer;
  position: relative;
}
.rec-shutter::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: #E5484D; transition: border-radius 150ms ease, inset 150ms ease;
}
.rec-shutter[data-recording="true"]::after { border-radius: 6px; inset: 24px; }
.rec-shutter:disabled { opacity: 0.35; cursor: not-allowed; }
.rec-shutter-label { font-size: 12px; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.06em; }

.rec-review-actions {
  display: flex; gap: 12px;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,0.55);
}
.rec-review-actions[hidden] { display: none; }
.rec-review-actions .btn { flex: 1; }

/* Reused site buttons on a black background — .btn-secondary's default var(--ink)/var(--line)
   are tuned for a light surface and can be unreadable here in light-theme mode. */
.rec-overlay .btn-secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
}
.rec-overlay .btn-secondary:hover { background: rgba(255,255,255,0.16); }
.rec-overlay .btn-primary:disabled { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); }