/* Power Dialer — parked-leg autodialer panel
   Wrapped in a Samsung Galaxy S26-style phone frame: titanium body,
   thin bezels, center punch-hole camera, side power/volume buttons,
   bottom gesture bar. The inner #pd-screen holds the original UI. */

#pd-root {
  position: fixed;
  top: 80px;
  right: 24px;
  /* Sits above Impact's normal page content (lead detail, lead list,
     etc) but BELOW typical modal layers (Bootstrap = 1050, Material UI
     = 1300, etc) so Impact's notice/reminder popups can win when they
     appear. If a particular Impact UI element ever beats this z-index,
     drop further to 999. */
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  user-select: none;
  transition: opacity 0.15s ease;
}
#pd-root.pd-dragging { opacity: 0.94; }

/* ── Phone body (frame) ─────────────────────────────────────────── */
.pd-phone {
  position: relative;
  width: 400px;
  padding: 14px 11px 16px;
  background:
    linear-gradient(160deg, #2b2d33 0%, #1a1c20 45%, #25272d 100%);
  border-radius: 42px;
  box-shadow:
    /* outer drop */
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.4),
    /* metallic edge highlight */
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

/* Side buttons (right edge) — Galaxy keeps power + volume on the right
   on recent S-series. Decorative only. */
.pd-side {
  position: absolute;
  right: -2px;
  width: 3px;
  background: linear-gradient(90deg, #0d0e10, #2a2c31 60%, #0d0e10);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.pd-side-volup  { top: 92px;  height: 38px; }
.pd-side-voldn  { top: 138px; height: 38px; }
.pd-side-power  { top: 196px; height: 56px; }

/* ── Screen ─────────────────────────────────────────────────────── */
.pd-screen {
  position: relative;
  background: #0b1a2e;
  color: #e9eef7;
  border-radius: 30px;
  overflow-y: auto;
  /* Always render at the in-call size — feels consistent whether the
     agent is idle, ringing, or on a call. Caps at 92vh so it never
     overruns the host viewport on shorter screens; content scrolls
     internally above that limit. */
  min-height: 500px;
  max-height: 92vh;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 0 2px rgba(255, 255, 255, 0.04);
}

/* Status bar (top of screen) — also the drag handle. */
.pd-statusbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 28px;
  padding: 0 14px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #e9eef7;
  cursor: grab;
}
#pd-root.pd-dragging .pd-statusbar { cursor: grabbing; }

.pd-sb-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  z-index: 2;
}

/* Center punch-hole camera (Galaxy S-series style) */
.pd-sb-camera {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #2a2a2e 0%, #0a0a0c 60%, #000 100%);
  box-shadow:
    inset 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.85);
}

.pd-sb-icons {
  display: inline-flex; align-items: center; gap: 5px;
  z-index: 2;
}
.pd-sb-ico { fill: #e9eef7; }

.pd-sb-bat {
  position: relative;
  display: inline-block;
  width: 18px; height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  padding: 1px;
  margin-left: 1px;
}
.pd-sb-bat::after {
  content: "";
  position: absolute;
  right: -3px; top: 2px;
  width: 2px; height: 4px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 0 1px 1px 0;
}
.pd-sb-bat-fill {
  display: block;
  width: 76%; height: 100%;
  background: #e9eef7;
  border-radius: 1px;
}

/* Gesture bar (bottom of screen) */
.pd-gesture {
  margin: 6px auto 6px;
  width: 110px; height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
}

/* Collapsed state hides everything but status bar + gesture bar */
#pd-root.pd-collapsed .pd-header,
#pd-root.pd-collapsed .pd-body,
#pd-root.pd-collapsed .pd-footer { display: none; }

/* Default-state transcript caps — match what was previously the in-call /
   maximized look, so the panel stays the same size whether or not a call
   is in flight. */
.pd-transcript { max-height: 200px; }
.pd-incall-tr  { max-height: 160px; }

/* ── Maximized state ──────────────────────────────────────────────
   The default size now matches the in-call view. Maximize widens the
   panel further for agents on big displays who want extra breathing
   room around stats and the in-call controls. */
#pd-root.pd-maximized .pd-phone      { width: 480px; }
#pd-root.pd-maximized .pd-transcript { max-height: 260px; }
#pd-root.pd-maximized .pd-incall-tr  { max-height: 200px; }
/* Goal skin keeps the wider stance even when maximized — bump width
   further for a wall-of-net feel on big monitors. */
#pd-root.pd-skin-goal.pd-maximized .pd-phone { width: 820px; }
#pd-root.pd-skin-goal.pd-maximized .pd-screen { min-height: 480px; }

/* ── Header (inside screen) ─────────────────────────────────────── */
.pd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pd-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; letter-spacing: 0.2px; font-size: 13px;
}
.pd-title .pd-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e63946; box-shadow: 0 0 8px rgba(230, 57, 70, 0.7);
}
.pd-header-btns { display: flex; gap: 6px; }
.pd-iconbtn {
  background: transparent; border: 0; color: #9fb1c9; cursor: pointer;
  width: 22px; height: 22px; border-radius: 4px;
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pd-iconbtn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.pd-iconbtn.pd-close { font-size: 16px; }
.pd-iconbtn.pd-close:hover { background: rgba(230, 57, 70, 0.22); color: #ff6672; }
/* ↻ Refresh button spins during the manual refresh action so the agent
   gets a clear "we did the thing" visual confirmation. */
.pd-iconbtn.pd-spinning { animation: pd-spin 0.7s ease-out; }
@keyframes pd-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Body ───────────────────────────────────────────────────────── */
.pd-body { padding: 12px 14px; }

.pd-profile-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.pd-pill {
  background: rgba(255,255,255,0.08);
  padding: 3px 10px; border-radius: 10px;
  color: #cfe0fa;
  font-weight: 600; letter-spacing: 0.4px;
  font-size: 11px; text-transform: uppercase;
}
.pd-cell {
  font-size: 12px; color: #9fb1c9;
  font-variant-numeric: tabular-nums;
}

.pd-status-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
  font-size: 11px; color: #9fb1c9;
}
.pd-status-pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6b8095;
  flex: 0 0 auto;
}
.pd-status-pip.pd-pip-ok    { background: #2dab5f; box-shadow: 0 0 6px rgba(45,171,95,0.6); }
.pd-status-pip.pd-pip-warn  { background: #e6892b; box-shadow: 0 0 6px rgba(230,137,43,0.6); }
.pd-status-pip.pd-pip-err   { background: #e63946; box-shadow: 0 0 6px rgba(230,57,70,0.6); }
.pd-status-spacer { flex: 1; }

.pd-session-pill {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #cfe0fa;
  font-weight: 700;
}
.pd-sess-idle    { background: rgba(255,255,255,0.05); color: #9fb1c9; }
.pd-sess-starting,
.pd-sess-dialing-agent { background: rgba(230,137,43,0.2); color: #ffc89a; }
.pd-sess-parked  { background: rgba(45,171,95,0.2); color: #bdf4d2; }
.pd-sess-ending  { background: rgba(230,57,70,0.2); color: #ffb0b6; }

/* Stats strip */
.pd-stats {
  display: grid;
  /* v1.29.54 — Added a 4th column for the ↺ Reset button. The
     numeric tiles still take equal width; the reset is auto-sized. */
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 6px;
  margin-bottom: 10px;
  align-items: stretch;
}
.pd-stat-reset {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  color: #9fb1c9;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 10px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pd-stat-reset:hover {
  background: rgba(255, 200, 80, 0.12);
  border-color: rgba(255, 200, 80, 0.45);
  color: #ffd66b;
}
.pd-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
}
.pd-stat-num {
  font-size: 18px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pd-stat-lbl {
  font-size: 10px; color: #9fb1c9;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-top: 2px;
}

/* Buttons */
.pd-btn {
  background: #e63946; color: #fff; border: 0;
  padding: 10px 8px; border-radius: 10px;
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.12s ease, transform 0.05s ease, filter 0.12s ease;
}
.pd-btn:hover { filter: brightness(1.1); }
.pd-btn:active { transform: translateY(1px); }
.pd-btn.pd-btn-ghost { background: transparent; border: 1px solid #26406a; color: #cfe0fa; }
.pd-btn.pd-btn-ghost:hover { background: rgba(255, 255, 255, 0.04); }

/* ── Park-source mini-card ──────────────────────────────────────── */
.pd-park-card {
  padding: 8px 10px;
  margin: 8px 0;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid #1d2a40;
  border-radius: 8px;
  font-size: 12px;
}
.pd-park-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-park-label {
  color: #8a9ab0;
  font-weight: 600;
}
.pd-park-chip {
  flex: 1;
  padding: 3px 8px;
  background: rgba(45, 171, 95, 0.18);
  color: #6ce8a0;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.pd-park-chip.paused { background: rgba(230, 137, 43, 0.18); color: #ffb37a; }
.pd-park-chip.error  { background: rgba(230, 57, 70, 0.18); color: #ff8a93; }
.pd-park-btn {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #cfe0fa;
  border: 1px solid #26406a;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.pd-park-btn:hover { background: rgba(255, 255, 255, 0.10); }
.pd-park-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pd-park-pause  { color: #ffb37a; border-color: rgba(230, 137, 43, 0.5); }
.pd-park-resume { color: #6ce8a0; border-color: rgba(45, 171, 95, 0.5); background: rgba(45, 171, 95, 0.12); }
.pd-park-switch { color: #cdd9ff; border-color: rgba(140, 168, 255, 0.5); }

.pd-park-row2 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.pd-park-mode {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #26406a;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #cfe0fa;
}
.pd-park-mode:hover  { background: rgba(255, 255, 255, 0.10); }
.pd-park-mode.active {
  background: rgba(45, 171, 95, 0.20);
  border-color: rgba(45, 171, 95, 0.6);
  color: #6ce8a0;
}
.pd-park-row2 .pd-park-switch {
  margin-left: auto;
  padding: 6px 10px;
  font-size: 11px;
}
.pd-btn.pd-full { width: 100%; }

.pd-btn.pd-btn-start {
  width: 100%;
  background: linear-gradient(135deg, #1d6a3d, #2dab5f);
  font-size: 14px; padding: 12px;
}
.pd-btn.pd-btn-bridge {
  background: linear-gradient(135deg, #1b4277, #3b7cc4);
}
.pd-btn.pd-btn-vmdrop {
  background: linear-gradient(135deg, #b5671a, #e6892b);
}

/* Bad-number lead: replaces Mobile+Home buttons. Yellow-card warning. */
.pd-btn.pd-btn-skiplead {
  background: linear-gradient(135deg, #b58a1a, #e6c02b);
  color: #1a1a0a;
  font-weight: 700;
  font-size: 13px;
  padding: 12px;
}
.pd-btn.pd-btn-skiplead:hover { filter: brightness(1.1); }

.pd-btn-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 8px;
}
.pd-btn-cleat { gap: 6px; }
.pd-cleat {
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  flex: 0 0 auto;
}
.pd-btn-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 8px;
  margin-bottom: 0;
}

/* Autopilot Start/Pause button */
.pd-btn.pd-btn-autostart {
  background: linear-gradient(135deg, #1d6a3d, #2dab5f);
  font-size: 14px; padding: 12px;
  margin-bottom: 8px;
}
.pd-btn.pd-btn-autopause {
  background: linear-gradient(135deg, #b5671a, #e6892b);
  font-size: 14px; padding: 12px;
  margin-bottom: 8px;
}

/* Section labels above button groups */
.pd-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: #6b8095; margin: 6px 0 4px;
}

/* Manual dial input + Call button */
.pd-manual-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 8px;
}
.pd-manual-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e9eef7;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.pd-manual-input::placeholder { color: #6b8095; }
.pd-manual-input:focus { border-color: #3b7cc4; background: rgba(59, 124, 196, 0.08); }
.pd-btn.pd-btn-call {
  padding: 8px 14px;
  background: linear-gradient(135deg, #1b4277, #3b7cc4);
}
.pd-btn.pd-btn-end {
  padding: 8px 14px;
  background: linear-gradient(135deg, #b02432, #e63946);
}
/* Greyed-out state — used when a button isn't contextually usable yet
   (e.g. Start Session before sign-in finishes, or call buttons during a
   transition). The look is deliberately washed-out so the bright-coloured
   buttons clearly signal "this is the one you can press right now." */
.pd-btn[disabled],
.pd-btn[disabled]:hover,
.pd-btn[disabled]:active {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.9) brightness(0.7);
  transform: none !important;
  background: #2a3340 !important;
  color: #8a96a4 !important;
  border-color: #2a3340 !important;
  box-shadow: none !important;
}
.pd-callbtn[disabled],
.pd-callbtn[disabled]:hover,
.pd-callbtn[disabled]:active {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.95) brightness(0.6);
  transform: none !important;
}
.pd-manual-input[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Hint text shown directly under a greyed Start Session button explaining
   what's still needed (e.g. "Sign in via the popup first"). */
.pd-disabled-hint {
  margin-top: 6px;
  font-size: 11px;
  color: #8a96a4;
  text-align: center;
  line-height: 1.35;
}

/* Prospect block */
.pd-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 12px 0 8px; }
.pd-prospect-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.pd-prospect-num {
  font-size: 14px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.pd-prospect-status {
  font-size: 11px; color: #9fb1c9;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.pd-amd {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px; border-radius: 6px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
}
.pd-amd-human   { background: rgba(45,171,95,0.25); color: #bdf4d2; }
.pd-amd-machine { background: rgba(230,57,70,0.25); color: #ffb0b6; }
.pd-amd-unknown,
.pd-amd-not_sure { background: rgba(230,137,43,0.25); color: #ffc89a; }

/* Live transcript */
.pd-transcript {
  max-height: 110px; overflow-y: auto;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px; line-height: 1.4;
  color: #e9eef7;
  margin-bottom: 4px;
}
.pd-tr-line { margin-bottom: 2px; }
.pd-tr-interim { color: #9fb1c9; font-style: italic; }

/* Soft info banner used during transitional states */
.pd-info-soft {
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #3b7cc4;
  font-size: 12px;
  color: #cfe0fa;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* Error / warning info banner */
.pd-info {
  padding: 8px 10px;
  background: rgba(230,57,70,0.1);
  border-left: 3px solid #e63946;
  font-size: 11px;
  color: #ffb0b6;
  border-radius: 4px;
  margin-top: 8px;
}

/* Footer */
.pd-footer {
  padding: 6px 14px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; justify-content: space-between; align-items: center;
  color: #6b8095; font-size: 11px;
}
.pd-link {
  color: #cfe0fa; cursor: pointer; text-decoration: none;
}
.pd-link:hover { color: #fff; text-decoration: underline; }

/* Toast */
.pd-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #0b1a2e; color: #fff;
  padding: 10px 14px; border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  z-index: 2147483647;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border-left: 3px solid #38b264;
  animation: pd-toast-in 0.2s ease;
  max-width: 360px;
  display: none;
  white-space: pre-wrap;
}
.pd-toast.pd-toast-err {
  background: #2c0e12;
  border-left-color: #e63946;
  color: #ffd9dd;
}
/* v1.29.75 — Severity-styled toast variants for the hangup-explanation
   banner. "ok" = normal end-of-call (prospect hung up after talking),
   "warn" = stuck/long-call/network issue worth attention. */
.pd-toast.pd-toast-ok {
  background: #0d2017;
  border-left-color: #2dab5f;
  color: #d7f5e3;
}
.pd-toast.pd-toast-warn {
  background: #2a1f08;
  border-left-color: #e6a23c;
  color: #ffe8c4;
}

/* ──────────────────────────────────────────────────────────────────
   v1.29.76 — "Continue?" modal shown after a live human conversation.
   Centered card with backdrop, slides in. Three action buttons:
   primary (Resume Autopilot), secondary (Manual Continue), tertiary
   (Stay). Modal sits at the topmost z-index so it always wins
   against Impact's own overlays.
   ────────────────────────────────────────────────────────────────── */
.pd-continue-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.pd-continue-modal.pd-open {
  opacity: 1;
  pointer-events: auto;
}
.pd-continue-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.pd-continue-card {
  position: relative;
  z-index: 1;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, #14202f, #0b1622);
  border: 1px solid rgba(108, 232, 160, 0.25);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: #e6ecf5;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s ease;
}
.pd-continue-modal.pd-open .pd-continue-card {
  transform: translateY(0) scale(1);
}
.pd-continue-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 6px;
}
.pd-continue-icon {
  font-size: 20px;
  line-height: 1;
}
.pd-continue-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.pd-continue-close {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #cfe0fa;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.pd-continue-close:hover {
  background: rgba(255, 255, 255, 0.10);
}
.pd-continue-body {
  padding: 0 14px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #9fb1c9;
}
.pd-continue-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
}
.pd-continue-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: filter 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.pd-continue-btn-primary {
  background: linear-gradient(135deg, #1d6a3d, #2dab5f);
  border: 0;
  color: #fff;
}
.pd-continue-btn-primary:hover {
  filter: brightness(1.1);
}
.pd-continue-btn-secondary {
  background: rgba(108, 179, 255, 0.10);
  border: 1px solid rgba(108, 179, 255, 0.45);
  color: #c8defe;
}
.pd-continue-btn-secondary:hover {
  background: rgba(108, 179, 255, 0.18);
  border-color: rgba(108, 179, 255, 0.7);
}
.pd-continue-btn-tertiary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #9fb1c9;
  font-weight: 500;
  font-size: 12px;
  padding: 8px 14px;
}
.pd-continue-btn-tertiary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #cfe0fa;
}
@keyframes pd-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Goal-corner ball (visible only in goal skin) ─────────────────
   The ball appears mid-flight into the upper-right corner of the goal —
   classic "top-corner finish" image. Bumped up to ~96px (just under
   double) so it reads as a hero element on the wide goal panel. */
.pd-goal-ball {
  position: absolute;
  top: 10px; right: 170px;
  width: 96px; height: 96px;
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 5;
  display: none;             /* phone skin: hidden */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}
/* Speed-line trails behind the ball. The .pd-goal-ball div is itself a
   positioned ancestor, so these `right:` values are measured from the
   ball-div's right edge, NOT the panel's. With right: 184 in a 192-wide
   ball, the bright tips land 8 px in from the ball's left perimeter —
   the trails read as a fan emerging from the back of the ball as it
   flies toward the upper-right corner. */
.pd-goal-ball-trail {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85));
  border-radius: 1.5px;
  transform-origin: right center;
  z-index: 4;
}
.pd-goal-ball-trail-1 { top: 38px; right: 88px; width: 70px; transform: rotate(22deg); }
.pd-goal-ball-trail-2 { top: 50px; right: 88px; width: 58px; transform: rotate(22deg); height: 2.5px; }
.pd-goal-ball-trail-3 { top: 62px; right: 88px; width: 64px; transform: rotate(22deg); height: 2.5px; opacity: 0.7; }

/* ── Goal skin overrides ──────────────────────────────────────────
   Real soccer goals are 8 yards wide × 8 feet tall — much wider than
   tall. The goal skin reflects that: 700px wide, ~430px tall, with a
   two-column body so the wider stance doesn't feel empty.

   Three layered backgrounds give the panel real depth:
   1. SVG overlay (top): four perspective lines from front-frame corners
      converging on a back-wall rectangle, drawn in white. Stretches with
      the panel via preserveAspectRatio='none'.
   2. Diamond net (middle): two repeating-linear-gradients at ±45° create
      the soccer-net mesh. Bumped contrast so the net actually stands out.
   3. Backdrop (bottom): radial gradient gives a slight "darker in the
      center" vignette, which reinforces the look of looking INTO the goal.
   The translucent screen sits above it all so you read the net behind. */
#pd-root.pd-skin-goal .pd-phone {
  position: relative;
  width: 700px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 420' preserveAspectRatio='none'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23808080'/><stop offset='28%25' stop-color='%23ffffff'/><stop offset='55%25' stop-color='%23dadada'/><stop offset='100%25' stop-color='%23404040'/></linearGradient></defs><g stroke='%23161616' stroke-width='9' stroke-linecap='round' fill='none'><line x1='0' y1='0' x2='50' y2='80'/><line x1='700' y1='0' x2='650' y2='80'/><line x1='0' y1='420' x2='50' y2='340'/><line x1='700' y1='420' x2='650' y2='340'/><rect x='50' y='80' width='600' height='260'/></g><g stroke='url(%23b)' stroke-width='6' stroke-linecap='round' fill='none'><line x1='0' y1='0' x2='50' y2='80'/><line x1='700' y1='0' x2='650' y2='80'/><line x1='0' y1='420' x2='50' y2='340'/><line x1='700' y1='420' x2='650' y2='340'/><rect x='50' y='80' width='600' height='260'/></g></svg>"),
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.28) 0 1.5px, transparent 1.5px 14px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.28) 0 1.5px, transparent 1.5px 14px),
    radial-gradient(ellipse at 50% 50%, #0c1a2e 0%, #07111f 55%, #04080f 100%);
  background-size: 100% 100%, auto, auto, 100% 100%;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  border-top:    18px solid #f8f8f8;
  border-left:   14px solid #f8f8f8;
  border-right:  14px solid #f8f8f8;
  border-bottom: 8px solid #0a4a1f;   /* grass strip below the goal line */
  border-radius: 4px 4px 0 0;          /* squared-off goal frame */
  padding: 10px 12px 14px;
  box-shadow:
    /* Inner shadows give the white frame depth — like real metal posts */
    inset 0 8px 8px -4px rgba(0, 0, 0, 0.45),
    inset 6px 0 8px -4px rgba(0, 0, 0, 0.35),
    inset -6px 0 8px -4px rgba(0, 0, 0, 0.35),
    /* Outer drop */
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.4);
}

/* Metallic overlay on the white front frame — ::before paints the top
   crossbar in a polished-metal gradient, ::after paints both side posts.
   Each pseudo is positioned over the existing white border (which acts as
   a fallback if the gradient ever fails to render). The grass strip at
   the bottom is intentionally untouched. */
#pd-root.pd-skin-goal .pd-phone::before {
  content: "";
  position: absolute;
  top: -18px; left: -14px; right: -14px;
  height: 18px;
  background: linear-gradient(180deg,
    #6e6e6e 0%,
    #b8b8b8 18%,
    #ffffff 38%,
    #f1f1f1 58%,
    #c4c4c4 78%,
    #7a7a7a 100%);
  border-radius: 4px 4px 0 0;
  pointer-events: none;
  z-index: 6;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
#pd-root.pd-skin-goal .pd-phone::after {
  content: "";
  position: absolute;
  top: 0; bottom: -8px; left: -14px; right: -14px;
  pointer-events: none;
  z-index: 6;
  background:
    linear-gradient(90deg,
      #6e6e6e 0%, #c8c8c8 30%, #ffffff 55%, #c0c0c0 100%) left center / 14px 100% no-repeat,
    linear-gradient(90deg,
      #c0c0c0 0%, #ffffff 45%, #c8c8c8 70%, #6e6e6e 100%) right center / 14px 100% no-repeat;
}
/* Ball needs to sit above the metallic frame overlays */
#pd-root.pd-skin-goal .pd-goal-ball,
#pd-root.pd-skin-goal .pd-goal-ball-trail { z-index: 7; }

/* Corner resize handle — sits at the TOP-LEFT corner of the panel.
   The panel is anchored to its top-right corner via `right: Xpx`, so
   the top-LEFT is the corner that moves when the panel scales. Dragging
   it OUT (left and up) grows the panel; dragging it IN (right and down)
   shrinks it. Top-left is also always visible — the panel grows to the
   left from a fixed right anchor, so the bottom-left previously fell
   off-screen on tall scales. Available on every skin. */
.pd-resize-handle {
  position: absolute;
  left: 4px; top: 4px;
  width: 20px; height: 20px;
  cursor: nwse-resize;
  z-index: 12;
  pointer-events: auto;
  /* Three diagonal stripes pointing up-left to signal the grippable
     corner direction. v1.32.2 — Black stripes per Dustin (was white). */
  background:
    linear-gradient(135deg,
      transparent 0%, transparent 30%,
      rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.9) 38%,
      transparent 38%, transparent 52%,
      rgba(0,0,0,0.75) 52%, rgba(0,0,0,0.75) 60%,
      transparent 60%, transparent 74%,
      rgba(0,0,0,0.6) 74%, rgba(0,0,0,0.6) 82%,
      transparent 82%);
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.15s, transform 0.1s;
  display: block;
}
.pd-resize-handle:hover {
  opacity: 1;
  transform: scale(1.1);
}
/* Phone skin has a 42-px rounded corner — tuck the handle just inside
   the rounded edge so it sits on solid metal. */
#pd-root.pd-skin-phone .pd-resize-handle {
  left: 10px; top: 10px;
}
/* v1.31.73 — Goal skin has a squared-off 4-px corner. Position handle
   slightly inside the white frame so it sits on the corner of the goal
   without overlapping the goal-net pattern. */
#pd-root.pd-skin-goal .pd-resize-handle {
  left: 6px; top: 6px;
  background: rgba(11, 26, 46, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── v1.31.74 — Universal skin switcher icon bar ────────────────────
   Persistent toolbar at top of panel. Visible across ALL size modes
   (full, mini, ball) and ALL skins (phone, goal, future jersey + ball).
   Position absolute so it doesn't disrupt existing layouts; high z-index
   to ride above .pd-statusbar / .pd-mini-head / .pd-ball-bubble. */
.pd-skin-bar {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(11, 18, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 10;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pd-skin-bar-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #d8dde6;
  opacity: 0.6;
  padding: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.pd-skin-bar-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}
.pd-skin-bar-btn:active {
  background: rgba(255, 255, 255, 0.12);
}
.pd-skin-bar-btn:focus-visible {
  outline: 2px solid var(--yellow, #F2C94C);
  outline-offset: 1px;
}

/* Active states — driven entirely by parent classes. No JS bookkeeping.
   v1.32.9 — Added explicit classic highlight rule. Classic mode adds BOTH
   pd-skin-phone + pd-classic-mode classes, so the phone rule must EXCLUDE
   classic mode (via :not) and a separate rule highlights the classic
   button when classic mode is active. Without this, picking Classic kept
   the gold highlight on the Phone button — agents couldn't tell which
   skin was selected. */
#pd-root.pd-skin-phone.pd-size-full:not(.pd-classic-mode) .pd-skin-bar-btn[data-action="phone"],
#pd-root.pd-classic-mode.pd-size-full              .pd-skin-bar-btn[data-action="classic"],
#pd-root.pd-skin-goal.pd-size-full                 .pd-skin-bar-btn[data-action="goal"],
#pd-root.pd-size-mini                              .pd-skin-bar-btn[data-action="jersey"],
#pd-root.pd-size-ball                              .pd-skin-bar-btn[data-action="ball"] {
  opacity: 1;
  color: var(--yellow, #F2C94C);
  background: rgba(242, 201, 76, 0.12);
  border-color: rgba(242, 201, 76, 0.45);
}

/* Goal skin is much wider (700px) — the absolute-positioned bar at
   left:50% transform centers nicely already. Keep the same look but
   pull it slightly higher to clear the goal-net top frame. */
#pd-root.pd-skin-goal .pd-skin-bar {
  top: -42px;
}

/* Mini + ball size modes — the bar still needs to be reachable above
   the collapsed body. Pull closer to whatever IS visible. */
#pd-root.pd-size-mini .pd-skin-bar,
#pd-root.pd-size-ball .pd-skin-bar {
  top: -34px;
}

/* Reduce opacity when panel is not focused — less visual noise during
   active calls. Hover/focus brings it back to full opacity per
   .pd-skin-bar-btn:hover above. */
.pd-skin-bar {
  opacity: 0.85;
  transition: opacity 0.2s;
}
#pd-root:hover .pd-skin-bar,
#pd-root:focus-within .pd-skin-bar {
  opacity: 1;
}

/* ── v1.31.79 — Real goal + jersey icons + jersey skin ─────────────
   Dustin provided reference PNGs (goal sketch + black jersey photo)
   on 2026-06-06. Goal: chroma-keyed transparent, kept as outline.
   Jersey: chroma-keyed transparent and recolored from black to GPD
   grass green (#114a25 → #ffffff remap matching app.goalpowerdialer.com
   brand palette). Both packaged into icons/ folder.

   The SVG icons in the skin bar are replaced by <img> tags rendered
   at 20px (slightly larger than the 18px SVG had room for, since
   PNG can carry more detail than monochrome stroke).

   Jersey button un-hidden (v1.31.77 hid it pending a real visual). */
.pd-skin-bar-btn[data-action="jersey"] {
  display: inline-flex !important;
}
.pd-skin-bar-img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  /* Slight darken on light backgrounds so the goal sketch and jersey
     stand out against the dark bar — they were sampled from images
     on a white/gray studio surface. */
}

/* Active-state highlight via background ring instead of stroke color
   (since PNGs don't inherit currentColor like SVG strokes did). */
#pd-root.pd-skin-jersey .pd-skin-bar-btn[data-action="jersey"] {
  opacity: 1;
  background: rgba(242, 201, 76, 0.15);
  border-color: rgba(242, 201, 76, 0.55);
}

/* v1.31.80 — REVERTED v1.31.79 pd-skin-jersey full-size CSS.

   Per Dustin's spec: soccer ball setup stays exactly as is (he
   said "the old skin look was perfect"). Jersey takes the actual
   JERSEY SHAPE as its panel — the image IS the panel, not a small
   watermark inside a circular panel. "The shape and skin is the
   watermark." Both watermarks slightly darker.

   Per Dustin 2026-06-06: "fit everything to the shape of that image"
   + soccer ball PNG dropped in C:\dev. Both ball AND jersey now take
   their respective image as the panel shape (symmetric pattern).
   Soccer ball uses icons/soccerball-large.png (the realistic ball
   PNG Dustin provided). Jersey uses icons/jersey-large.png. */

/* Ball click (pd-skin-goal + pd-size-mini, NOT pd-jersey-bg): the
   panel takes the soccer-ball shape. The original SVG watermark is
   replaced with the new PNG. Panel background goes transparent and
   the ball image fills it. */
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-card {
  background: transparent !important;
  border: 0 !important;
  width: 280px !important;
  height: 280px !important;
  box-shadow: none !important;
}
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-ball-bg {
  background-image: var(--pd-soccerball-img) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  opacity: 0.92 !important;
}
/* Push controls into the ball body — ~28px inset on all sides so they
   sit within the visible sphere rather than clipping the curved edge. */
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-fg {
  padding: 30px 28px 28px !important;
  position: relative;
  z-index: 2;
}

/* Jersey click: same idea, jersey image as the panel shape. Controls
   inset to fit within the jersey body (below V-neck, between sleeves). */
#pd-root.pd-jersey-bg .pd-mini-card {
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 !important;
  width: 280px !important;
  height: 380px !important;
  box-shadow: none !important;
}
#pd-root.pd-jersey-bg .pd-mini-ball-bg {
  background-image: var(--pd-jersey-img) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.95;
}
/* Push controls into the jersey body area: below V-neck, between
   sleeves. */
#pd-root.pd-jersey-bg .pd-mini-fg {
  padding: 75px 50px 35px !important;
  position: relative;
  z-index: 2;
}
/* Stronger dark backgrounds on controls for readability over both
   the bright ball patches and the bright jersey. */
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-stats3,
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-status,
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-autoclick,
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-autoattend {
  background: rgba(0, 0, 0, 0.72) !important;
}

/* Active state for jersey icon (when pd-jersey-bg active) */
#pd-root.pd-jersey-bg .pd-skin-bar-btn[data-action="jersey"] {
  opacity: 1;
  background: rgba(242, 201, 76, 0.15);
  border-color: rgba(242, 201, 76, 0.55);
}
/* Active state for ball icon (when in compact UI but NOT jersey overlay) */
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-skin-bar-btn[data-action="ball"] {
  opacity: 1;
  background: rgba(242, 201, 76, 0.15);
  border-color: rgba(242, 201, 76, 0.55);
}

/* v1.31.80 — Hide legacy header buttons. The universal skin bar
   handles all skin/size switching now. Keep #pd-refresh because
   it's functional (reconnect worker), not skin-related. */
#pd-collapse,
#pd-summary,
#pd-max,
#pd-hide {
  display: none !important;
}

/* v1.31.80 — NEW compact UI buttons: Start Session + Auto Attend */
.pd-mini-startsess {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(180deg, #2dab5f 0%, #1f8b48 100%);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: filter 0.15s, transform 0.1s;
}
.pd-mini-startsess:hover { filter: brightness(1.08); }
.pd-mini-startsess:active { transform: translateY(1px); }
.pd-mini-autoattend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.pd-mini-autoattend:hover { background: rgba(0, 0, 0, 0.7); }
.pd-mini-autoattend.active {
  background: rgba(46, 171, 95, 0.25);
  border-color: rgba(46, 171, 95, 0.6);
}

/* Bottom row: Settings + Drawer toggle */
.pd-mini-bottom-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.pd-mini-bottom-row .pd-mini-settings { flex: 1; }
.pd-mini-drawer-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(242, 201, 76, 0.85);
  border: 0;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.pd-mini-drawer-toggle:hover { transform: scale(1.06); background: #ffd23f; }

/* Slide-out drawer */
.pd-mini-drawer {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 10px;
  width: 240px;
  max-height: 100%;
  background: linear-gradient(180deg, #142544 0%, #0b1a2e 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  color: #e6ecf5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  z-index: 6;
  opacity: 0;
  transform: translateX(-10px) scale(0.97);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.pd-mini-drawer.open {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.pd-mini-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 600;
}
.pd-mini-drawer-close {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #c8d4e3;
  cursor: pointer;
  font-size: 14px;
}
.pd-mini-drawer-close:hover { background: rgba(255, 255, 255, 0.18); }
.pd-mini-drawer-sect { margin-bottom: 10px; }
.pd-mini-drawer-h {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #8896b3;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pd-mini-drawer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  color: #e6ecf5;
  cursor: pointer;
}
.pd-mini-drawer-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #f2c94c;
}
.pd-mini-drawer-perm {
  width: 100%;
  background: rgba(46, 171, 95, 0.22);
  border: 0.5px solid rgba(46, 171, 95, 0.5);
  color: #d4ffd9;
  border-radius: 8px;
  padding: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.pd-mini-drawer-perm:hover { background: rgba(46, 171, 95, 0.35); }
.pd-mini-drawer-perm.granted { background: rgba(46, 171, 95, 0.4); border-color: rgba(46, 171, 95, 0.8); }
.pd-mini-drawer-perm.denied  { background: rgba(220, 38, 38, 0.25); border-color: rgba(220, 38, 38, 0.55); color: #ffd4d4; }

/* ── v1.31.78 — Real minimize + hide legacy skin toggles ───────────
   Per Dustin 2026-06-06: "all other 'skin choosing' buttons should be
   removed since we now have this bar that works."
   Two legacy in-panel buttons flipped between phone and goal:
   #pd-skin-toggle (full panel) and #pd-mini-skin-toggle (mini-head).
   The universal icon bar now owns skin switching, so these are dead
   weight. Hide via CSS — handlers stay benign, no JS removal needed. */
#pd-skin-toggle,
#pd-mini-skin-toggle {
  display: none !important;
}

/* True minimize: pd-root entirely hidden when state.minimized.
   The floating restore dot lives on document.body so it isn't
   affected by pd-root's display:none. */
#pd-root.pd-minimized { display: none !important; }

/* v1.31.80 styling fix — Floating restore dot. Sized + styled to
   match Dustin's reference: 60×60 circle, dark center, prominent
   yellow ring border, realistic soccerball-large.png filling ~88%
   of the interior. Background image is pushed via JS (chrome.runtime
   .getURL) since extension assets can't be referenced from injected
   CSS without knowing the extension ID. */
.pd-restore-btn {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #0d0d10;
  background-size: 88% 88%;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #F2C94C;
  display: block;
  cursor: pointer;
  z-index: 2147483645;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 0, 0, 0.3) inset;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  animation: pdRestoreIn 0.25s ease;
}
@keyframes pdRestoreIn {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pd-restore-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55),
              0 0 0 3px rgba(242, 201, 76, 0.35);
}

/* v1.31.80 fix-up — Invisible resize handle in bottom-right corner
   of the restore dot. Transparent so it doesn't disrupt the ball
   look; cursor change on hover is the affordance. */
.pd-restore-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: transparent;
  z-index: 2;
  border-radius: 0 0 50% 0;
}
.pd-restore-resize:hover {
  background: rgba(242, 201, 76, 0.18);
}
.pd-restore-btn:active { transform: scale(0.95); }

/* ── v1.31.77 — Revert v1.31.75 ball/jersey visual overhaul ────────
   Hide the jersey icon entirely until the real jersey skin ships
   (v1.31.78+). Ball icon stays — it now routes through setSizeMode
   per the v1.31.74 placeholder. The pd-skin-face + pd-skin-drawer
   DOM from v1.31.75 are forced-hidden so they can't leak. */
.pd-skin-bar-btn[data-action="jersey"] {
  display: none !important;
}
.pd-skin-face,
.pd-skin-drawer {
  display: none !important;
}
/* Belt-and-suspenders: kill the v1.31.75 "hide standard UI" rules so
   even if a pd-skin-ball or pd-skin-jersey class somehow lands on
   pd-root, the existing UI keeps rendering. */
#pd-root.pd-skin-ball .pd-screen,
#pd-root.pd-skin-ball .pd-mini-head,
#pd-root.pd-skin-ball .pd-ball-bubble,
#pd-root.pd-skin-ball .pd-goal-ball,
#pd-root.pd-skin-ball .pd-side,
#pd-root.pd-skin-jersey .pd-screen,
#pd-root.pd-skin-jersey .pd-mini-head,
#pd-root.pd-skin-jersey .pd-ball-bubble,
#pd-root.pd-skin-jersey .pd-goal-ball,
#pd-root.pd-skin-jersey .pd-side {
  display: revert !important;
}
/* And kill the v1.31.75 .pd-phone shape overrides for those skins.
   Ball + jersey panels should look like phone (their fallback) until
   the proper additions ship. */
#pd-root.pd-skin-ball .pd-phone,
#pd-root.pd-skin-jersey .pd-phone {
  width: revert !important;
  height: revert !important;
  background: revert !important;
  border-radius: revert !important;
  clip-path: revert !important;
  padding: revert !important;
  box-shadow: revert !important;
}

/* Original v1.31.75 active state for jersey/ball — harmless now,
   keeping it for when v1.31.78 restores. */
#pd-root.pd-skin-jersey .pd-skin-bar-btn[data-action="jersey"],
#pd-root.pd-skin-ball   .pd-skin-bar-btn[data-action="ball"] {
  opacity: 1;
  color: var(--yellow, #F2C94C);
  background: rgba(242, 201, 76, 0.12);
  border-color: rgba(242, 201, 76, 0.45);
}

/* ── v1.31.75 — Ball + Jersey skins: hide standard panel UI ────────
   When the user is on a compact skin, the phone/goal screen, sides,
   mini-head, ball-bubble are all hidden. The face + drawer take over. */
#pd-root.pd-skin-ball .pd-screen,
#pd-root.pd-skin-ball .pd-mini-head,
#pd-root.pd-skin-ball .pd-ball-bubble,
#pd-root.pd-skin-ball .pd-goal-ball,
#pd-root.pd-skin-ball .pd-side,
#pd-root.pd-skin-jersey .pd-screen,
#pd-root.pd-skin-jersey .pd-mini-head,
#pd-root.pd-skin-jersey .pd-ball-bubble,
#pd-root.pd-skin-jersey .pd-goal-ball,
#pd-root.pd-skin-jersey .pd-side {
  display: none !important;
}

/* Face: default hidden; shown for ball + jersey */
.pd-skin-face {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
#pd-root.pd-skin-ball .pd-skin-face,
#pd-root.pd-skin-jersey .pd-skin-face {
  display: flex;
}
.pd-skin-face-graphic {
  width: 70%;
  aspect-ratio: 1;
  pointer-events: none;
}
.pd-skin-face-max,
.pd-skin-face-drawer-toggle {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
  padding: 0;
}
.pd-skin-face-max { top: 12px; right: 12px; }
.pd-skin-face-drawer-toggle {
  bottom: 12px; right: 12px;
  background: var(--yellow, #F2C94C);
  border-color: rgba(0, 0, 0, 0.25);
  color: #1a1a1a;
  width: 32px;
  height: 32px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.pd-skin-face-max:hover,
.pd-skin-face-drawer-toggle:hover { transform: scale(1.08); }
.pd-skin-face-max:active,
.pd-skin-face-drawer-toggle:active { transform: scale(0.95); }

/* ── Ball skin — round soccer-ball panel ────────────────────────── */
#pd-root.pd-skin-ball .pd-phone {
  width: 220px;
  height: 220px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, #2c2c30 0%, #18181c 60%, #08080a 100%);
  border-radius: 50%;
  padding: 0;
  position: relative;
  overflow: visible;
  box-shadow:
    0 25px 45px rgba(0, 0, 0, 0.55),
    inset -10px -16px 30px rgba(0, 0, 0, 0.55),
    inset 10px 16px 30px rgba(255, 255, 255, 0.05);
}
#pd-root.pd-skin-ball .pd-skin-face-graphic {
  /* Pentagonal patches via inline SVG data URL */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23ffffff'><polygon points='50,32 60,40 56,55 44,55 40,40' opacity='0.92'/><polygon points='32,32 24,42 28,55 38,52 38,40' opacity='0.78'/><polygon points='68,32 76,42 72,55 62,52 62,40' opacity='0.78'/><polygon points='40,62 50,68 60,62 56,72 44,72' opacity='0.68'/><line x1='50' y1='32' x2='50' y2='18' stroke='%23ffffff' stroke-width='1.5' opacity='0.4'/><line x1='32' y1='32' x2='18' y2='24' stroke='%23ffffff' stroke-width='1.5' opacity='0.4'/><line x1='68' y1='32' x2='82' y2='24' stroke='%23ffffff' stroke-width='1.5' opacity='0.4'/></g></svg>") center/contain no-repeat;
}

/* ── Jersey skin — shirt silhouette via clip-path ──────────────── */
#pd-root.pd-skin-jersey .pd-phone {
  width: 240px;
  height: 280px;
  background:
    linear-gradient(180deg, #f2c94c 0%, #d4a93b 100%);
  clip-path: polygon(
    18% 0%, 35% 4%, 45% 14%, 55% 14%, 65% 4%, 82% 0%,
    100% 14%, 92% 26%, 84% 26%,
    84% 100%, 16% 100%, 16% 26%, 8% 26%, 0% 14%
  );
  padding: 0;
  position: relative;
  box-shadow: 0 25px 40px rgba(0, 0, 0, 0.4);
  overflow: visible;
}
#pd-root.pd-skin-jersey .pd-skin-face-graphic {
  width: 50%;
  /* Big "10" jersey number stylized */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text x='50' y='68' font-family='Impact, sans-serif' font-size='56' font-weight='900' fill='%23ffffff' text-anchor='middle' opacity='0.9'>10</text></svg>") center/contain no-repeat;
  margin-top: 20px; /* sit below the collar */
}
/* Pull face controls inward from the clipped shoulders */
#pd-root.pd-skin-jersey .pd-skin-face-max { top: 30px; right: 18px; }
#pd-root.pd-skin-jersey .pd-skin-face-drawer-toggle { bottom: 18px; right: 22px; }

/* ── Slide-out drawer (shared by ball + jersey) ─────────────────── */
.pd-skin-drawer {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 12px;
  width: 280px;
  max-height: 480px;
  background: linear-gradient(180deg, #142544 0%, #0b1a2e 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
  color: #e6ecf5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-y: auto;
  z-index: 5;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(-16px) scale(0.96);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
#pd-root.pd-skin-ball .pd-skin-drawer.open,
#pd-root.pd-skin-jersey .pd-skin-drawer.open {
  display: block;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.pd-skin-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pd-skin-drawer-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
}
.pd-skin-drawer-close {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #c8d4e3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pd-skin-drawer-close:hover { background: rgba(255, 255, 255, 0.18); }

.pd-skin-drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.pd-drawer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.pd-drawer-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}
.pd-drawer-btn:active { transform: translateY(1px); }
.pd-drawer-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.pd-drawer-icon { font-size: 13px; }
.pd-drawer-wide { grid-column: span 2; }
.pd-drawer-autopilot {
  background: rgba(242, 201, 76, 0.18);
  border-color: rgba(242, 201, 76, 0.5);
  color: #fff8db;
}
.pd-drawer-autopilot:hover {
  background: rgba(242, 201, 76, 0.28);
  border-color: rgba(242, 201, 76, 0.7);
}

.pd-skin-drawer-section { margin-bottom: 14px; }
.pd-skin-drawer-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #8896b3;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pd-drawer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  color: #e6ecf5;
  cursor: pointer;
}
.pd-drawer-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--yellow, #F2C94C);
}
.pd-skin-drawer-stats {
  font-size: 13px;
  font-weight: 600;
  color: #c8d4e3;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.pd-drawer-perm {
  width: 100%;
  background: rgba(46, 125, 50, 0.22);
  border: 1px solid rgba(46, 125, 50, 0.5);
  color: #d4ffd9;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.pd-drawer-perm:hover { background: rgba(46, 125, 50, 0.35); }
.pd-drawer-perm.granted { background: rgba(46, 125, 50, 0.4); border-color: rgba(46, 125, 50, 0.8); }
.pd-drawer-perm.denied  { background: rgba(220, 38, 38, 0.25); border-color: rgba(220, 38, 38, 0.55); color: #ffd4d4; }

/* ── Hide the Settings → skin radio cards. Icon bar replaces them.
   Per Dustin's spec 2026-06-05: "i was talking about not having the
   area in setup to choose because im actually thinking of just having
   a bar on every extension". */
.pd-settings-skin-opt { display: none !important; }

/* Resize handle stays usable on ball + jersey too */
#pd-root.pd-skin-ball .pd-resize-handle,
#pd-root.pd-skin-jersey .pd-resize-handle {
  left: auto; right: 6px; top: 6px;
  background: rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.35);
}


/* Anchor scaling at the panel's top-right (where CSS `right:Xpx` pins it),
   so the panel grows/shrinks toward the bottom-left handle. Applied on
   both skins. */
.pd-phone {
  transform-origin: top right;
}

/* Compact 3-column body for goal skin (v1.19.6).
   Everything fits inside the goal frame — no spillover below the
   bottom bar. Status pill sits inline with "Worker connected" instead
   of being pushed to the right edge. In-call balls go horizontal under
   the avatar so the middle column stays short. */
#pd-root.pd-skin-goal .pd-screen {
  min-height: 320px;
}
#pd-root.pd-skin-goal .pd-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "profile  profile   stats"
    "status   status    stats"
    "calls    prospect  toggles"
    "end      end       end"
    "info     info      info";
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
}
#pd-root.pd-skin-goal .pd-profile-row { grid-area: profile; margin-bottom: 0; }
#pd-root.pd-skin-goal .pd-status-row  {
  grid-area: status;
  margin-bottom: 4px;
}
/* Tuck PARKED right next to "Worker connected" instead of spacer-pushed
   to the far right (per Dustin's diagram — purple → red square). */
#pd-root.pd-skin-goal .pd-status-row .pd-status-spacer { display: none; }
#pd-root.pd-skin-goal .pd-status-row .pd-session-pill {
  margin-left: 8px;
}
#pd-root.pd-skin-goal .pd-stats       {
  grid-area: stats;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  align-self: start;
  margin-top: 0;
  margin-bottom: 0;
}
#pd-root.pd-skin-goal .pd-stats > div { padding: 5px 4px; }
#pd-root.pd-skin-goal .pd-stat-num { font-size: 16px; }
#pd-root.pd-skin-goal .pd-stat-lbl { font-size: 9px; }
#pd-root.pd-skin-goal #pd-session-area { display: contents; }
#pd-root.pd-skin-goal .pd-session-grid { display: contents; }
#pd-root.pd-skin-goal .pd-call-stack    { grid-area: calls; }
#pd-root.pd-skin-goal .pd-toggle-stack  { grid-area: toggles; }
#pd-root.pd-skin-goal #pd-end           {
  grid-area: end;
  margin-top: 6px;
  padding: 7px 12px;
  font-size: 12px;
}
#pd-root.pd-skin-goal #pd-prospect-area {
  grid-area: prospect;
  align-self: stretch;
  padding-top: 0;
}
#pd-root.pd-skin-goal .pd-info          { grid-area: info; }

/* Compact in-call view that fits the middle column inside the goal frame.
   Smaller avatar, smaller balls, horizontal button row, tighter margins. */
#pd-root.pd-skin-goal .pd-incall {
  max-width: none;
  margin: 0;
  padding-bottom: 0;
}
#pd-root.pd-skin-goal .pd-incall-label {
  margin-bottom: 4px;
  font-size: 9px;
}
#pd-root.pd-skin-goal .pd-incall-avatar {
  width: 48px; height: 48px;
  margin: 0 auto 6px;
  font-size: 17px;
}
#pd-root.pd-skin-goal .pd-incall-num { font-size: 14px; }
#pd-root.pd-skin-goal .pd-incall-sub { font-size: 10px; min-height: 0; }
#pd-root.pd-skin-goal .pd-incall-status { margin-top: 5px; padding: 3px 8px; font-size: 10px; }
#pd-root.pd-skin-goal .pd-incall-btnrow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
#pd-root.pd-skin-goal .pd-callbtn-ball,
#pd-root.pd-skin-goal .pd-callbtn-icon {
  width: 38px; height: 38px;
}
#pd-root.pd-skin-goal .pd-callbtn-icon { font-size: 17px; }
#pd-root.pd-skin-goal .pd-callbtn-lbl { font-size: 10px; }
#pd-root.pd-skin-goal .pd-transcript { max-height: 90px; }
#pd-root.pd-skin-goal .pd-incall-tr  {
  max-height: 70px;
  margin: 6px 4px 0;
  font-size: 10px;
}

/* Default = single-column flow on phone skin (the wrappers vanish) */
.pd-session-grid,
.pd-call-stack,
.pd-toggle-stack {
  display: contents;
}
/* On goal / medium / soccer-medium, the body grid takes over (above)
   and we just need .pd-call-stack and .pd-toggle-stack to behave as
   flex containers with their children stacked vertically. */
#pd-root.pd-skin-goal .pd-call-stack,
#pd-root.pd-skin-goal .pd-toggle-stack,
#pd-root.pd-skin-medium .pd-call-stack,
#pd-root.pd-skin-medium .pd-toggle-stack,
#pd-root.pd-skin-soccer-medium .pd-call-stack,
#pd-root.pd-skin-soccer-medium .pd-toggle-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Always-on in-call view — works on both phone and goal skins. Centered
   and capped so the controls don't sprawl when the panel is wide. */
.pd-incall {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Idle / placeholder in-call view — shown when no call is in flight so
   the agent always sees where the live call controls and transcript
   will appear. Whole block is dimmed and buttons are disabled. When a
   real prospect connects, the placeholder is replaced by the live view
   and the call buttons play a brief light-up animation. */
.pd-incall.pd-incall-idle {
  opacity: 0.55;
  filter: grayscale(0.85);
  pointer-events: none;            /* block hover/click on the disabled buttons */
}

/* Animate buttons from dim/desaturated to full brightness — but only
   on the transition from idle to active. JS adds .pd-incall-flash on
   that single transition; subsequent re-renders during the same call
   don't replay the animation. */
.pd-incall-flash .pd-callbtn {
  animation: pd-button-lightup 520ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@keyframes pd-button-lightup {
  0%   { filter: brightness(0.45) saturate(0.25); transform: scale(0.94); }
  60%  { filter: brightness(1.25) saturate(1.25); transform: scale(1.04); }
  100% { filter: brightness(1)    saturate(1);    transform: scale(1); }
}
.pd-incall-tr-idle {
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
}
.pd-tr-placeholder {
  font-style: italic;
  color: #6b8095;
  text-align: center;
  padding: 6px 4px;
}
.pd-incall-status-idle {
  color: #8a96a4;
}
.pd-incall-status-idle .pd-incall-pulse {
  background: #6b8095;
  box-shadow: none;
  animation: none;
}
#pd-root.pd-skin-goal .pd-side    { display: none; }
#pd-root.pd-skin-goal .pd-gesture { display: none; }
#pd-root.pd-skin-goal .pd-screen {
  /* More translucent than phone-skin so the goal's net + perspective lines
     stay visible behind the dialer content. */
  background: rgba(8, 18, 32, 0.50);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  z-index: 1;
}
#pd-root.pd-skin-goal .pd-statusbar {
  /* Hide phone time/icons, but keep the bar as a 16px-tall drag handle */
  height: 16px;
  padding: 0;
}
#pd-root.pd-skin-goal .pd-statusbar > * { display: none; }
#pd-root.pd-skin-goal .pd-goal-ball { display: block; }

/* ── Big iOS-style in-call view ─────────────────────────────────── */
.pd-incall {
  margin-top: 6px;
  padding-bottom: 4px;
  text-align: center;
}
.pd-incall-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: #9fb1c9; margin-bottom: 8px;
}
.pd-incall-avatar {
  width: 64px; height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b7cc4, #1b4277);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600; color: #fff;
  letter-spacing: 1px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06),
              0 0 24px rgba(59, 124, 196, 0.45);
}
.pd-incall-num {
  font-size: 17px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.pd-incall-sub {
  font-size: 11px; color: #9fb1c9;
  margin-top: 2px;
  min-height: 14px;
}
.pd-incall-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 4px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
  background: rgba(45, 171, 95, 0.18);
  color: #bdf4d2;
}
.pd-incall-status-dialing,
.pd-incall-status-ringing {
  background: rgba(230, 137, 43, 0.18);
  color: #ffc89a;
}
.pd-incall-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: pd-pulse 1.2s ease-in-out infinite;
}
@keyframes pd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
.pd-incall-tr {
  margin: 8px 4px 0;
  max-height: 70px;
  text-align: left;
}

.pd-incall-btnrow {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
/* v1.31.88 — Defensive visibility safeguard. Multiple agents reported
   Skip / VM Drop / Auto-Attd buttons missing on certain skins. Force
   the in-call button row + its children to stay visible regardless of
   skin overrides, transparency tricks, or stacking-context issues.
   Layout/spacing tweaks per skin remain effective; only visibility +
   opacity are pinned here. */
#pd-root .pd-incall-btnrow,
#pd-root .pd-incall-btnrow .pd-callbtn {
  visibility: visible !important;
  opacity: 1 !important;
}
#pd-root .pd-incall-btnrow {
  /* Belt-and-suspenders: ensure the row itself isn't clipped or
     z-index'd under a jersey/goal background layer. */
  position: relative;
  z-index: 5;
}
.pd-callbtn {
  background: transparent; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 0;
  color: inherit;
  font-family: inherit;
  transition: transform 0.05s ease, filter 0.12s ease;
}
.pd-callbtn:hover { filter: brightness(1.12); }
.pd-callbtn:active { transform: translateY(1px); }
.pd-callbtn-ball {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
              inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}
.pd-callbtn-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #b5671a, #e6892b);
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(230, 137, 43, 0.4);
}
.pd-callbtn-end .pd-callbtn-ball {
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.5),
              inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}
.pd-callbtn-answer .pd-callbtn-ball {
  box-shadow: 0 4px 14px rgba(45, 171, 95, 0.5),
              inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}
.pd-callbtn-lbl {
  font-size: 11px; font-weight: 600;
  color: #cfe0fa;
}
.pd-callbtn-end    .pd-callbtn-lbl { color: #ffb0b6; }
.pd-callbtn-answer .pd-callbtn-lbl { color: #bdf4d2; }
.pd-callbtn-vm     .pd-callbtn-lbl { color: #ffc89a; }
.pd-callbtn-ivr    .pd-callbtn-lbl { color: #cdd9ff; }
/* v1.31.97 — End-Human-Call button. Distinct color from generic Hangup
   so the agent can visually confirm they're ending a LIVE conversation
   (not just a no-answer ring). Yellow-amber matches the popup header. */
.pd-callbtn-endhuman .pd-callbtn-ball {
  box-shadow: 0 4px 14px rgba(242, 201, 76, 0.5),
              inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}
.pd-callbtn-endhuman .pd-callbtn-lbl { color: #ffd566; font-weight: 700; }
.pd-callbtn-ivr.active {
  background: rgba(45, 171, 95, 0.18);
  border: 1px solid rgba(45, 171, 95, 0.55);
  box-shadow: 0 0 0 2px rgba(45, 171, 95, 0.25) inset;
}
.pd-callbtn-ivr.active .pd-callbtn-lbl { color: #6ce8a0; font-weight: 700; }

/* v1.29.29 — Desktop mic mute button */
.pd-callbtn-mute   .pd-callbtn-lbl { color: #d4d4d4; }
.pd-callbtn-mute.active {
  background: rgba(255, 99, 99, 0.18);
  border: 1px solid rgba(255, 99, 99, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 99, 99, 0.20) inset;
}
.pd-callbtn-mute.active .pd-callbtn-lbl { color: #ff8a8a; font-weight: 700; }

/* ── Session stats slide-out (left edge of viewport) ────────────── */
.pd-session-summary {
  position: fixed;
  left: 0; top: 64px;
  width: 320px;
  max-height: calc(100vh - 96px);
  background: linear-gradient(180deg, #11233f 0%, #0b1a2e 100%);
  color: #e9eef7;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid #ffd23f;
  border-radius: 0 14px 14px 0;
  box-shadow: 8px 14px 32px rgba(0, 0, 0, 0.55);
  z-index: 2147483646;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  transform: translateX(-110%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}
.pd-session-summary.pd-open { transform: translateX(0); }
.pd-ssum-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: #0a0a0a;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 12px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 210, 63, 0.3);
}
.pd-ssum-body { padding: 14px; }
.pd-ssum-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: #9fb1c9;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pd-ssum-time { font-variant-numeric: tabular-nums; font-weight: 700; color: #ffd23f; }
.pd-ssum-rate { text-transform: uppercase; letter-spacing: 0.5px; }
.pd-ssum-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pd-ssum-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}
.pd-ssum-stat-good { border-color: rgba(45, 171, 95, 0.45); background: rgba(45, 171, 95, 0.10); }
.pd-ssum-stat-vm   { border-color: rgba(230, 137, 43, 0.45); background: rgba(230, 137, 43, 0.10); }
.pd-ssum-stat-bad  { border-color: rgba(230, 57, 70, 0.45);  background: rgba(230, 57, 70, 0.10); }
.pd-ssum-num {
  font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pd-ssum-stat-good .pd-ssum-num { color: #bdf4d2; }
.pd-ssum-stat-vm   .pd-ssum-num { color: #ffc89a; }
.pd-ssum-stat-bad  .pd-ssum-num { color: #ffb0b6; }
.pd-ssum-lbl {
  font-size: 10px; color: #9fb1c9;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-top: 4px;
}
.pd-ssum-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px; color: #9fb1c9;
  text-align: center;
}

/* ── Double-tap checkbox row ──────────────────────────────────────── */
.pd-double-tap-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px;
  background: rgba(255, 210, 63, 0.06);
  border: 1px solid rgba(255, 210, 63, 0.20);
  border-radius: 8px;
  margin: 10px 0 6px;
  cursor: pointer;
  font-size: 12px;
  color: #cfe0fa;
  user-select: none;
}
.pd-double-tap-row:has(input:checked) {
  background: rgba(255, 210, 63, 0.14);
  border-color: rgba(255, 210, 63, 0.55);
}
.pd-double-tap-row input[type="checkbox"] {
  margin: 1px 0 0; accent-color: #ffd23f;
  flex: 0 0 auto;
}
.pd-double-tap-row .pd-dt-label {
  font-weight: 700; color: #fff;
  display: block;
}
.pd-double-tap-row .pd-dt-hint {
  display: block; font-size: 11px; color: #9fb1c9;
  margin-top: 2px;
}

/* Flash on host-page elements we auto-click */
.pd-flash {
  outline: 3px solid #e63946 !important;
  outline-offset: 2px;
  transition: outline-color 0.3s ease;
}

/* ─────────────────────────────────────────────────────────────────────
   Onboarding tour overlay (5-step first-run tutorial)
   ─────────────────────────────────────────────────────────────────── */
#pd-tour-root {
  position: fixed;
  inset: 0;
  /* v1.32.5 — Bumped from 9998 → 10010 so the tour card sits ABOVE the
     dialer panel (#pd-root z-index 9999). Was 9998 — tour Next button
     got hidden behind the dialer on steps that anchor inside the panel,
     making the tour appear "frozen" at step 3/11 (Setup pill is in the
     panel; card placement put Next under the panel). Still below typical
     modal layers (Bootstrap 1050, Material UI 1300). */
  z-index: 10010;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
.pd-tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* v1.31.72 — Default to pointer-events: none so a stranded
     #pd-tour-root in the DOM can't block clicks on Impact. The
     reaper in content.js (orphanOverlayReaper) tries to remove
     orphan tour roots, but this is defense-in-depth: even if the
     element persists, it won't trap clicks unless tour is active. */
  pointer-events: none;
  animation: pd-tour-fade 200ms ease-out;
}
#pd-tour-root.pd-tour-active .pd-tour-backdrop {
  pointer-events: auto;
}

/* v1.31.72 — Diagnostic hit-test outline. When pd_debug_hit_test is on
   in chrome.storage.local, the helper paints these classes onto pd-root
   plus any pd-* element on document.body so we can SEE invisible
   click-traps. Toggle from Settings. */
.pd-debug-outline {
  outline: 2px solid rgba(255, 0, 0, 0.9) !important;
  outline-offset: -1px;
  background: rgba(255, 0, 0, 0.08) !important;
}
.pd-debug-outline::after {
  content: attr(data-pd-debug-label);
  position: absolute;
  top: -18px; left: 0;
  background: rgba(255, 0, 0, 0.9);
  color: #fff;
  font: 10px/14px monospace;
  padding: 0 4px;
  pointer-events: none;
  z-index: 2147483647;
}
.pd-tour-spotlight {
  position: absolute;
  border-radius: 14px;
  pointer-events: none;
  box-shadow:
    0 0 0 9999px rgba(8, 12, 18, 0.55),
    0 0 0 3px rgba(56, 178, 100, 0.95),
    0 0 28px rgba(56, 178, 100, 0.55);
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
}
.pd-tour-card {
  position: absolute;
  width: 340px;
  padding: 18px 20px 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  color: #1a2128;
  animation: pd-tour-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.pd-tour-step {
  font-size: 11px;
  font-weight: 700;
  color: #38b264;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pd-tour-title {
  margin: 0 0 8px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f1620;
}
.pd-tour-body {
  margin: 0 0 16px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #44525e;
}
.pd-tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pd-tour-nav {
  display: flex;
  gap: 8px;
}
.pd-tour-btn {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, color 120ms, transform 80ms;
}
.pd-tour-btn:active { transform: translateY(1px); }
.pd-tour-btn-skip {
  background: transparent;
  color: #6c7a80;
}
.pd-tour-btn-skip:hover { color: #1a2128; }
.pd-tour-btn-back {
  background: #eef2f5;
  color: #44525e;
}
.pd-tour-btn-back:hover:not([disabled]) { background: #e0e6eb; }
.pd-tour-btn-back[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.pd-tour-btn-next {
  background: #38b264;
  color: #fff;
}
.pd-tour-btn-next:hover { background: #2ea157; }

@keyframes pd-tour-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pd-tour-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────
   Mid-session History slide-out
   ─────────────────────────────────────────────────────────────────── */
.pd-history-panel {
  position: fixed;
  right: 0; top: 64px;
  width: 360px;
  max-height: calc(100vh - 96px);
  background: linear-gradient(180deg, #11233f 0%, #0b1a2e 100%);
  color: #e9eef7;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  box-shadow: -10px 14px 36px rgba(0, 0, 0, 0.45);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  z-index: 2147483645;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.05);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pd-history-panel.pd-open { transform: translateX(0); }
.pd-history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600; font-size: 13px;
}
.pd-history-body {
  overflow-y: auto;
  padding: 6px 0;
}
.pd-history-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pd-history-row-skip { grid-template-columns: 1fr; }
.pd-history-chip {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 4px 6px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pd-history-chip-human     { background: rgba(45, 171, 95, 0.22); color: #b3ecc6; }
.pd-history-chip-voicemail { background: rgba(230, 137, 43, 0.22); color: #f5c79a; }
.pd-history-chip-no_answer { background: rgba(155, 168, 180, 0.18); color: #cfd9e3; }
.pd-history-chip-ended     { background: rgba(230, 57, 70, 0.20); color: #f5b3b8; }
.pd-history-chip-skip      { background: rgba(230, 192, 43, 0.22); color: #f5dfa0; }
.pd-history-name {
  font-size: 13px; font-weight: 600; color: #e9eef7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-history-meta {
  font-size: 11px; color: #9fb1c9; margin-top: 2px;
}
.pd-history-empty {
  padding: 28px 14px; text-align: center;
  color: #6b8095; font-size: 13px; font-style: italic;
}
.pd-history-section {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  color: #8a96a4; text-transform: uppercase;
  padding: 14px 14px 6px;
}
/* Footer link to the dashboard's full session list */
.pd-history-fulllink {
  display: block;
  margin: 14px 14px 4px;
  padding: 8px 10px;
  background: rgba(45, 171, 95, 0.1);
  border: 1px solid rgba(45, 171, 95, 0.3);
  border-radius: 6px;
  color: #6fde9c;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: background 0.12s, border-color 0.12s;
}
.pd-history-fulllink:hover {
  background: rgba(45, 171, 95, 0.2);
  border-color: rgba(45, 171, 95, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────
   Jersey-shaped stats dropdown — slides DOWN from the top of the panel
   ─────────────────────────────────────────────────────────────────── */
.pd-jersey-drop {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -100%);
  width: 240px;
  padding: 12px 12px 16px;
  background: linear-gradient(180deg, #0e1a2c 0%, #0b1224 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
  z-index: 9;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.05);
  pointer-events: auto;
}
.pd-jersey-drop.pd-open {
  transform: translate(-50%, 0);
}
.pd-jersey-svg {
  width: 100%; height: auto;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
.pd-jersey-stats {
  margin-top: 6px;
  font-size: 12px;
  color: #cfe0fa;
}
.pd-jersey-row {
  display: flex; justify-content: space-between;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pd-jersey-row strong { color: #fff; font-weight: 700; }
.pd-jersey-row-foot {
  border-bottom: 0;
  margin-top: 4px;
  font-size: 10px;
  color: #6b8095;
  justify-content: center;
}
.pd-jersey-close {
  position: absolute; top: 4px; right: 6px;
  z-index: 10;
}

/* ─────────────────────────────────────────────────────────────────────
   Enhanced session-summary additions: percentage bars + skipped list
   ─────────────────────────────────────────────────────────────────── */
.pd-ssum-section {
  font-size: 10px; font-weight: 700; letter-spacing: 0.7px;
  color: #8a96a4; text-transform: uppercase;
  margin: 14px 0 6px;
}
.pd-ssum-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 70px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pd-ssum-bar-lbl {
  font-size: 12px; color: #cfe0fa;
}
.pd-ssum-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.pd-ssum-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.35s ease-out;
}
.pd-ssum-bar-fill.pd-bar-good  { background: linear-gradient(90deg, #1d6a3d, #2dab5f); }
.pd-ssum-bar-fill.pd-bar-vm    { background: linear-gradient(90deg, #b5671a, #e6892b); }
.pd-ssum-bar-fill.pd-bar-noans { background: linear-gradient(90deg, #44525e, #88909a); }
.pd-ssum-bar-pct {
  font-size: 11px; color: #9fb1c9; text-align: right;
  font-variant-numeric: tabular-nums;
}
.pd-ssum-skipped {
  max-height: 140px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 8px;
}
.pd-ssum-skipped-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
}
.pd-ssum-skipped-row:last-child { border-bottom: 0; }
.pd-ssum-skipped-name { color: #e9eef7; font-weight: 500; }
.pd-ssum-skipped-reason { color: #9fb1c9; font-size: 11px; }

/* Monthly Usage progress bar (end-of-session summary) */
.pd-ssum-monthly {
  margin-bottom: 6px;
}
.pd-ssum-monthly-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
}
.pd-ssum-monthly-fill {
  height: 100%;
  background: linear-gradient(90deg, #1b4277, #3b7cc4);
  border-radius: 5px;
  transition: width 0.4s ease-out;
}
.pd-ssum-monthly-meta {
  font-size: 11px;
  color: #9fb1c9;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Dispositions breakdown */
.pd-ssum-disp {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 10px;
}
.pd-ssum-disp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
}
.pd-ssum-disp-row:last-child { border-bottom: 0; }
.pd-ssum-disp-name {
  color: #cfe0fa;
  font-weight: 500;
}
.pd-ssum-disp-count {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   Three-state size: full | mini | ball
   - .pd-size-full   = default rendering (everything visible, no hiding)
   - .pd-size-mini   = compact horizontal strip with live counters + close
   - .pd-size-ball   = tiny soccer-ball bubble; click to restore full
   ─────────────────────────────────────────────────────────────────── */

/* Hidden by default; revealed only in the matching size mode. */
.pd-ball-bubble {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #0b1a2e;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.12);
}
.pd-ball-bubble:hover { transform: scale(1.06); transition: transform 0.12s ease; }
.pd-ball-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e63946;
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.pd-ball-badge:empty { display: none; }
/* ──────────────────────────────────────────────────────────────────
   v1.21 mini card — Tally-style 2.5″ compact dashboard (Phone theme)
   or 3″ circular soccer-ball watermark (Soccer theme). Same DOM, the
   skin classes reshape the container.
   ────────────────────────────────────────────────────────────────── */
.pd-mini-card {
  display: none;
  position: relative;
  width: 240px;       /* 2.5″ at 96dpi */
  min-height: 240px;
  background: linear-gradient(180deg, #1f1115 0%, #0f0608 100%);
  border-radius: 14px;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  color: #e9eef7;
  font-size: 12px;
  padding: 10px 12px 12px;
  overflow: hidden;
}
.pd-mini-fg {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Header row — logo + version on left, History/End on right */
.pd-mini-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.pd-mini-brand {
  display: flex; align-items: center; gap: 6px;
}
.pd-mini-logo {
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  transition: background 0.12s, transform 0.05s;
}
.pd-mini-logo:hover { background: rgba(255,255,255,0.08); }
.pd-mini-logo:active { transform: scale(0.95); }
/* Inside button labels — shown on Phone, hidden on Soccer */
.pd-mini-btn-label { display: inline; }
.pd-mini-btn-icon  { display: inline-block; margin-right: 4px; }
.pd-mini-btn-icon-end { color: #fff; }
.pd-mini-ver {
  color: #b04050;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.pd-mini-head-btns { display: flex; gap: 4px; align-items: center; }
.pd-mini-headbtn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd8e3;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.1s, background 0.12s;
  font-family: inherit;
}
.pd-mini-headbtn:hover { background: rgba(255,255,255,0.12); }
/* Square icon-style mini buttons (skin-toggle / restore / end) */
.pd-mini-iconbtn {
  width: 22px; height: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd8e3;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
  line-height: 1;
  transition: filter 0.1s, background 0.12s;
}
.pd-mini-iconbtn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.pd-mini-iconbtn.pd-mini-iconbtn-end {
  background: linear-gradient(135deg, #b02432, #e63946);
  color: #fff; border-color: transparent;
  font-size: 14px; font-weight: 700;
}
.pd-mini-iconbtn.pd-mini-iconbtn-end:hover { filter: brightness(1.12); }
/* Skin-toggle in the mini head — slightly larger emoji target */
.pd-mini-iconbtn.pd-mini-skin-toggle {
  width: 24px; height: 24px;
  font-size: 14px;
}

/* ── Phone-theme mini: clean v1.21.0 look ──────────────────────────
   Hide the skin-toggle (use Settings instead) and the dedicated
   restore button (the logo doubles as restore). Show the labels
   inside History / End buttons so they read as proper pills. */
#pd-root.pd-skin-phone .pd-mini-iconbtn.pd-mini-skin-toggle,
#pd-root.pd-skin-phone .pd-mini-iconbtn.pd-mini-restore-btn {
  display: none;
}
#pd-root.pd-skin-phone .pd-mini-headbtn {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 999px;
}
#pd-root.pd-skin-phone .pd-mini-headbtn-end {
  background: linear-gradient(135deg, #b02432, #e63946);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
#pd-root.pd-skin-phone .pd-mini-headbtn-end:hover {
  filter: brightness(1.12);
}

/* ── Soccer-theme mini: keep v1.22.1 layout ────────────────────────
   Skin-toggle visible. Restore icon visible. History/End buttons
   are icon-only (hide the labels inside them). End button gets a
   tiny round × icon styling instead of the full pill. */
#pd-root.pd-skin-goal .pd-mini-btn-label { display: none; }
#pd-root.pd-skin-goal .pd-mini-btn-icon { margin-right: 0; }
#pd-root.pd-skin-goal .pd-mini-headbtn {
  padding: 3px 7px;
  font-size: 11px;
  border-radius: 6px;
}
#pd-root.pd-skin-goal .pd-mini-headbtn-end {
  background: linear-gradient(135deg, #b02432, #e63946);
  color: #fff;
  border-color: transparent;
  width: 22px; height: 22px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#pd-root.pd-skin-goal .pd-mini-btn-icon-end { font-size: 12px; }
/* Three stat boxes in a row */
.pd-mini-stats3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(176, 64, 80, 0.35);
  border-radius: 8px;
  padding: 6px 4px;
}
.pd-mini-stat { text-align: center; padding: 2px 0; }
.pd-mini-stat-lbl {
  color: #b04050;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}
.pd-mini-stat-val {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  color: #f1f3f7;
}
/* Big Start Auto-Click button (full width) */
.pd-mini-autoclick {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cfd8e3;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.1s, background 0.12s;
}
.pd-mini-autoclick:hover:not([disabled]) { background: rgba(255,255,255,0.1); }
.pd-mini-autoclick[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Dial row — input + green call + red end-call */
.pd-mini-dialrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px;
  align-items: center;
}
.pd-mini-num {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  padding: 7px 10px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  min-width: 0;
}
.pd-mini-num::placeholder { color: rgba(255,255,255,0.4); font-size: 10.5px; }
.pd-mini-num:focus { border-color: rgba(45, 171, 95, 0.5); }
.pd-mini-call,
.pd-mini-endcall {
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  transition: filter 0.1s, transform 0.05s;
}
.pd-mini-call:hover, .pd-mini-endcall:hover { filter: brightness(1.12); }
.pd-mini-call:active, .pd-mini-endcall:active { transform: translateY(1px); }
.pd-mini-call {
  background: linear-gradient(135deg, #2dab5f, #1e7d44);
  box-shadow: 0 3px 8px rgba(45,171,95,0.35);
}
.pd-mini-endcall {
  background: linear-gradient(135deg, #b02432, #e63946);
  box-shadow: 0 3px 8px rgba(230,57,70,0.35);
}
.pd-mini-endcall[disabled] { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
/* Status line below the dial row */
.pd-mini-status {
  background: rgba(45, 171, 95, 0.08);
  border: 1px solid rgba(45, 171, 95, 0.3);
  color: #bdf4d2;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Settings button at the bottom */
.pd-mini-settings {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #b8c0c8;
  padding: 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.pd-mini-settings:hover { background: rgba(255,255,255,0.08); color: #fff; }
/* Restore-to-full button (top-right corner) */
.pd-mini-card .pd-mini-restore {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 0; border-radius: 4px;
  color: #cfd8e3;
  font-size: 11px;
  cursor: pointer;
  display: none;            /* hidden — head buttons cover this; keep for fallback */
  z-index: 3;
}

/* Soccer-ball watermark layer (only painted on Soccer theme).
   v1.22.1: realistic sphere shading via SVG radial gradient + a brighter
   highlight on the upper-left that simulates a light source coming from
   above. The black pentagons are slightly inset so the white seams read
   as raised stitching. The whole ball gets a subtle inner-shadow ring
   so it looks like a sphere, not a sticker. */
.pd-mini-ball-bg { display: none; }
#pd-root.pd-skin-goal .pd-mini-ball-bg {
  display: block;
  position: absolute;
  inset: 0;
  /* SVG-encoded ball with: radial-gradient body, soft highlight overlay,
     thicker black pentagons, hex seams, edge shadow vignette. */
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g1%27%20cx%3D%2738%25%27%20cy%3D%2730%25%27%20r%3D%2780%25%27%3E%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23ffffff%27%2F%3E%3Cstop%20offset%3D%2755%25%27%20stop-color%3D%27%23eaeaea%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%238a8a8a%27%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%27g2%27%20cx%3D%2734%25%27%20cy%3D%2728%25%27%20r%3D%2728%25%27%3E%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%270.85%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%27g3%27%20cx%3D%2750%25%27%20cy%3D%2750%25%27%20r%3D%2750%25%27%3E%3Cstop%20offset%3D%2782%25%27%20stop-color%3D%27%23000000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23000000%27%20stop-opacity%3D%270.45%27%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2796%27%20fill%3D%27url(%23g1)%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.5%27%2F%3E%3Cpolygon%20points%3D%27100%2C66%20128%2C88%20118%2C123%2082%2C123%2072%2C88%27%20fill%3D%27%23111%27%2F%3E%3Cpolygon%20points%3D%27156%2C66%20176%2C82%20170%2C108%20144%2C108%20138%2C82%27%20fill%3D%27%23111%27%2F%3E%3Cpolygon%20points%3D%27144%2C146%20166%2C158%20163%2C180%20142%2C182%20128%2C166%27%20fill%3D%27%23111%27%2F%3E%3Cpolygon%20points%3D%2756%2C146%2072%2C166%2058%2C182%2037%2C180%2034%2C158%27%20fill%3D%27%23111%27%2F%3E%3Cpolygon%20points%3D%2744%2C66%2062%2C82%2056%2C108%2030%2C108%2024%2C82%27%20fill%3D%27%23111%27%2F%3E%3Cline%20x1%3D%27100%27%20y1%3D%2766%27%20x2%3D%27100%27%20y2%3D%2728%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.5%27%2F%3E%3Cline%20x1%3D%27128%27%20y1%3D%2788%27%20x2%3D%27156%27%20y2%3D%2766%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.5%27%2F%3E%3Cline%20x1%3D%27118%27%20y1%3D%27123%27%20x2%3D%27144%27%20y2%3D%27146%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.5%27%2F%3E%3Cline%20x1%3D%2782%27%20y1%3D%27123%27%20x2%3D%2756%27%20y2%3D%27146%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.5%27%2F%3E%3Cline%20x1%3D%2772%27%20y1%3D%2788%27%20x2%3D%2744%27%20y2%3D%2766%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2796%27%20fill%3D%27url(%23g3)%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2796%27%20fill%3D%27url(%23g2)%27%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Bumped opacity since the watermark is the visual identity of the
     Soccer mini view. Foreground controls have their own dark backgrounds
     so they remain easily readable on top. */
  opacity: 0.32;
  pointer-events: none;
  z-index: 1;
}

/* ── MINI MODE active — Phone Theme: 2.5″ rectangle ───────────── */
#pd-root.pd-size-mini .pd-phone {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  width: auto !important;
  height: auto !important;
}
#pd-root.pd-size-mini .pd-statusbar,
#pd-root.pd-size-mini .pd-header,
#pd-root.pd-size-mini .pd-screen,
#pd-root.pd-size-mini .pd-footer,
#pd-root.pd-size-mini .pd-side,
#pd-root.pd-size-mini .pd-goal-ball,
#pd-root.pd-size-mini .pd-goal-ball-trail,
#pd-root.pd-size-mini .pd-ball-bubble,
#pd-root.pd-size-mini .pd-gesture,
#pd-root.pd-size-mini .pd-phone::before,
#pd-root.pd-size-mini .pd-phone::after {
  display: none !important;
}
#pd-root.pd-size-mini .pd-mini-card {
  display: block;
}
/* Resize handle stays visible on mini so it's still scalable per request */
#pd-root.pd-size-mini .pd-resize-handle {
  z-index: 12;
  left: 4px; top: 4px;
}

/* ── MINI MODE active — Soccer Theme: 3″ circular ─────────────── */
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-card {
  width: 288px;             /* 3″ at 96dpi */
  height: 288px;
  min-height: 0;
  border-radius: 50%;
  /* v1.31.80 — Clip contents to a circle so the ball PNG's transparent
     corners stop showing as checkered. */
  overflow: hidden;
  clip-path: circle(50%);
  /* Soft dark backdrop — the realistic ball watermark sits on top of it */
  background: radial-gradient(circle at 50% 38%, #232830 0%, #11151c 60%, #06080c 100%);
  padding: 22px 26px 24px;  /* extra padding pulls inner controls inward
                                so they sit comfortably inside the circle */
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(255, 255, 255, 0.22) inset,
    0 0 0 6px rgba(0, 0, 0, 0.25);
}
/* v1.31.80 — Belt and suspenders: clip the ball-bg watermark layer
   itself to a circle too, so even if its container leaks, no
   checker-pattern transparency shows. */
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-ball-bg {
  clip-path: circle(50%);
  border-radius: 50%;
  overflow: hidden;
}
/* v1.31.80 — Spacing between mini-UI buttons (bumped from 4 → 12 px
   so all the overlay buttons are clearly separated vertically and
   all visible without crowding). */
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg {
  gap: 12px !important;
  align-items: stretch !important;
}
/* Stats row dead-center on x-axis. width:fit-content shrinks the grid
   to its content width so the auto margins actually center it. */
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-stats3 {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-self: center !important;
  justify-content: center !important;
  grid-template-columns: repeat(3, max-content) !important;
  column-gap: 14px !important;
}
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-head { gap: 4px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-iconbtn {
  width: 18px; height: 18px; font-size: 10px;
}
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-iconbtn.pd-mini-iconbtn-end {
  font-size: 12px;
}
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-skin-toggle {
  width: 20px; height: 20px; font-size: 12px;
}
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-headbtn {
  padding: 2px 6px; font-size: 10px;
}
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-ver { font-size: 10px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-stats3 { padding: 4px 3px; gap: 3px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-stat-lbl { font-size: 7.5px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-stat-val { font-size: 12px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-num { padding: 5px 8px; font-size: 10px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-call,
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-endcall { width: 26px; height: 26px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-call svg,
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-endcall svg { width: 13px; height: 13px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-autoclick { padding: 5px; font-size: 10.5px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-status { padding: 3px 6px; font-size: 9.5px; }
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-settings { padding: 4px; font-size: 10px; }
/* Foreground content readability — semi-opaque dark backgrounds on each
   block so the watermark stays visible behind but text never fights it. */
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-stats3 {
  background: rgba(0, 0, 0, 0.55);
}
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-autoclick {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.14);
}
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-num {
  background: rgba(0, 0, 0, 0.55);
}
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-status {
  background: rgba(0, 0, 0, 0.55);
}
#pd-root.pd-skin-goal.pd-size-mini .pd-mini-settings {
  background: rgba(0, 0, 0, 0.55);
}

/* BALL MODE — tiny soccer-ball bubble, everything else hidden */
#pd-root.pd-size-ball .pd-phone {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  width: 64px; height: 64px;
}
#pd-root.pd-size-ball .pd-screen,
#pd-root.pd-size-ball .pd-side,
#pd-root.pd-size-ball .pd-resize-handle,
#pd-root.pd-size-ball .pd-goal-ball,
#pd-root.pd-size-ball .pd-goal-ball-trail,
#pd-root.pd-size-ball .pd-mini-strip,
#pd-root.pd-size-ball .pd-phone::before,
#pd-root.pd-size-ball .pd-phone::after {
  display: none !important;
}
#pd-root.pd-size-ball .pd-ball-bubble {
  display: flex;
}

/* ─────────────────────────────────────────────────────────────────────
   Inline action pills (History + Jersey)
   Moved out of the header so the goal-skin scoring ball in the upper-
   right corner doesn't sit on top of them. Sit just below the title
   header, full-width, with comfortable click targets.
   ─────────────────────────────────────────────────────────────────── */
.pd-inline-actions {
  display: flex;
  gap: 8px;
  padding: 8px 14px 0;
  flex-wrap: wrap;
}
.pd-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #cfe0fa;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.05s ease;
}
.pd-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.pd-pill-btn:active {
  transform: translateY(1px);
}
.pd-pill-icon {
  font-size: 14px;
  line-height: 1;
}

/* ── Three-state size — corrected dimensions ──────────────────────
   Ball  — ~0.5 inch (~48px) circle. Tiny "get out of my way" mode.
   Mini  — compact 220x130 summary strip (about 1/4 of the smallest the
           main panel can be reduced to via the corner-resize handle).
   Full  — default rendering.
   ─────────────────────────────────────────────────────────────── */
#pd-root.pd-size-ball .pd-phone {
  width: 48px !important;
  height: 48px !important;
}
#pd-root.pd-size-ball .pd-ball-bubble {
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}
#pd-root.pd-size-ball .pd-ball-badge {
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  padding: 0 4px;
}

#pd-root.pd-size-mini .pd-mini-strip {
  min-width: 220px;
  padding: 10px 14px;
  border-radius: 14px;
}
#pd-root.pd-size-mini .pd-mini-stats {
  font-size: 13px;
}

/* When mini-mode is showing, hide the inline action pills too — they
   live in the body which is hidden anyway, but be explicit. */
#pd-root.pd-size-mini .pd-inline-actions,
#pd-root.pd-size-ball .pd-inline-actions {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Mini-strip layout: stats row + three-button action row
   ─────────────────────────────────────────────────────────────────── */
.pd-mini-strip {
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.pd-mini-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-mini-row-stats { justify-content: space-between; }
.pd-mini-row-btns  { gap: 6px; }
.pd-mini-restore {
  flex: 0 0 auto;
  font-size: 12px;
}
.pd-mini-btn {
  flex: 1;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.12s ease, transform 0.05s ease;
  color: #fff;
}
.pd-mini-btn:hover:not([disabled]) { filter: brightness(1.12); }
.pd-mini-btn:active:not([disabled]) { transform: translateY(1px); }
.pd-mini-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.7);
}
.pd-mini-btn-pause   { background: linear-gradient(135deg, #b5671a, #e6892b); }
.pd-mini-btn-endcall { background: linear-gradient(135deg, #b02432, #e63946); }
.pd-mini-btn-endsess { background: linear-gradient(135deg, #44525e, #6b8095); }

/* ─────────────────────────────────────────────────────────────────────
   Settings drawer — embedded popup, slide-out from the right edge
   ─────────────────────────────────────────────────────────────────── */
.pd-settings-drawer {
  position: fixed;
  right: 0; top: 64px;
  width: 380px;
  max-height: calc(100vh - 96px);
  background: linear-gradient(180deg, #11233f 0%, #0b1a2e 100%);
  color: #e9eef7;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  box-shadow: -10px 14px 36px rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  z-index: 2147483645;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.05);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pd-settings-drawer.pd-open { transform: translateX(0); }
.pd-settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-weight: 600; font-size: 13px;
}
.pd-settings-body {
  overflow-y: auto;
  padding: 14px;
  font-size: 13px;
}
.pd-settings-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.7px;
  color: #8a96a4; text-transform: uppercase;
  margin: 14px 0 6px;
}
.pd-settings-account {
  background: rgba(45,171,95,0.08);
  border: 1px solid rgba(45,171,95,0.45);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.pd-settings-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  color: #9fb1c9;
}
.pd-settings-row strong {
  color: #e9eef7; font-weight: 600;
  max-width: 65%; word-break: break-word; text-align: right;
}
.pd-settings-input {
  width: 100%;
  padding: 9px 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #e9eef7;
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  outline: none;
  box-sizing: border-box;
}
.pd-settings-input:focus {
  border-color: #3b7cc4;
  background: rgba(59,124,196,0.08);
}
.pd-settings-hint {
  font-size: 11px;
  color: #6b8095;
  margin-top: 4px;
  line-height: 1.4;
}
.pd-settings-opt {
  color: #6b8095; font-weight: 400;
}
.pd-settings-skin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pd-settings-skin-opt {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
}
.pd-settings-skin-opt input { margin: 0; accent-color: #e63946; }
.pd-settings-skin-opt.selected {
  border-color: #e63946;
  background: rgba(230,57,70,0.1);
}
.pd-settings-saved {
  position: sticky;
  bottom: 0;
  margin: 14px -14px -14px;
  padding: 10px 14px;
  background: rgba(45,171,95,0.18);
  color: #b3ecc6;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.pd-settings-saved.pd-show { opacity: 1; }

/* Setup link in the footer — labeled gear button that opens the
   settings drawer in-panel (replaces the old toolbar-popup gear). */
.pd-setup-link {
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Setup-drawer sign-in pane */
.pd-code-input {
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 22px;
  letter-spacing: 8px;
  font-weight: 700;
}
.pd-signin-msg {
  margin-top: 8px;
  font-size: 12px;
  min-height: 14px;
  line-height: 1.35;
}
.pd-signin-msg.ok  { color: #2dab5f; }
.pd-signin-msg.err { color: #ff6672; }

/* Setup pill — red so it stands out from History / Stats jersey, since
   it's the action that opens the most-frequently-used config drawer. */
.pd-pill-btn#pd-setup-btn,
#pd-root .pd-pill-btn#pd-setup-btn {
  background: linear-gradient(135deg, #b02432, #e63946);
  border-color: rgba(255, 110, 120, 0.45);
  color: #fff;
}
#pd-root .pd-pill-btn#pd-setup-btn:hover {
  background: linear-gradient(135deg, #c1283a, #ff4252);
  filter: brightness(1.08);
}

/* Theme toggle next to the dialer title — emoji icon button that flips
   the panel between phone and goal skin in place. */
.pd-skin-toggle {
  margin-left: 6px;
  font-size: 14px;
  width: 26px; height: 22px;
}
.pd-skin-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Dial mode (Phone vs Desktop) selector in Setup drawer */
.pd-settings-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-settings-mode-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}
.pd-settings-mode-opt input { margin: 0; accent-color: #2dab5f; }
.pd-settings-mode-opt.selected {
  border-color: #2dab5f;
  background: rgba(45, 171, 95, 0.1);
}
.pd-settings-mode-opt.pd-settings-mode-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pd-settings-mode-opt.pd-settings-mode-disabled:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Desktop status banner (inside Setup drawer) */
.pd-desk-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 12px;
}
.pd-desk-pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6b8095;
  flex: 0 0 auto;
}
.pd-desk-pip.ok  { background: #2dab5f; box-shadow: 0 0 6px rgba(45, 171, 95, 0.6); }
.pd-desk-pip.err { background: #e63946; box-shadow: 0 0 6px rgba(230, 57, 70, 0.6); }
.pd-desk-label { flex: 1; color: #e9eef7; }
.pd-desk-grantbtn {
  background: #1f3557;
  color: #cfe0fa;
  border: 0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.pd-desk-grantbtn:hover { filter: brightness(1.15); }

/* Desktop status pip in panel header (between action pills and body) */
.pd-desk-pip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 8px 6px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 11px;
  color: #c8d4e8;
}
.pd-desk-mini-pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6b8095;
  flex: 0 0 auto;
}
.pd-desk-mini-pip.ok  { background: #2dab5f; box-shadow: 0 0 5px rgba(45, 171, 95, 0.65); }
.pd-desk-mini-pip.err { background: #e63946; box-shadow: 0 0 5px rgba(230, 57, 70, 0.65); }
.pd-desk-mini-pip.warn { background: #e6892b; }
.pd-desk-mini-lbl { flex: 1; }

/* Test-mode banner — bright yellow stripe across the top of the panel
   whenever the agent has flipped Test mode on. Designed to be impossible
   to miss so an agent doesn't accidentally start a real session in test
   mode. */
.pd-test-banner {
  margin: 4px 8px 8px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #ffd166 0%, #ffe066 100%);
  color: #4a2a00;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-align: center;
  border: 2px solid #b8860b;
  border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset;
  animation: pd-test-pulse 2.4s infinite ease-in-out;
}
@keyframes pd-test-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 0 0 0 rgba(255, 209, 102, 0.6); }
  50%      { box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 0 12px 2px rgba(255, 209, 102, 0.8); }
}

/* Test-mode toggle row — same shape as the double-tap toggle, plus a
   yellow accent border when active so it's visually consistent with
   the banner above. */
.pd-test-mode-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-top: 6px;
  background: rgba(255, 209, 102, 0.06);
  border: 1px solid rgba(255, 209, 102, 0.18);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.18s;
}
.pd-test-mode-row:hover {
  background: rgba(255, 209, 102, 0.10);
  border-color: rgba(255, 209, 102, 0.30);
}
.pd-test-mode-row.pd-test-on {
  background: rgba(255, 209, 102, 0.16);
  border-color: rgba(255, 209, 102, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.25);
}
.pd-test-mode-row input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #ffd166;
  flex: 0 0 auto;
}
.pd-test-mode-row span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pd-tm-label {
  font-weight: 700;
  color: #ffe6a0;
}
.pd-tm-hint {
  color: #b8a066;
  font-size: 11px;
  line-height: 1.35;
}

/* ── Compact toggle row (v1.18.1) ──────────────────────────────────
   Single-line toggle: checkbox + label + small ⓘ info button.
   Replaces the older verbose pd-double-tap-row / pd-test-mode-row
   pattern that included a sub-hint paragraph under the label.
   Help text now lives in a click-to-reveal popover (.pd-toggle-popover). */
.pd-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-top: 5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
}
.pd-toggle-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.pd-toggle-row input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: #2dab5f;
}
.pd-toggle-label {
  flex: 1;
  font-weight: 600;
  color: #e9eef7;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-toggle-row.pd-toggle-on {
  background: rgba(45, 171, 95, 0.08);
  border-color: rgba(45, 171, 95, 0.3);
}
/* Test mode is a special case — yellow tint when ON to match the warning banner */
.pd-toggle-row.pd-toggle-warn-on {
  background: rgba(255, 209, 102, 0.10);
  border-color: rgba(255, 209, 102, 0.4);
}
/* Test mode lives at the bottom of the toggle list. A small separator
   visually groups it apart from the operational toggles above it. */
.pd-toggle-row.pd-toggle-test {
  margin-top: 10px;
  position: relative;
}
.pd-toggle-row.pd-toggle-test::before {
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  top: -6px;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.pd-toggle-info {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.55);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: inherit;
  font-style: italic;
  transition: all 0.12s;
}
.pd-toggle-info:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #e9eef7;
  background: rgba(255, 255, 255, 0.08);
}

/* Shared popover — appears next to the clicked ⓘ button. */
.pd-toggle-popover {
  position: fixed;
  z-index: 10001;
  background: rgba(20, 22, 28, 0.97);
  color: #e9eef7;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 290px;
  min-width: 200px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms, transform 140ms;
  font-family: inherit;
}
.pd-toggle-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.pd-toggle-popover .pd-pop-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: #ffd166;
  font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────
   MEDIUM SKIN (v1.19.1) — clean rectangular dashboard layout.
   No phone frame, no goal frame, no decorative skin elements. Just
   a tight panel with red header / dark body / scoreboard-style stat
   cards. Trades visual flair for information density.
   ───────────────────────────────────────────────────────────────── */

#pd-root.pd-skin-medium .pd-phone {
  width: 460px;
  padding: 0;
  background: #1a1d24;
  border: 1px solid #2a2e38;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
/* Side power buttons + gesture bar + camera punch hole — all hidden */
#pd-root.pd-skin-medium .pd-side,
#pd-root.pd-skin-medium .pd-gesture,
#pd-root.pd-skin-medium .pd-phone::before,
#pd-root.pd-skin-medium .pd-phone::after,
#pd-root.pd-skin-medium .pd-goal-ball,
#pd-root.pd-skin-medium .pd-goal-ball-trail {
  display: none;
}

/* Top status bar repurposed as the brand header */
#pd-root.pd-skin-medium .pd-statusbar {
  background: linear-gradient(135deg, #b02432 0%, #8a1d28 100%);
  height: 38px;
  border-bottom: 1px solid #2a2e38;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  border-radius: 12px 12px 0 0;
}
#pd-root.pd-skin-medium .pd-statusbar > * { display: none; }
#pd-root.pd-skin-medium .pd-statusbar::before {
  content: "Power Dialer";
  display: block;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.3px;
}
/* Header buttons (-,O,⛶,×) — show in the status bar */
#pd-root.pd-skin-medium .pd-header {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  z-index: 10;
}
#pd-root.pd-skin-medium .pd-iconbtn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  width: 24px;
  height: 22px;
  font-size: 13px;
  border-radius: 4px;
  margin-left: 3px;
}
#pd-root.pd-skin-medium .pd-iconbtn:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* The screen area becomes a flat dark body */
#pd-root.pd-skin-medium .pd-screen {
  background: #1a1d24;
  border-radius: 0;
  min-height: 0;
  padding: 0;
  border: 0;
}
#pd-root.pd-skin-medium .pd-body {
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:
    "profile  profile   stats"
    "status   status    stats"
    "calls    prospect  toggles"
    "end      end       end"
    "info     info      info";
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
}
#pd-root.pd-skin-medium .pd-profile-row { grid-area: profile; }
#pd-root.pd-skin-medium .pd-status-row  { grid-area: status; }
#pd-root.pd-skin-medium .pd-stats       { grid-area: stats; align-self: start; }
#pd-root.pd-skin-medium #pd-session-area { display: contents; }
#pd-root.pd-skin-medium .pd-session-grid { display: contents; }
#pd-root.pd-skin-medium .pd-call-stack   { grid-area: calls; }
#pd-root.pd-skin-medium .pd-toggle-stack { grid-area: toggles; }
#pd-root.pd-skin-medium #pd-end          { grid-area: end; margin-top: 4px; }
#pd-root.pd-skin-medium #pd-prospect-area { grid-area: prospect; align-self: stretch; }
#pd-root.pd-skin-medium .pd-info         { grid-area: info; }
#pd-root.pd-skin-medium .pd-status-row .pd-status-spacer { display: none; }
#pd-root.pd-skin-medium .pd-status-row .pd-session-pill { margin-left: 8px; }
#pd-root.pd-skin-medium .pd-incall {
  max-width: none;
  margin: 0;
  padding-bottom: 0;
}
#pd-root.pd-skin-medium .pd-incall-avatar {
  width: 48px; height: 48px;
  margin: 0 auto 6px;
  font-size: 17px;
}
#pd-root.pd-skin-medium .pd-incall-num { font-size: 14px; }
#pd-root.pd-skin-medium .pd-incall-status { padding: 3px 8px; font-size: 10px; }
#pd-root.pd-skin-medium .pd-incall-btnrow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
#pd-root.pd-skin-medium .pd-callbtn-ball,
#pd-root.pd-skin-medium .pd-callbtn-icon { width: 38px; height: 38px; }
#pd-root.pd-skin-medium .pd-callbtn-icon { font-size: 17px; }
#pd-root.pd-skin-medium .pd-callbtn-lbl { font-size: 10px; }
#pd-root.pd-skin-medium .pd-transcript { max-height: 90px; }
#pd-root.pd-skin-medium .pd-incall-tr  { max-height: 70px; margin: 6px 4px 0; font-size: 10px; }

/* Profile row + status row pushed up */
#pd-root.pd-skin-medium .pd-profile-row {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
}
#pd-root.pd-skin-medium .pd-status-row {
  font-size: 11px;
  color: #9fb1c9;
  margin-bottom: 10px;
}

/* Scoreboard stats row — tighter version of the goal-skin tile look */
#pd-root.pd-skin-medium .pd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
#pd-root.pd-skin-medium .pd-stats > div {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 8px 6px;
  text-align: center;
}

/* Inline action pills — compact red-tinted to match header */
#pd-root.pd-skin-medium .pd-inline-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-bottom: 8px;
}
#pd-root.pd-skin-medium .pd-pill-btn {
  font-size: 10px;
  padding: 6px 4px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}
#pd-root.pd-skin-medium .pd-pill-btn .pd-pill-icon { font-size: 13px; }

/* Footer trimmed */
#pd-root.pd-skin-medium .pd-footer {
  padding: 6px 10px;
  font-size: 10px;
  color: #6b8095;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #15171c;
  border-radius: 0 0 12px 12px;
}

/* Inline-action and toggle rows look slightly tighter on Medium */
#pd-root.pd-skin-medium .pd-toggle-row {
  padding: 5px 8px;
  margin-top: 3px;
}
#pd-root.pd-skin-medium .pd-section-label {
  font-size: 10px;
  margin-top: 8px;
  margin-bottom: 4px;
  color: #6b8095;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
}

/* Maximized variant */
#pd-root.pd-skin-medium.pd-maximized .pd-phone { width: 540px; }

/* Mini / ball size states reuse the same visuals as other skins */

/* ─────────────────────────────────────────────────────────────────
   SOCCER MEDIUM SKIN (v1.19.3) — compact dashboard with a large
   soccer-ball watermark behind the panel content. Same size + density
   as the regular Medium skin, but goal-skin colors and a ball
   illustration filling the body so it visually matches the soccer
   theme without the bulky goal-frame chrome.
   ───────────────────────────────────────────────────────────────── */

#pd-root.pd-skin-soccer-medium .pd-phone {
  width: 460px;
  padding: 0;
  background:
    linear-gradient(180deg, #0a4f24 0%, #145c30 60%, #0a4f24 100%);
  border: 2px solid #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  position: relative;
}
/* Large soccer ball watermark — sits behind everything via ::after.
   ~290px ball, ~22% opacity. Generated inline as an SVG data URI so
   no extra HTTP request needed. */
#pd-root.pd-skin-soccer-medium .pd-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2792%27%20fill%3D%27%23fff%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%2F%3E%3Cpolygon%20points%3D%27100%2C70%20126%2C90%20117%2C120%2083%2C120%2074%2C90%27%20fill%3D%27%23000%27%2F%3E%3Cpolygon%20points%3D%27154%2C68%20174%2C84%20168%2C108%20144%2C108%20138%2C84%27%20fill%3D%27%23000%27%2F%3E%3Cpolygon%20points%3D%27143%2C148%20165%2C160%20162%2C180%20142%2C182%20130%2C167%27%20fill%3D%27%23000%27%2F%3E%3Cpolygon%20points%3D%2757%2C148%2070%2C167%2058%2C182%2038%2C180%2035%2C160%27%20fill%3D%27%23000%27%2F%3E%3Cpolygon%20points%3D%2746%2C68%2062%2C84%2056%2C108%2032%2C108%2026%2C84%27%20fill%3D%27%23000%27%2F%3E%3Cline%20x1%3D%27100%27%20y1%3D%2770%27%20x2%3D%27100%27%20y2%3D%2730%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%2F%3E%3Cline%20x1%3D%27126%27%20y1%3D%2790%27%20x2%3D%27154%27%20y2%3D%2768%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%2F%3E%3Cline%20x1%3D%27117%27%20y1%3D%27120%27%20x2%3D%27143%27%20y2%3D%27148%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%2F%3E%3Cline%20x1%3D%2783%27%20y1%3D%27120%27%20x2%3D%2757%27%20y2%3D%27148%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%2F%3E%3Cline%20x1%3D%2774%27%20y1%3D%2790%27%20x2%3D%2746%27%20y2%3D%2768%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-size: 290px 290px;
  background-repeat: no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
/* All actual content sits ABOVE the watermark */
#pd-root.pd-skin-soccer-medium .pd-statusbar,
#pd-root.pd-skin-soccer-medium .pd-header,
#pd-root.pd-skin-soccer-medium .pd-screen {
  position: relative;
  z-index: 1;
}
/* Hide skin decorations that would conflict with the watermark */
#pd-root.pd-skin-soccer-medium .pd-side,
#pd-root.pd-skin-soccer-medium .pd-gesture,
#pd-root.pd-skin-soccer-medium .pd-phone::before,
#pd-root.pd-skin-soccer-medium .pd-goal-ball,
#pd-root.pd-skin-soccer-medium .pd-goal-ball-trail {
  display: none;
}

/* Top bar: green with crossbar accent */
#pd-root.pd-skin-soccer-medium .pd-statusbar {
  background: linear-gradient(135deg, #0a4f24 0%, #15703a 100%);
  height: 38px;
  border-bottom: 2px solid #ffffff;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
}
#pd-root.pd-skin-soccer-medium .pd-statusbar > * { display: none; }
#pd-root.pd-skin-soccer-medium .pd-statusbar::before {
  content: "⚽ Power Dialer";
  display: block;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Header window-control buttons in the top-right of the brand bar */
#pd-root.pd-skin-soccer-medium .pd-header {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  z-index: 10;
}
#pd-root.pd-skin-soccer-medium .pd-iconbtn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 0;
  width: 24px;
  height: 22px;
  font-size: 13px;
  border-radius: 4px;
  margin-left: 3px;
}
#pd-root.pd-skin-soccer-medium .pd-iconbtn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Body — translucent dark background so the watermark shows through */
#pd-root.pd-skin-soccer-medium .pd-screen {
  background: rgba(8, 32, 16, 0.55);
  backdrop-filter: blur(0.5px);
  border-radius: 0;
  min-height: 0;
  padding: 0;
  border: 0;
}
#pd-root.pd-skin-soccer-medium .pd-body {
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:
    "profile  profile   stats"
    "status   status    stats"
    "calls    prospect  toggles"
    "end      end       end"
    "info     info      info";
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  position: relative;
  z-index: 1;
}
#pd-root.pd-skin-soccer-medium .pd-profile-row { grid-area: profile; }
#pd-root.pd-skin-soccer-medium .pd-status-row  { grid-area: status; }
#pd-root.pd-skin-soccer-medium .pd-stats       { grid-area: stats; align-self: start; }
#pd-root.pd-skin-soccer-medium #pd-session-area { display: contents; }
#pd-root.pd-skin-soccer-medium .pd-session-grid { display: contents; }
#pd-root.pd-skin-soccer-medium .pd-call-stack   { grid-area: calls; }
#pd-root.pd-skin-soccer-medium .pd-toggle-stack { grid-area: toggles; }
#pd-root.pd-skin-soccer-medium #pd-end          { grid-area: end; margin-top: 4px; }
#pd-root.pd-skin-soccer-medium #pd-prospect-area { grid-area: prospect; align-self: stretch; }
#pd-root.pd-skin-soccer-medium .pd-info         { grid-area: info; }
#pd-root.pd-skin-soccer-medium .pd-status-row .pd-status-spacer { display: none; }
#pd-root.pd-skin-soccer-medium .pd-status-row .pd-session-pill { margin-left: 8px; }
#pd-root.pd-skin-soccer-medium .pd-incall {
  max-width: none;
  margin: 0;
  padding-bottom: 0;
}
#pd-root.pd-skin-soccer-medium .pd-incall-avatar {
  width: 48px; height: 48px;
  margin: 0 auto 6px;
  font-size: 17px;
}
#pd-root.pd-skin-soccer-medium .pd-incall-num { font-size: 14px; }
#pd-root.pd-skin-soccer-medium .pd-incall-status { padding: 3px 8px; font-size: 10px; }
#pd-root.pd-skin-soccer-medium .pd-incall-btnrow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
#pd-root.pd-skin-soccer-medium .pd-callbtn-ball,
#pd-root.pd-skin-soccer-medium .pd-callbtn-icon { width: 38px; height: 38px; }
#pd-root.pd-skin-soccer-medium .pd-callbtn-icon { font-size: 17px; }
#pd-root.pd-skin-soccer-medium .pd-callbtn-lbl { font-size: 10px; }
#pd-root.pd-skin-soccer-medium .pd-transcript { max-height: 90px; }
#pd-root.pd-skin-soccer-medium .pd-incall-tr  { max-height: 70px; margin: 6px 4px 0; font-size: 10px; }

/* Section labels + text colors tuned for the green background */
#pd-root.pd-skin-soccer-medium .pd-profile-row {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  color: #e9eef7;
}
#pd-root.pd-skin-soccer-medium .pd-status-row {
  font-size: 11px;
  color: #c4f0d4;
  margin-bottom: 10px;
}

/* Stat tiles — semi-transparent so the ball watermark glows through */
#pd-root.pd-skin-soccer-medium .pd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
#pd-root.pd-skin-soccer-medium .pd-stats > div {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 8px 6px;
  text-align: center;
}

/* Inline pills — same compact format as Medium */
#pd-root.pd-skin-soccer-medium .pd-inline-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-bottom: 8px;
}
#pd-root.pd-skin-soccer-medium .pd-pill-btn {
  font-size: 10px;
  padding: 6px 4px;
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
#pd-root.pd-skin-soccer-medium .pd-pill-btn .pd-pill-icon { font-size: 13px; }

/* Toggle rows + section labels tuned for green theme */
#pd-root.pd-skin-soccer-medium .pd-toggle-row {
  padding: 5px 8px;
  margin-top: 3px;
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}
#pd-root.pd-skin-soccer-medium .pd-section-label {
  font-size: 10px;
  margin-top: 8px;
  margin-bottom: 4px;
  color: #c4f0d4;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
}

/* Footer — dark green strip */
#pd-root.pd-skin-soccer-medium .pd-footer {
  padding: 6px 10px;
  font-size: 10px;
  color: #c4f0d4;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 32, 16, 0.85);
  border-radius: 0 0 12px 12px;
  position: relative;
  z-index: 1;
}

/* Maximized variant — wider panel, ball watermark scales up */
#pd-root.pd-skin-soccer-medium.pd-maximized .pd-phone { width: 540px; }
#pd-root.pd-skin-soccer-medium.pd-maximized .pd-phone::after {
  background-size: 380px 380px;
}

/* ─── Size-mode overrides for Medium / Soccer-Medium skins ──────────
   The Medium and Soccer-Medium skins set custom .pd-phone dimensions,
   backgrounds, and borders. When the agent flips to ball or mini size,
   the size-mode rules need to win so the panel collapses to the small
   ball icon / mini strip rather than staying at full Medium width.
   We also hide the watermarks/headers so they don't peek through. */

/* Ball mode — tiny round soccer-ball bubble, all skin chrome hidden. */
#pd-root.pd-skin-medium.pd-size-ball .pd-phone,
#pd-root.pd-skin-soccer-medium.pd-size-ball .pd-phone {
  width: 56px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 50%;
}
#pd-root.pd-skin-medium.pd-size-ball .pd-phone::before,
#pd-root.pd-skin-medium.pd-size-ball .pd-phone::after,
#pd-root.pd-skin-soccer-medium.pd-size-ball .pd-phone::before,
#pd-root.pd-skin-soccer-medium.pd-size-ball .pd-phone::after,
#pd-root.pd-skin-medium.pd-size-ball .pd-statusbar,
#pd-root.pd-skin-medium.pd-size-ball .pd-screen,
#pd-root.pd-skin-medium.pd-size-ball .pd-footer,
#pd-root.pd-skin-soccer-medium.pd-size-ball .pd-statusbar,
#pd-root.pd-skin-soccer-medium.pd-size-ball .pd-screen,
#pd-root.pd-skin-soccer-medium.pd-size-ball .pd-footer {
  display: none;
}

/* Mini mode — compact horizontal strip with quick stats + close. */
#pd-root.pd-skin-medium.pd-size-mini .pd-phone,
#pd-root.pd-skin-soccer-medium.pd-size-mini .pd-phone {
  width: 220px;
  padding: 0;
  background: rgba(20, 22, 28, 0.96);
  border: 1px solid #2a2e38;
  border-radius: 10px;
  overflow: hidden;
}
#pd-root.pd-skin-medium.pd-size-mini .pd-phone::before,
#pd-root.pd-skin-medium.pd-size-mini .pd-phone::after,
#pd-root.pd-skin-soccer-medium.pd-size-mini .pd-phone::before,
#pd-root.pd-skin-soccer-medium.pd-size-mini .pd-phone::after,
#pd-root.pd-skin-medium.pd-size-mini .pd-statusbar,
#pd-root.pd-skin-medium.pd-size-mini .pd-screen,
#pd-root.pd-skin-medium.pd-size-mini .pd-footer,
#pd-root.pd-skin-soccer-medium.pd-size-mini .pd-statusbar,
#pd-root.pd-skin-soccer-medium.pd-size-mini .pd-screen,
#pd-root.pd-skin-soccer-medium.pd-size-mini .pd-footer {
  display: none;
}

/* ── Mode row + Mode info banner (v1.28.0) ─────────────────────────
   The 3-button row that lives directly under the History/Jersey/Setup
   pills. Each button represents a way to route call audio:
     📞 Phone Dialer  → cell PSTN
     📲 Mobile App    → /mobile site on phone/tablet
     🖥️ Desktop       → embedded WebRTC in this browser
   Active button gets a bright accent border + brighter background. */
/* v1.29.72 — Compact mode selector. Was tall stacked tiles (~52px high
   each, taking ~120px total of vertical space). Now a single horizontal
   pill row (~28px high). Emoji and label side-by-side instead of
   stacked, less padding, smaller emoji. Cuts ~80px off the top of the
   panel before the dialer body even starts. */
.pd-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 4px 14px 2px;
}
.pd-mode-row.pd-mode-row-2col {
  grid-template-columns: 1fr 1fr;
}
.pd-mode-btn {
  display: flex;
  flex-direction: row;          /* v1.29.72: was column */
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;             /* v1.29.72: was 8px 6px */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #cfe0fa;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease,
              transform 0.05s ease;
}
.pd-mode-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}
.pd-mode-btn:active {
  transform: translateY(1px);
}
.pd-mode-btn.active {
  background: rgba(230, 57, 70, 0.16);
  border-color: rgba(230, 57, 70, 0.7);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(230, 57, 70, 0.45) inset;
}
.pd-mode-emoji {
  font-size: 14px;              /* v1.29.72: was 18px */
  line-height: 1;
}
.pd-mode-lbl {
  font-size: 11px;
  letter-spacing: 0.2px;
  text-align: center;
}

/* v1.29.72 — Compacted mode info banner. Was ~70px tall with the source
   row, hint paragraph, and mic button stacked. Now ~32px with hint
   hidden (still in DOM for first-run education via title tooltips). */
.pd-mode-info {
  padding: 2px 14px 6px;
}
.pd-mode-pane {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 4px 8px;             /* v1.29.72: was 8px 10px */
}
.pd-mode-source-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;            /* v1.29.72: keep on one line */
  font-size: 11.5px;
  color: #cfe0fa;
  min-height: 22px;
}
.pd-mode-source-icon {
  font-size: 13px;              /* v1.29.72: was 15px */
  line-height: 1;
}
.pd-mode-source-text {
  flex: 1;
  min-width: 0;
  font-size: 11px;              /* v1.29.72: was 11.5px */
  color: #9fb1c9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-mode-source-text strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pd-mode-link {
  color: #6bb3ff;
  text-decoration: none;
  font-weight: 600;
}
.pd-mode-link:hover {
  text-decoration: underline;
}
.pd-mode-park-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b8095;
}
.pd-mode-park-pip.ok {
  background: #2dab5f;
  box-shadow: 0 0 6px rgba(45, 171, 95, 0.6);
}
.pd-mode-park-lbl {
  font-size: 10.5px;
  color: #9fb1c9;
}
/* v1.29.72 — Hide multi-line hint by default. It was duplicating info
   that's already in the source row + button tooltips. Wastes 30+ px on
   every panel render. New users can hover the mode buttons (which have
   `title` attrs) to see what each mode does. To re-show the hint, add
   .pd-show-hints to the panel root. */
.pd-mode-hint {
  display: none;
}
#pd-root.pd-show-hints .pd-mode-hint {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  color: #6b8095;
  line-height: 1.4;
}
/* v1.29.72 — Mic enable + Audio settings now share a row inside the
   desktop pane. The mic button is the primary CTA (gradient green), the
   settings button is a compact secondary action with just the icon and
   chevron. Cuts vertical height from ~80px to ~40px for these two
   stacked controls. */
.pd-mode-pane-desktop-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  align-items: stretch;
}
.pd-mode-mic-btn {
  flex: 1;
  padding: 6px 10px;
  background: linear-gradient(135deg, #1d6a3d, #2dab5f);
  border: 0;
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 11.5px;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.pd-mode-mic-btn:hover {
  filter: brightness(1.1);
}
.pd-mode-mic-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* v1.29.32 — Audio devices: activation button + slide-out drawer.
   The button replaces the inline mic/speaker rows in the desktop pane.
   The drawer overlays the pane and slides in from the right. */
/* v1.29.73 — Restored the visible label after the v1.29.72 icon-only
   pass was unreadable (glyph didn't render on Windows + no label = no
   discoverability). Button sits side-by-side with the mic CTA in the
   .pd-mode-pane-desktop-actions row. Wider than v1.29.72 to fit the
   icon + "Devices" label + chevron, but still compact compared to the
   pre-v1.29.72 full-width row. */
.pd-audio-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #cdd9ff;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pd-audio-settings-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(108, 232, 160, 0.45);
}
/* v1.29.73 — Inline icon + label so the button is self-explanatory. */
.pd-audio-settings-icon {
  font-size: 14px;
  line-height: 1;
}
.pd-audio-settings-lbl {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.pd-audio-settings-chev {
  opacity: 0.65;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
}

/* v1.29.46 — Re-anchor the drawer to the .pd-phone wrapper (the whole
   panel body) instead of the small desktop-mode pane. Gives the drawer
   the full vertical height to display + scroll mic and speaker pickers,
   their labels, and "In use:" status lines comfortably. */
.pd-audio-drawer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.pd-audio-drawer.open {
  pointer-events: auto;
}
.pd-audio-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
  pointer-events: none;
}
.pd-audio-drawer.open .pd-audio-drawer-backdrop {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
.pd-audio-drawer-panel {
  position: absolute;
  /* Span the full phone height with a small inset top/bottom so the
     drawer doesn't crowd the rounded phone corners. */
  top: 12px;
  right: 0;
  bottom: 12px;
  /* Wider than before — the drawer is now in the phone-body coordinate
     space, so 86% of the phone gives plenty of room for both pickers
     side-by-side with their full labels visible. */
  width: 86%;
  min-width: 260px;
  background: #22262f;
  border-radius: 12px 0 0 12px;
  border-left:   1px solid rgba(108, 232, 160, 0.3);
  border-top:    1px solid rgba(108, 232, 160, 0.15);
  border-bottom: 1px solid rgba(108, 232, 160, 0.15);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  pointer-events: none;
  /* Vertical scroll if content exceeds the available height — user
     still gets scrolling but most setups fit without it now. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pd-audio-drawer.open .pd-audio-drawer-panel {
  transform: translateX(0);
  pointer-events: auto;
}
.pd-audio-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pd-audio-drawer-title {
  font-size: 12px;
  font-weight: 500;
  color: #6ce8a0;
}
.pd-audio-drawer-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.pd-audio-drawer-close:hover {
  background: rgba(255, 255, 255, 0.15);
}
.pd-audio-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* v1.29.31 — Mic picker dropdown in the Desktop mode pane */
.pd-mic-picker-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}
.pd-mic-picker-lbl {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.pd-mic-picker {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
.pd-mic-picker:focus {
  outline: none;
  border-color: rgba(108, 232, 160, 0.6);
}
.pd-mic-current {
  font-size: 11px;
  color: rgba(108, 232, 160, 0.85);
  margin-top: 2px;
}

/* Hide mode UI in mini/ball compact views — those are dashboard-only. */
#pd-root.pd-size-mini .pd-mode-row,
#pd-root.pd-size-mini .pd-mode-info,
#pd-root.pd-size-ball .pd-mode-row,
#pd-root.pd-size-ball .pd-mode-info {
  display: none;
}


/* ── v1.31.76 — Update banner + modal ───────────────────────────────
   Banner is a fixed-position pill at the top of the viewport, mounted
   on document.body (NOT pd-root) so it survives panel re-renders,
   skin changes, and panel collapse. Yellow accent matches the brand
   color used in the skin bar's active state. */
.pd-update-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 14px;
  background: linear-gradient(180deg, #F2C94C 0%, #E0B73E 100%);
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 2147483646;
  animation: pdUpdateBannerSlide 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 0;
}
@keyframes pdUpdateBannerSlide {
  from { transform: translateX(-50%) translateY(-110%); }
  to   { transform: translateX(-50%) translateY(0); }
}
.pd-update-banner-icon { font-size: 14px; }
.pd-update-banner-text { white-space: nowrap; }
.pd-update-banner-btn {
  background: #1a1a1a;
  color: #F2C94C;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.15s, transform 0.1s;
}
.pd-update-banner-btn:hover { background: #2a2a2a; }
.pd-update-banner-btn:active { transform: translateY(1px); }
.pd-update-banner-dismiss {
  background: transparent;
  border: 0;
  color: rgba(0, 0, 0, 0.55);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  font-weight: 600;
  transition: color 0.15s;
}
.pd-update-banner-dismiss:hover { color: #1a1a1a; }

/* ── Modal: guided reinstall steps ──────────────────────────────── */
.pd-update-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: pdUpdateModalFade 0.2s;
}
@keyframes pdUpdateModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pd-update-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pd-update-modal-body {
  position: relative;
  background: #ffffff;
  color: #1a1a1a;
  width: 480px;
  max-width: 92vw;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  animation: pdUpdateModalRise 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pdUpdateModalRise {
  from { transform: translateY(16px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.pd-update-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}
.pd-update-modal-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.pd-update-modal-x {
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  color: #555;
  line-height: 1;
}
.pd-update-modal-x:hover { background: rgba(0, 0, 0, 0.1); }
.pd-update-versions {
  font-size: 13px;
  color: #555;
  margin: 0 0 14px;
}
.pd-update-versions strong { color: #1a1a1a; }
.pd-update-steps {
  padding-left: 22px;
  margin: 8px 0 18px;
  line-height: 1.55;
  font-size: 13px;
  color: #333;
}
.pd-update-steps li { margin-bottom: 6px; }
.pd-update-steps code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}
.pd-update-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.pd-update-download,
.pd-update-extensions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  transition: background 0.15s, transform 0.1s;
}
.pd-update-download {
  background: linear-gradient(180deg, #F2C94C 0%, #E0B73E 100%);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.pd-update-download:hover { filter: brightness(1.05); }
.pd-update-extensions-btn {
  background: #f4f5f7;
  color: #1a1a1a;
  border: 1px solid #e1e3e8;
}
.pd-update-extensions-btn:hover { background: #ebedf1; }
.pd-update-modal-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.pd-update-remind {
  background: transparent;
  border: 0;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
}
.pd-update-remind:hover { background: rgba(0, 0, 0, 0.04); color: #1a1a1a; }


/* ── v1.31.80 fix-up — ball layout + jersey icon visibility ──────── */

/* 1. Force jersey icon visible. v1.31.77 hid it via CSS; v1.31.79
   un-hid it but the un-hide rule may be losing the cascade in some
   build orders. Maximum-specificity override here at file end. */
#pd-root .pd-skin-bar .pd-skin-bar-btn[data-action="jersey"] {
  display: inline-flex !important;
}

/* 2. Ball skin panel — 340×340 (was 280×280, too small for all the
   new buttons). No !important on width/height so the v1.31.73 resize
   handle can scale it. */
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-card {
  width: 340px;
  height: 340px;
  cursor: move;
}

/* 3. Compact internal padding for the ball — content must fit inside
   the visible ball silhouette (the corners of the 340-square are
   transparent so buttons there would float outside the ball). */
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-fg {
  padding: 52px 56px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* 4. Compact button sizing inside the ball. */
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-startsess,
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-autoclick,
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-autoattend,
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-settings {
  padding: 5px 8px !important;
  font-size: 11px !important;
  margin: 0 !important;
  min-height: 0 !important;
}
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-stats3 {
  padding: 4px !important;
  gap: 3px !important;
}
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-stat-val {
  font-size: 12px !important;
  line-height: 1.1 !important;
}
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-stat-lbl {
  font-size: 8px !important;
  line-height: 1 !important;
}
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-dialrow input {
  font-size: 11px !important;
  padding: 4px 6px !important;
  height: 26px !important;
}
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-dialrow .pd-mini-call,
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-dialrow .pd-mini-endcall {
  width: 22px !important;
  height: 22px !important;
}
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-status {
  padding: 3px 6px !important;
  font-size: 10px !important;
}
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-head {
  margin-bottom: 4px !important;
}
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-head .pd-mini-headbtn,
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-head .pd-mini-iconbtn {
  padding: 2px 5px !important;
  font-size: 10px !important;
}

/* 5. Yellow corner resize handle. The v1.31.73 .pd-resize-handle is
   positioned for the phone/goal skins; surface it in the ball skin
   at the bottom-right of the ball silhouette. */
#pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-resize-handle {
  display: block !important;
  position: absolute !important;
  right: 36px !important;
  bottom: 36px !important;
  top: auto !important;
  left: auto !important;
  width: 18px !important;
  height: 18px !important;
  background: rgba(242, 201, 76, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.4) !important;
  border-radius: 50% !important;
  cursor: nwse-resize !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}


/* ── v1.31.80 fix-up — button toggle consolidation ──────────────── */

/* 1. Hide redundant end-session/end-call buttons in the compact UI.
   The Start Session and Call buttons now act as toggles via the
   runtime sync in wireMiniButtons. */
#pd-root .pd-mini-card #pd-mini-endsess,
#pd-root .pd-mini-card #pd-mini-endcall {
  display: none !important;
}

/* 2. Active (end-session) state for Start Session button — red. */
.pd-mini-startsess.is-active {
  background: linear-gradient(180deg, #e63946 0%, #b81d2d 100%) !important;
}
.pd-mini-startsess.is-active:hover {
  filter: brightness(1.08);
}

/* 3. Active (hang-up) state for Call button — red. */
.pd-mini-call.is-active {
  background: #c43b3b !important;
}
.pd-mini-call.is-active:hover {
  background: #d04a4a !important;
}

/* 4. Active (autodial running) state for Auto-Click button — orange. */
.pd-mini-autoclick.is-active {
  background: linear-gradient(180deg, #e6892b 0%, #b86c1f 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 5. JERSEY skin — bumped 280×380 → 360×460 so content fits inside
   the shirt silhouette. Padding tuned for V-neck + sleeves. */
#pd-root.pd-jersey-bg .pd-mini-card {
  width: 360px !important;
  height: 460px !important;
}
#pd-root.pd-jersey-bg .pd-mini-fg {
  padding: 100px 70px 55px !important;
}

/* 6. Jersey button sizing also gets the compact treatment so they
   fit comfortably inside the jersey body. */
#pd-root.pd-jersey-bg .pd-mini-startsess,
#pd-root.pd-jersey-bg .pd-mini-autoclick,
#pd-root.pd-jersey-bg .pd-mini-autoattend,
#pd-root.pd-jersey-bg .pd-mini-settings {
  padding: 6px 10px !important;
  font-size: 12px !important;
}

/* 7. Jersey resize handle — surface it the same way the ball one
   does, positioned over the visible bottom-right of the jersey. */
#pd-root.pd-jersey-bg .pd-resize-handle {
  display: block !important;
  position: absolute !important;
  right: 60px !important;
  bottom: 60px !important;
  top: auto !important;
  left: auto !important;
  width: 18px !important;
  height: 18px !important;
  background: rgba(242, 201, 76, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.4) !important;
  border-radius: 50% !important;
  cursor: nwse-resize !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}


/* ── v1.31.80 fix-up — branded phone skin ─────────────────────────── */

/* Phone skin: image-as-panel-shape, symmetric to ball + jersey. The
   PNG already contains the bezel + stadium + banner + goal + grass +
   nav bar — so we hide the existing Galaxy frame chrome and let the
   image speak for itself. Controls overlay in the grass strip near
   the bottom of the visible screen. */
#pd-root.pd-skin-phone .pd-phone {
  background-image: var(--pd-phone-img) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  width: 320px !important;
  height: 500px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
}

/* Hide Galaxy frame chrome — the image has its own bezel + status bar. */
#pd-root.pd-skin-phone .pd-side,
#pd-root.pd-skin-phone .pd-side-power,
#pd-root.pd-skin-phone .pd-side-volup,
#pd-root.pd-skin-phone .pd-side-voldn,
#pd-root.pd-skin-phone .pd-gesture {
  display: none !important;
}

/* v1.32.8 — Earlier conflicting .pd-screen positioning block REMOVED.
   It was an artifact from the old soccer-field phone skin (positioned
   controls in the bottom 35% of the screen with a translucent dark
   card). With the new branded GPD logo phone skin, the canonical
   positioning lives at the later rule at line ~4895 (top:44, bottom:212,
   fully-transparent container). Two rules at the same specificity with
   the same !important were confusing — later one was winning by source
   order but only by coincidence. Removed the dead block so future edits
   to the canonical rule actually take effect without ambiguity. */

/* Compact controls so they fit in the smaller area. */
#pd-root.pd-skin-phone .pd-screen .pd-statusbar { display: none !important; }
#pd-root.pd-skin-phone .pd-screen .pd-header { padding: 4px 0 !important; }
#pd-root.pd-skin-phone .pd-screen .pd-body { font-size: 11px !important; }
#pd-root.pd-skin-phone .pd-screen .pd-btn { padding: 6px 10px !important; font-size: 11px !important; }


/* ── v1.31.80 fix-up — branded goal skin ─────────────────────────── */

#pd-root.pd-skin-goal.pd-size-full .pd-phone {
  background-image: var(--pd-goal-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  width: 700px !important;
  height: 467px !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hide the existing goal-skin chrome (the goal-net SVG pattern, the
   in-flight ball decoration) — the branded image already contains
   the whole scene. */
#pd-root.pd-skin-goal.pd-size-full .pd-side,
#pd-root.pd-skin-goal.pd-size-full .pd-side-power,
#pd-root.pd-skin-goal.pd-size-full .pd-side-volup,
#pd-root.pd-skin-goal.pd-size-full .pd-side-voldn,
#pd-root.pd-skin-goal.pd-size-full .pd-gesture,
#pd-root.pd-skin-goal.pd-size-full .pd-goal-ball,
#pd-root.pd-skin-goal.pd-size-full .pd-goal-ball-trail {
  display: none !important;
}

/* Position .pd-screen (the controls panel) as a translucent card
   centered over the right half of the goal mouth area. The branded
   "Goal Power Dialer" banner painted on the grass stays visible
   underneath at the bottom of the panel. */
#pd-root.pd-skin-goal.pd-size-full .pd-screen {
  position: absolute !important;
  top: 60px !important;
  right: 30px !important;
  bottom: 70px !important;
  left: 380px !important;
  background: rgba(11, 18, 32, 0.82) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  overflow: auto !important;
}

/* Compact controls so they fit. */
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-body {
  font-size: 12px !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-btn {
  padding: 6px 10px !important;
  font-size: 12px !important;
}


/* ── v1.31.80 fix-up — phone overlay alignment + transparency ─────── */

/* Force pd-phone to contain its absolute children — overflow:hidden
   prevents anything from rendering past the phone bezel. */
#pd-root.pd-skin-phone .pd-phone {
  overflow: hidden !important;
  position: relative !important;
}

/* Controls panel: absolute-positioned overlay inside the phone screen
   area. v1.32.8 — top:44 (1/8" inset), bottom:132 (3/4" inset),
   matching the higher-specificity rule at line ~6013. */
#pd-root.pd-skin-phone .pd-phone > .pd-screen,
#pd-root.pd-skin-phone .pd-screen {
  position: absolute !important;
  /* v1.32.9 — top:176 matches the rule at line ~6016. Was 56 from the
     original branded skin (logo-center) era; the new branded design has
     the logo at the TOP of the screen and needs the dialer content to
     start way below it. This rule has HIGHER specificity (.pd-phone >
     .pd-screen = 3 classes) than the html-body-prefixed rule below,
     so editing only line 6016 silently lost — confirmed 2026-06-17. */
  top: 128px !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 84px !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 2 !important;
}

/* Strip backgrounds off intermediate containers so the phone image
   shows through. Only buttons + counters + status pills keep their
   own opaque backgrounds. */
#pd-root.pd-skin-phone .pd-screen,
#pd-root.pd-skin-phone .pd-screen > div,
#pd-root.pd-skin-phone .pd-screen > section,
#pd-root.pd-skin-phone .pd-screen .pd-header,
#pd-root.pd-skin-phone .pd-screen .pd-body,
#pd-root.pd-skin-phone .pd-screen #pd-session-area,
#pd-root.pd-skin-phone .pd-screen #pd-toggles-area {
  background: transparent !important;
  background-color: transparent !important;
}

/* Hide the inline status bar (the phone image already shows 12:00 +
   battery + signal). */
#pd-root.pd-skin-phone .pd-statusbar { display: none !important; }

/* Make text legible against the phone image without making the
   container opaque — add text-shadow so labels read on grass/banner. */
#pd-root.pd-skin-phone .pd-screen {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  font-size: 11px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-section-label,
#pd-root.pd-skin-phone .pd-screen .pd-title-text,
#pd-root.pd-skin-phone .pd-screen .pd-pill,
#pd-root.pd-skin-phone .pd-screen .pd-cell,
#pd-root.pd-skin-phone .pd-screen #pd-ws-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Buttons + counters + pills — KEEP their backgrounds so they're
   readable. Add a subtle shadow so they read as cards over the image. */
#pd-root.pd-skin-phone .pd-screen .pd-btn,
#pd-root.pd-skin-phone .pd-screen .pd-stat,
#pd-root.pd-skin-phone .pd-screen .pd-status-row,
#pd-root.pd-skin-phone .pd-screen .pd-profile-row,
#pd-root.pd-skin-phone .pd-screen .pd-session-pill,
#pd-root.pd-skin-phone .pd-screen .pd-pill-btn,
#pd-root.pd-skin-phone .pd-screen .pd-inline-actions {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
}

/* Compact spacing so more controls fit in the smaller area. */
#pd-root.pd-skin-phone .pd-screen .pd-header {
  padding: 4px 0 !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-stat {
  padding: 4px 6px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border-radius: 6px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-stat-num {
  font-size: 16px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-stat-lbl {
  font-size: 9px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-btn {
  padding: 6px 10px !important;
  font-size: 11px !important;
}


/* ── v1.31.80 fix-up — phone wide layout + true transparency ───────── */

/* A. Force skin bar visible above the phone image. */
#pd-root.pd-skin-phone .pd-skin-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
  top: -42px !important;
}

/* B. Nuclear transparency — every conceivable wrapper in the screen
   area gets background:transparent. Anything you remember that
   could possibly carry a dark color is listed here. */
html body #pd-root.pd-skin-phone .pd-screen,
html body #pd-root.pd-skin-phone .pd-screen *,
html body #pd-root.pd-skin-phone .pd-header,
html body #pd-root.pd-skin-phone .pd-body,
html body #pd-root.pd-skin-phone #pd-session-area,
html body #pd-root.pd-skin-phone #pd-toggles-area,
html body #pd-root.pd-skin-phone .pd-session-grid,
html body #pd-root.pd-skin-phone .pd-call-stack,
html body #pd-root.pd-skin-phone .pd-toggle-stack,
html body #pd-root.pd-skin-phone .pd-mode-row,
html body #pd-root.pd-skin-phone .pd-mode-pane,
html body #pd-root.pd-skin-phone .pd-mode-pane-mobile,
html body #pd-root.pd-skin-phone .pd-mode-pane-desktop,
html body #pd-root.pd-skin-phone .pd-mode-info,
html body #pd-root.pd-skin-phone .pd-info,
html body #pd-root.pd-skin-phone .pd-inline-actions {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Restore backgrounds ONLY on individual interactive controls so they
   read against the phone image. */
html body #pd-root.pd-skin-phone .pd-btn,
html body #pd-root.pd-skin-phone .pd-pill-btn,
html body #pd-root.pd-skin-phone .pd-pill,
html body #pd-root.pd-skin-phone .pd-stat,
html body #pd-root.pd-skin-phone .pd-iconbtn,
html body #pd-root.pd-skin-phone .pd-session-pill,
html body #pd-root.pd-skin-phone .pd-status-row {
  background: rgba(0, 0, 0, 0.62) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  border-radius: 8px !important;
}

/* Strong text contrast on the image. */
html body #pd-root.pd-skin-phone .pd-screen {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) !important;
}

/* Hide the duplicate inline status bar (phone image already shows
   12:00 + battery + signal). */
#pd-root.pd-skin-phone .pd-statusbar { display: none !important; }

/* C. Wide horizontal layout — every row uses the full X axis. */
#pd-root.pd-skin-phone .pd-screen {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Header: title pinned left, refresh/end pinned right — one tight row. */
#pd-root.pd-skin-phone .pd-screen .pd-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 2px 4px !important;
  min-height: 24px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-title {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-title-text {
  font-size: 11px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-header-btns {
  display: flex !important;
  gap: 2px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-header-btns .pd-iconbtn {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  font-size: 10px !important;
}

/* Inline-actions row (History, Stats jersey, Setup) — horizontal. */
#pd-root.pd-skin-phone .pd-screen .pd-inline-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-pill-btn {
  flex: 1 !important;
  padding: 4px 6px !important;
  font-size: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-pill-icon {
  font-size: 11px !important;
}

/* Mode row (Mobile App / Desktop) — 2 columns full width. */
#pd-root.pd-skin-phone .pd-screen .pd-mode-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
}

/* Profile + status row — pack horizontally. */
#pd-root.pd-skin-phone .pd-screen .pd-profile-row,
#pd-root.pd-skin-phone .pd-screen .pd-status-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
}

/* Stats row — 3 counters wide. */
#pd-root.pd-skin-phone .pd-screen .pd-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) auto !important;
  gap: 3px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-stat {
  padding: 4px 2px !important;
  text-align: center !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-stat-num {
  font-size: 14px !important;
  line-height: 1.1 !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-stat-lbl {
  font-size: 8px !important;
  line-height: 1 !important;
}

/* Start Session and other big buttons — full width but compact. */
#pd-root.pd-skin-phone .pd-screen .pd-btn-start,
#pd-root.pd-skin-phone .pd-screen .pd-btn {
  padding: 6px 8px !important;
  font-size: 11px !important;
  width: 100% !important;
}

/* In-call dial row — Mobile/Home buttons side by side. */
#pd-root.pd-skin-phone .pd-screen .pd-btn-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
}

/* Manual dial — input + button on one row. */
#pd-root.pd-skin-phone .pd-screen .pd-manual-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 4px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-manual-input {
  padding: 4px 6px !important;
  font-size: 11px !important;
}

/* Hide the bulky in-call placeholder + transcript when idle (saves
   ~80% of vertical space). They re-render when state.session is
   active because JS controls visibility separately. */
#pd-root.pd-skin-phone .pd-screen .pd-incall.pd-incall-idle,
#pd-root.pd-skin-phone .pd-screen .pd-transcript:empty,
#pd-root.pd-skin-phone .pd-screen .pd-incall-tr:empty {
  display: none !important;
}

/* Section labels — tighter. */
#pd-root.pd-skin-phone .pd-screen .pd-section-label {
  font-size: 9px !important;
  padding: 2px 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

/* Toggle stack — 2 columns to use the X axis (until D ships the
   real bottom slide-out, this keeps things compact). */
#pd-root.pd-skin-phone .pd-screen .pd-toggle-stack {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-toggle-row {
  padding: 3px 4px !important;
  font-size: 10px !important;
  min-width: 0 !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-toggle-label {
  font-size: 9px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-toggle-info {
  display: none !important;
}


/* ── v1.31.80 fix-up — goal comprehensive (wide, translucent, drawer) ─ */

/* A. Skin chooser bar — FORCED visible at the top of any panel. */
#pd-root .pd-skin-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
}

/* B. New 900×403 goal skin background — wide aspect for horizontal
   button layout. */
#pd-root.pd-skin-goal.pd-size-full .pd-phone {
  background-image: var(--pd-goal-img) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  width: 900px !important;
  height: 403px !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hide existing goal chrome — the new image is the whole panel. */
#pd-root.pd-skin-goal.pd-size-full .pd-side,
#pd-root.pd-skin-goal.pd-size-full .pd-gesture,
#pd-root.pd-skin-goal.pd-size-full .pd-goal-ball,
#pd-root.pd-skin-goal.pd-size-full .pd-goal-ball-trail {
  display: none !important;
}

/* C. NUCLEAR translucent overlay. Everything in pd-screen and its
   descendants forced transparent. Buttons + counters re-get bg below. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen *,
html body #pd-root.pd-skin-goal.pd-size-full .pd-header,
html body #pd-root.pd-skin-goal.pd-size-full .pd-body,
html body #pd-root.pd-skin-goal.pd-size-full #pd-session-area,
html body #pd-root.pd-skin-goal.pd-size-full #pd-toggles-area,
html body #pd-root.pd-skin-goal.pd-size-full .pd-call-stack,
html body #pd-root.pd-skin-goal.pd-size-full .pd-toggle-stack,
html body #pd-root.pd-skin-goal.pd-size-full .pd-mode-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-mode-pane,
html body #pd-root.pd-skin-goal.pd-size-full .pd-mode-pane-mobile,
html body #pd-root.pd-skin-goal.pd-size-full .pd-mode-pane-desktop,
html body #pd-root.pd-skin-goal.pd-size-full .pd-mode-info,
html body #pd-root.pd-skin-goal.pd-size-full .pd-inline-actions {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* pd-screen positioned to fill the whole inner panel — no insets. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  font-size: 11px !important;
  z-index: 2 !important;
  padding: 4px !important;
  overflow: hidden !important;
}

/* Hide the inline status bar (image doesn't have one but the
   element exists). */
#pd-root.pd-skin-goal.pd-size-full .pd-statusbar { display: none !important; }

/* Restore backgrounds ONLY on individual interactive controls. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-btn,
html body #pd-root.pd-skin-goal.pd-size-full .pd-pill-btn,
html body #pd-root.pd-skin-goal.pd-size-full .pd-pill,
html body #pd-root.pd-skin-goal.pd-size-full .pd-stat,
html body #pd-root.pd-skin-goal.pd-size-full .pd-iconbtn,
html body #pd-root.pd-skin-goal.pd-size-full .pd-session-pill,
html body #pd-root.pd-skin-goal.pd-size-full .pd-status-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-profile-row {
  background: rgba(0, 0, 0, 0.62) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  border-radius: 8px !important;
}

/* D. WIDE horizontal layout — every row spans X axis. */
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 2px 6px !important;
  min-height: 26px !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-header-btns {
  display: flex !important; gap: 4px !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-header-btns .pd-iconbtn {
  width: 24px !important; height: 24px !important; padding: 0 !important; font-size: 11px !important;
}

/* Action pills — History | Stats jersey | Setup as one horizontal row. */
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-inline-actions {
  display: flex !important; flex-direction: row !important; gap: 6px !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-pill-btn {
  flex: 1 !important; padding: 5px 8px !important; font-size: 11px !important;
}

/* Profile + status + stats — ONE big horizontal row using full width. */
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-profile-row,
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-status-row {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 3px 8px !important; font-size: 11px !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) auto !important;
  gap: 4px !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-stat {
  padding: 4px 6px !important; text-align: center !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-stat-num {
  font-size: 18px !important; line-height: 1.1 !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-stat-lbl {
  font-size: 9px !important;
}

/* Session area — when in 'parked', call stack and toggle stack go
   side-by-side (left half = dial controls, right half = toggles or
   in-call view). */
#pd-root.pd-skin-goal.pd-size-full .pd-screen #pd-session-area {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  flex: 1 !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-call-stack {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-btn-row {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-manual-row {
  display: grid !important; grid-template-columns: 1fr auto !important; gap: 4px !important;
}

/* Hide bulky idle placeholders so toggle drawer space stays free. */
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-incall.pd-incall-idle,
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-transcript:empty,
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-incall-tr:empty,
#pd-root.pd-skin-goal.pd-size-full .pd-screen #pd-toggles-area {
  display: none !important;
}

/* Compact button + label sizing. */
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-btn {
  padding: 6px 10px !important; font-size: 11px !important;
}
#pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-section-label {
  font-size: 9px !important; padding: 2px 0 !important;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* E. Bottom slide-out drawer + FAB toggle button. */
.pd-pbd-fab {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(242, 201, 76, 0.95) !important;
  border: 0 !important;
  color: #1a1a1a !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  z-index: 50 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pd-pbd-fab:hover { transform: scale(1.06); }

.pd-phone-bottom-drawer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.96) 0%, rgba(8, 12, 22, 0.98) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 10px 14px 16px !important;
  transform: translateY(100%) !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  z-index: 40 !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#pd-root.pd-pbd-open .pd-phone-bottom-drawer {
  transform: translateY(0) !important;
}
.pd-pbd-handle {
  display: flex; justify-content: center; padding: 4px 0 8px;
  cursor: pointer;
}
.pd-pbd-grab {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.pd-pbd-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 12px !important;
}
.pd-pbd-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  cursor: pointer !important;
}
.pd-pbd-row input[type="checkbox"] {
  width: 14px !important; height: 14px !important;
  accent-color: #F2C94C !important;
}
.pd-pbd-row span {
  color: #e6ecf5 !important;
}

/* FAB hidden when drawer is open (drag handle replaces it). */
#pd-root.pd-pbd-open .pd-pbd-fab { display: none !important; }


/* ── v1.31.80 fix-up — Settings-screen skin bar wrap ───────────────── */

/* The Settings-screen skin bar uses static-position layout (not
   absolute like the top bar). Override the top bar's absolute
   positioning ONLY for the .pd-skin-bar-settings variant. */
.pd-settings-skinbar-wrap {
  margin: 8px 0 4px;
}
.pd-skin-bar.pd-skin-bar-settings {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(11, 18, 32, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  width: fit-content !important;
}


/* ── v1.31.80 fix-up — final fixes (top bar, settings bar, readability) ── */

/* Settings bar buttons — bigger so they're identifiable. */
html body .pd-skin-bar-settings .pd-skin-bar-btn {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
}
html body .pd-skin-bar-settings .pd-skin-bar-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}
html body .pd-skin-bar-settings .pd-skin-bar-btn img {
  width: 28px !important;
  height: 28px !important;
}
html body .pd-skin-bar-settings .pd-skin-bar-btn svg {
  width: 24px !important;
  height: 24px !important;
  color: #d8dde6 !important;
  fill: currentColor !important;
}
html body .pd-skin-bar-settings {
  gap: 8px !important;
  padding: 8px 12px !important;
}

/* Goal-skin readability — universal coverage. Every direct child of
   .pd-screen that holds text gets a dark card behind it. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen * {
  color: #fff !important;
}

/* Every TOP-LEVEL grouping inside .pd-screen gets its own dark card
   (catch-all for elements I might not have listed individually). */
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen > div,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen > section,
html body #pd-root.pd-skin-goal.pd-size-full .pd-header,
html body #pd-root.pd-skin-goal.pd-size-full .pd-inline-actions,
html body #pd-root.pd-skin-goal.pd-size-full .pd-mode-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-mode-pane,
html body #pd-root.pd-skin-goal.pd-size-full .pd-mode-info,
html body #pd-root.pd-skin-goal.pd-size-full .pd-profile-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-status-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-stats,
html body #pd-root.pd-skin-goal.pd-size-full .pd-stat,
html body #pd-root.pd-skin-goal.pd-size-full .pd-btn,
html body #pd-root.pd-skin-goal.pd-size-full .pd-pill,
html body #pd-root.pd-skin-goal.pd-size-full .pd-pill-btn,
html body #pd-root.pd-skin-goal.pd-size-full .pd-iconbtn,
html body #pd-root.pd-skin-goal.pd-size-full .pd-session-pill,
html body #pd-root.pd-skin-goal.pd-size-full .pd-incall,
html body #pd-root.pd-skin-goal.pd-size-full .pd-call-stack,
html body #pd-root.pd-skin-goal.pd-size-full .pd-call-stack > *,
html body #pd-root.pd-skin-goal.pd-size-full .pd-toggle-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-incall-num,
html body #pd-root.pd-skin-goal.pd-size-full .pd-incall-status,
html body #pd-root.pd-skin-goal.pd-size-full .pd-cell,
html body #pd-root.pd-skin-goal.pd-size-full .pd-section-label {
  background: rgba(0, 0, 0, 0.78) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 6px 10px !important;
}

/* Stats counters need an even darker bg since numbers are huge. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-stat {
  background: rgba(0, 0, 0, 0.85) !important;
  text-align: center !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-stat .pd-stat-num {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9) !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-stat .pd-stat-lbl {
  font-size: 10px !important;
  color: #e6ecf5 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* Start Session button — green gradient stays */
html body #pd-root.pd-skin-goal.pd-size-full .pd-btn-start {
  background: linear-gradient(180deg, #2dab5f 0%, #1f8b48 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-btn-end,
html body #pd-root.pd-skin-goal.pd-size-full #pd-end {
  background: linear-gradient(180deg, #e63946 0%, #b81d2d 100%) !important;
}

/* Title text — bigger + bolder so "Power Dialer" stands out. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-title-text {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
}


/* ── v1.31.80 fix-up — EVERYTHING FIX (video review pass) ─────────── */

/* 1. JERSEY FULLY OPAQUE. Was rendering ~30%, hard cap at 1.0
   with maximum specificity. */
html body #pd-root.pd-jersey-bg .pd-mini-ball-bg {
  background-image: var(--pd-jersey-img) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
html body #pd-root.pd-jersey-bg .pd-mini-card {
  background: transparent !important;
  width: 360px !important;
  height: 460px !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Same for ball skin — fully opaque branded ball. */
html body #pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-ball-bg {
  background-image: var(--pd-soccerball-img) !important;
  background-size: contain !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 2. BOTTOM DRAWER STOWED BY DEFAULT. Strong override. */
html body .pd-phone-bottom-drawer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: translateY(110%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.28s, opacity 0.18s, visibility 0s linear 0.28s !important;
  z-index: 40 !important;
  max-height: 60% !important;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.97) 0%, rgba(8, 12, 22, 0.99) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 12px 16px 18px !important;
  color: #fff !important;
  overflow-y: auto !important;
}
html body #pd-root.pd-pbd-open .pd-phone-bottom-drawer {
  transform: translateY(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: transform 0.28s, opacity 0.18s, visibility 0s !important;
}
html body #pd-root.pd-pbd-open .pd-pbd-fab {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 3. WIDE HORIZONTAL LAYOUT for ball + jersey compact UIs.
   The .pd-mini-fg holds all the controls. Force 2-column grid. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 8px !important;
  padding: 50px 30px 60px !important;
}
html body #pd-root.pd-jersey-bg .pd-mini-fg {
  padding: 90px 50px 60px !important;
}

/* Header spans both columns. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg > .pd-mini-head,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg > .pd-mini-stats3,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg > .pd-mini-dialrow,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg > .pd-mini-status,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg > .pd-mini-bottom-row {
  grid-column: 1 / -1 !important;
}

/* Stats counters horizontal. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stats3 {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 4px !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border-radius: 8px !important;
  padding: 6px !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stat {
  background: transparent !important;
  text-align: center !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stat-lbl {
  font-size: 8px !important;
  color: #e63946 !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stat-val {
  font-size: 16px !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Dial row — input + 2 buttons in one tight horizontal strip. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-dialrow {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 4px !important;
  align-items: center !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-num {
  min-width: 0 !important;
  font-size: 10px !important;
  padding: 4px 6px !important;
}

/* Status line — strong dark bg + small font. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-status {
  background: rgba(0, 0, 0, 0.78) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  text-align: center !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* All compact-UI buttons get strong dark backgrounds + bold fonts. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-startsess,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-autoclick,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-autoattend,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-settings {
  background: rgba(0, 0, 0, 0.78) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 7px 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-startsess {
  background: linear-gradient(180deg, #2dab5f 0%, #1f8b48 100%) !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-startsess.is-active {
  background: linear-gradient(180deg, #e63946 0%, #b81d2d 100%) !important;
}

/* 4. MINIMIZE RESTORE BUTTON — branded ball PNG (transparent bg) +
   gold ring edge. Ball fills the ring interior, ring frames the ball
   like a badge. Width/height intentionally NOT set here so the JS
   resize handler can control size via inline styles. */
html body .pd-restore-btn {
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: var(--pd-soccerball-img) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 3px solid #F2C94C !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 0, 0, 0.4) inset,
              0 0 8px rgba(242, 201, 76, 0.35) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
html body .pd-restore-btn:hover {
  transform: scale(1.08);
  border-color: #FFD66B !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(0, 0, 0, 0.4) inset,
              0 0 14px rgba(242, 201, 76, 0.6) !important;
}

/* 5. PHONE SKIN — bolder + bigger fonts. */
html body #pd-root.pd-skin-phone .pd-screen {
  font-weight: 700 !important;
}
html body #pd-root.pd-skin-phone .pd-screen .pd-title-text {
  font-size: 15px !important;
  font-weight: 800 !important;
}
html body #pd-root.pd-skin-phone .pd-screen .pd-pill-btn,
html body #pd-root.pd-skin-phone .pd-screen .pd-pill {
  font-size: 12px !important;
  font-weight: 700 !important;
}
html body #pd-root.pd-skin-phone .pd-screen .pd-stat-num {
  font-size: 18px !important;
  font-weight: 800 !important;
}
html body #pd-root.pd-skin-phone .pd-screen .pd-stat-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
}
html body #pd-root.pd-skin-phone .pd-screen .pd-btn {
  font-weight: 700 !important;
  font-size: 12px !important;
}
html body #pd-root.pd-skin-phone .pd-screen .pd-btn-start {
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
}

/* 6. SETTINGS SKIN BAR icons — even larger so they're identifiable. */
html body .pd-skin-bar-settings .pd-skin-bar-btn {
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
}
html body .pd-skin-bar-settings .pd-skin-bar-btn img {
  width: 34px !important;
  height: 34px !important;
}
html body .pd-skin-bar-settings .pd-skin-bar-btn svg {
  width: 26px !important;
  height: 26px !important;
  color: #fff !important;
}


/* ── v1.31.80 FINAL — Dustin's rules locked in ────────────────────── */

/* RULE 1: Every skin image is 100% opaque. No transparency. */
html body #pd-root.pd-jersey-bg .pd-mini-ball-bg,
html body #pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-ball-bg {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* For the LARGE skins (phone + goal) the image is set as
   background-image on .pd-phone. Force the underlying color to be
   transparent so the image isn't tinted, and the image itself fully
   opaque. */
html body #pd-root.pd-skin-phone .pd-phone,
html body #pd-root.pd-skin-goal.pd-size-full .pd-phone {
  background-color: transparent !important;
}

/* RULE 2: Every container/wrapper between the skin image and the
   buttons is TRANSPARENT. */
html body #pd-root .pd-screen,
html body #pd-root .pd-mini-card,
html body #pd-root .pd-mini-fg,
html body #pd-root .pd-header,
html body #pd-root .pd-body,
html body #pd-root .pd-statusbar,
html body #pd-root #pd-session-area,
html body #pd-root #pd-toggles-area,
html body #pd-root .pd-session-grid,
html body #pd-root .pd-call-stack,
html body #pd-root .pd-toggle-stack,
html body #pd-root .pd-mode-row,
html body #pd-root .pd-mode-pane,
html body #pd-root .pd-mode-pane-mobile,
html body #pd-root .pd-mode-pane-desktop,
html body #pd-root .pd-mode-info,
html body #pd-root .pd-inline-actions,
html body #pd-root .pd-mini-stats3,
html body #pd-root .pd-mini-head,
html body #pd-root .pd-mini-bottom-row,
html body #pd-root .pd-mini-dialrow {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* RULE 3: Only buttons + pills + stat cards + text labels get a
   readable dark backdrop. White text + subtle shadow on top of the
   skin image. */
html body #pd-root .pd-btn,
html body #pd-root .pd-pill,
html body #pd-root .pd-pill-btn,
html body #pd-root .pd-iconbtn,
html body #pd-root .pd-stat,
html body #pd-root .pd-mini-stat,
html body #pd-root .pd-mini-startsess,
html body #pd-root .pd-mini-autoclick,
html body #pd-root .pd-mini-pause,
html body #pd-root .pd-mini-autoattend,
html body #pd-root .pd-mini-settings,
html body #pd-root .pd-mini-headbtn,
html body #pd-root .pd-mini-iconbtn,
html body #pd-root .pd-mini-call,
html body #pd-root .pd-mini-endcall,
html body #pd-root .pd-mini-num,
html body #pd-root .pd-status-row,
html body #pd-root .pd-profile-row,
html body #pd-root .pd-session-pill,
html body #pd-root .pd-cell,
html body #pd-root .pd-pill,
html body #pd-root .pd-mini-status,
html body #pd-root .pd-title-text,
html body #pd-root .pd-toggle-row {
  background: rgba(0, 0, 0, 0.82) !important;
  color: #fff !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 6px 10px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Round controls (call buttons) keep their circle shape. */
html body #pd-root .pd-mini-call,
html body #pd-root .pd-mini-endcall {
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
}

/* Start Session keeps its green gradient — even darker overlay rules. */
html body #pd-root .pd-btn-start,
html body #pd-root .pd-mini-startsess {
  background: linear-gradient(180deg, #2dab5f 0%, #1f8b48 100%) !important;
}
html body #pd-root .pd-mini-startsess.is-active,
html body #pd-root .pd-btn-end {
  background: linear-gradient(180deg, #e63946 0%, #b81d2d 100%) !important;
}

/* RULE 4: All skin UIs scroll like the phone. */
html body #pd-root .pd-screen,
html body #pd-root .pd-mini-fg {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
}
html body #pd-root .pd-screen::-webkit-scrollbar,
html body #pd-root .pd-mini-fg::-webkit-scrollbar {
  width: 6px !important;
}
html body #pd-root .pd-screen::-webkit-scrollbar-thumb,
html body #pd-root .pd-mini-fg::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 3px !important;
}

/* RULE 5: Goal skin uses the FULL phone control set. The current
   layout already does this since both pd-skin-phone + pd-skin-goal
   render through paint() into the same pd-screen DOM. No further
   action needed beyond the styling rules above. */

/* RULE 6: Minimize restore = branded soccer ball + gold ring edge.
   Width/height removed so JS resize handler controls size. */
html body .pd-restore-btn {
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: var(--pd-soccerball-img) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 3px solid #F2C94C !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 0, 0, 0.4) inset,
              0 0 8px rgba(242, 201, 76, 0.35) !important;
  padding: 0 !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}
html body .pd-restore-btn:hover {
  transform: scale(1.08) !important;
  border-color: #FFD66B !important;
}

/* Settings skin bar — keep enlarged + visible. */
html body .pd-skin-bar-settings .pd-skin-bar-btn {
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  padding: 0 !important;
}
html body .pd-skin-bar-settings .pd-skin-bar-btn img {
  width: 34px !important;
  height: 34px !important;
}
html body .pd-skin-bar-settings .pd-skin-bar-btn svg {
  width: 26px !important;
  height: 26px !important;
  color: #fff !important;
}

/* Bottom drawer stays stowed by default. */
html body .pd-phone-bottom-drawer {
  transform: translateY(110%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.28s, opacity 0.18s !important;
}
html body #pd-root.pd-pbd-open .pd-phone-bottom-drawer {
  transform: translateY(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html body #pd-root.pd-pbd-open .pd-pbd-fab {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Phone skin screen positioning — controls scroll inside the phone
   image's screen area.
   v1.32.8 — top kept at 44 (the 1/8" inset Dustin approved earlier).
   v1.32.8 — bottom 60 → 132 (+72px ≈ 3/4" per Dustin). Same rule
   shape as the top edit that worked — applied symmetrically. */
html body #pd-root.pd-skin-phone .pd-phone {
  overflow: visible !important;
}
html body #pd-root.pd-skin-phone .pd-screen {
  position: absolute !important;
  /* v1.32.9 — Phone skin IS now the branded-top design (logo at top of
     screen). top:116 keeps the dialer scroll area below the GPD logo.
     Original branded skin (logo center) was removed per Dustin's request.
     min/max-height overrides keep the bottom inset honored — see the
     2026-06-16 12:30 PM trap memory for why these are required. */
  top: 128px !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 84px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 8px !important;
}

/* Goal skin .pd-screen positioning. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-phone {
  overflow: visible !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen {
  position: absolute !important;
  top: 50px !important;
  left: 20px !important;
  right: 20px !important;
  bottom: 20px !important;
  padding: 8px !important;
}

/* Ball + Jersey: compact UI scroll inside the ball/jersey silhouette. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-card {
  overflow: visible !important;
}
html body #pd-root.pd-jersey-bg .pd-mini-fg,
html body #pd-root.pd-skin-goal.pd-size-mini:not(.pd-jersey-bg) .pd-mini-fg {
  max-height: 100% !important;
  overflow-y: auto !important;
}


/* ── v1.31.80 moveable-ball cursor ────────────────────────────────── */

/* Show a move cursor over the ball body so users discover the drag. */
html body .pd-restore-btn {
  cursor: grab !important;
  touch-action: none !important;
}
html body .pd-restore-btn:active {
  cursor: grabbing !important;
}
/* But the resize grip keeps its own resize cursor (specificity wins
   because it's a descendant rule). */
html body .pd-restore-btn .pd-restore-resize {
  cursor: nwse-resize !important;
}

/* ── v1.31.80 — Options popup (opens from Options button on ball + jersey)
   Centered modal with Devices button + 6 real-toggle checkboxes. */
.pd-options-popup {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483646 !important;
}
.pd-options-popup.open { display: flex !important; }
.pd-options-popup-card {
  background: #1a1f28 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  width: min(320px, 90vw) !important;
  color: #e9eef7 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
  font-family: inherit !important;
}
.pd-options-popup-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 10px !important;
}
.pd-options-popup-close {
  background: transparent !important;
  border: 0 !important;
  color: #cfd8e3 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}
.pd-options-popup-close:hover { background: rgba(255,255,255,0.1) !important; }
.pd-options-popup-devices {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 10px 12px !important;
  background: linear-gradient(135deg, #2d9d52, #1f7a40) !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
  font-family: inherit !important;
}
.pd-options-popup-devices:hover { filter: brightness(1.08) !important; }
.pd-options-popup-h {
  font-size: 10px !important;
  text-transform: uppercase !important;
  color: #b04050 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
}
.pd-options-popup-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  color: #e9eef7 !important;
}
.pd-options-popup-toggle input { cursor: pointer !important; }

/* ── v1.31.80 — Jersey shoulder ball overlay
   Transparent button positioned over the ball graphic on the upper-right
   of jersey-large.png. Visible only when the jersey skin is active. */
.pd-jersey-shoulder-ball {
  display: none;
  position: absolute;
  top: 14%;
  right: 14%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 5;
  padding: 0;
}
#pd-root.pd-skin-jersey .pd-jersey-shoulder-ball,
#pd-root.pd-jersey-bg .pd-jersey-shoulder-ball {
  display: block;
}
.pd-jersey-shoulder-ball:hover {
  background: rgba(242, 201, 76, 0.18);
  box-shadow: 0 0 0 2px rgba(242, 201, 76, 0.4) inset;
}

/* ── v1.31.80 — Phone skin polish + active ball scroll clip ──────── */

/* PHONE SKIN — bold everything in the screen overlay for readability. */
html body #pd-root.pd-skin-phone .pd-screen,
html body #pd-root.pd-skin-phone .pd-screen * {
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}

/* Small dark pill behind text labels so they pop against the phone bg. */
html body #pd-root.pd-skin-phone .pd-screen .pd-title-text,
html body #pd-root.pd-skin-phone .pd-screen .pd-mode-lbl,
html body #pd-root.pd-skin-phone .pd-screen .pd-stat-num,
html body #pd-root.pd-skin-phone .pd-screen .pd-stat-lbl,
html body #pd-root.pd-skin-phone .pd-screen .pd-mode-source-text,
html body #pd-root.pd-skin-phone .pd-screen .pd-mode-hint {
  background: rgba(0, 0, 0, 0.78) !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  display: inline-block !important;
  color: #fff !important;
}

/* Move overlay down ~1/8" (12 px) so it clears the phone status bar. */
html body #pd-root.pd-skin-phone .pd-screen {
  padding-top: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
}

/* Invisible cover at the bottom of the phone — hides scrolled content
   the moment it crosses the bottom bezel. Uses a sharp mask so it's a
   clean cut, not a fade. */
html body #pd-root.pd-skin-phone .pd-phone {
  overflow: hidden !important;
}
html body #pd-root.pd-skin-phone .pd-screen::-webkit-scrollbar { width: 4px !important; }
html body #pd-root.pd-skin-phone .pd-screen::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 2px !important;
}

/* ACTIVE BALL — more vertical spacing + scroll clipped to the ball circle. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg {
  gap: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
  max-height: 100% !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-card {
  overflow: hidden !important;
  clip-path: circle(50%) !important;
  -webkit-clip-path: circle(50%) !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg::-webkit-scrollbar { width: 4px !important; }
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 2px !important;
}

/* ── v1.31.80 — Tight text-bubble padding (skip jersey per Dustin) ──
   Background pills must hug the text within ~1mm (3px). The earlier
   :not(.pd-skin-jersey):not(.pd-jersey-bg) chain excludes jersey
   completely so its layout stays as-is. */
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-title-text,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-mode-lbl,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-stat-num,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-stat-lbl,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-mode-source-text,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-mode-hint,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-status-lbl,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-session-pill,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-cell,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-mini-status,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-mini-stat-val,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-mini-stat-lbl {
  background: rgba(0, 0, 0, 0.8) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  display: inline-block !important;
  color: #fff !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: fit-content !important;
  line-height: 1.25 !important;
}

/* GOAL skin (large) — kill wide-row backgrounds that span the whole
   panel. Container rows transparent; only text/buttons keep a pill. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-body,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-header,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-inline-actions,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-mode-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-mode-pane,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-mode-pane-mobile,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-mode-pane-desktop,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-mode-info,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-status-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-stats,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-profile-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-toggle-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-call-stack,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-toggle-stack {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* PHONE + GOAL skin — buttons tightened too (was padding: 6px 10px). */
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-btn,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-pill,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-pill-btn,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-iconbtn {
  padding: 3px 8px !important;
}

/* ── v1.31.80 — Goal skin: pills hug text + screen scrolls ────────── */

/* The History / Stats jersey / Setup pills were stretching to fill
   their column. Force them to content-width + center the row so they
   distribute naturally with gaps between. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-inline-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-inline-actions .pd-pill-btn,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-pill-btn,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-pill,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-mode-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: fit-content !important;
  padding: 3px 10px !important;
  background: rgba(0, 0, 0, 0.82) !important;
  border-radius: 6px !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Mobile App / Desktop row — also hug the text. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-mode-row {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* "Desktop: ready" and "this browser (WebRTC) · connected" + the mic
   ready line — wrap them in a tight pill. The parent container that
   was stretching the dark band is forced transparent above; here we
   put the actual visible text on a tight inline pill. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen #pd-mode-desk-status,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen #pd-mode-desk-lbl,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-mode-source-text,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-mode-hint,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-status-lbl,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen #pd-status-text,
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen .pd-title-text {
  background: rgba(0, 0, 0, 0.82) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* GOAL SKIN SCROLL — make .pd-screen scroll so all buttons reachable.
   Bottom content (the Start button + status text) was getting cut. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-phone {
  overflow: hidden !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
  padding-bottom: 30px !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen::-webkit-scrollbar { width: 5px !important; }
html body #pd-root.pd-skin-goal.pd-size-full .pd-screen::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 3px !important;
}

/* PHONE SKIN — same tight-pill treatment for the inline-actions row
   (it had the same stretching problem). */
html body #pd-root.pd-skin-phone .pd-screen .pd-inline-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}
html body #pd-root.pd-skin-phone .pd-screen .pd-inline-actions .pd-pill-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: fit-content !important;
  padding: 3px 9px !important;
}

/* ── v1.31.80 — Active ball: precise mm spacing per Dustin ──────────
   1mm ≈ 4px. Override the wider gap with exact per-element spacing:
     stats3  → (1mm) → startsess  → (1mm) → autoclick  → (1mm) →
     autoattend  → (1mm) → dialrow  → (2mm) → [Setup | 1mm | Options] */

html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-fg {
  gap: 4px !important;          /* default 1mm between all siblings */
}

/* Status div ("Idle"/"Ringing") would disrupt the spec'd layout —
   hide it on the ball skin so the bottom-row sits exactly 2mm after
   the dial row as Dustin specified. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-status {
  display: none !important;
}

/* Bottom row sits 2mm after dialrow (4px gap from .pd-mini-fg +
   4px margin-top = 8px total = 2mm). Setup + Options side-by-side
   with a 1mm horizontal gap. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-bottom-row {
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;          /* 1mm between Setup and Options */
  justify-content: center !important;
  align-items: center !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-bottom-row .pd-mini-settings {
  flex: 0 1 auto !important;
  width: auto !important;
}

/* ── v1.31.80 — Active ball: align words to boxes + fix Auto Attend ── */

/* PROBLEM: outer .pd-mini-stat had its own dark background AND inner
   .pd-mini-stat-lbl/val also got dark pills from the tight-pills patch.
   Result: nested boxes that didn't line up. Fix: kill outer
   backgrounds, keep only the inner tight pills around the words. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stats3,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stat {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Stats inner labels + values — TIGHT pills, centered in each cell. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stat-lbl,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stat-val {
  background: rgba(0, 0, 0, 0.82) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  color: #fff !important;
  text-align: center !important;
}

/* BUTTON FIT — circle clip cuts the sides at top/bottom of the card.
   Reduce button max-width so they fit the visible circle width even
   at the narrower top/bottom rows. Card padding bumped horizontally. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-card {
  padding: 30px 36px 32px !important;
}

html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-startsess,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-autoclick,
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-autoattend {
  width: auto !important;
  max-width: 100% !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  background: rgba(0, 0, 0, 0.82) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* AUTO ATTEND specifically — needs room for 🛡️ + "Auto Attend OFF" */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-autoattend {
  min-width: 160px !important;
  padding: 6px 14px !important;
}

/* Start Session — green gradient preserved. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-startsess {
  background: linear-gradient(180deg, #2dab5f 0%, #1f8b48 100%) !important;
  min-width: 130px !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-startsess.is-active {
  background: linear-gradient(180deg, #e63946 0%, #b81d2d 100%) !important;
}

/* DIAL ROW — full inner width, input flex-grows, buttons stay compact. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-dialrow {
  width: 100% !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important;
}
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-dialrow .pd-mini-num {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  background: rgba(0, 0, 0, 0.82) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
}

/* ── v1.31.80 — Goal skin: restore all controls + normal End Session
   The CSS grid was causing End Session to fill remaining space when
   other rows had no content. Switch to a vertical stack — every
   control renders in order, screen scrolls if needed. */

html body #pd-root.pd-skin-goal.pd-size-full .pd-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  grid-template-areas: none !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  width: 100% !important;
}

/* Children become block-level rows in the stack. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-body > * {
  width: 100% !important;
  grid-area: auto !important;
}

/* Make the session-area + toggles-area + their inner stacks proper
   vertical containers so all controls render. */
html body #pd-root.pd-skin-goal.pd-size-full #pd-session-area,
html body #pd-root.pd-skin-goal.pd-size-full #pd-toggles-area,
html body #pd-root.pd-skin-goal.pd-size-full .pd-session-grid {
  display: block !important;
  width: 100% !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-call-stack,
html body #pd-root.pd-skin-goal.pd-size-full .pd-toggle-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  grid-area: auto !important;
}

/* END SESSION — normal sized centered button, not huge. */
html body #pd-root.pd-skin-goal.pd-size-full #pd-end {
  grid-area: auto !important;
  width: auto !important;
  max-width: 240px !important;
  margin: 6px auto 8px !important;
  padding: 8px 18px !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, #e63946 0%, #b81d2d 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
}

/* Autopilot / Start button + manual dial + manual call all visible. */
html body #pd-root.pd-skin-goal.pd-size-full #pd-autopilot,
html body #pd-root.pd-skin-goal.pd-size-full #pd-mobile,
html body #pd-root.pd-skin-goal.pd-size-full #pd-home,
html body #pd-root.pd-skin-goal.pd-size-full #pd-manual-call,
html body #pd-root.pd-skin-goal.pd-size-full #pd-skip-bad {
  background: rgba(0, 0, 0, 0.82) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Mobile / Home dial row — horizontal flex. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-btn-row {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
  justify-content: center !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-btn-row .pd-btn {
  flex: 1 1 auto !important;
  max-width: 50% !important;
}

/* Manual number input + call button row. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-manual-row {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
  align-items: center !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-manual-row .pd-manual-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 5px 10px !important;
  background: rgba(0, 0, 0, 0.82) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

/* Section labels ("Manual dial — current lead", etc.) — tight pill. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-section-label {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.7) !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  margin: 4px auto 2px !important;
}

/* TOGGLE ROWS — make sure they're visible + readable. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-toggle-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 10px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  width: 100% !important;
  cursor: pointer !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-toggle-label {
  flex: 1 1 auto !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-toggle-info {
  background: transparent !important;
  border: 0 !important;
  color: #cfd8e3 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  padding: 0 4px !important;
}

/* TRANSCRIPT / Info area — visible. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-info,
html body #pd-root.pd-skin-goal.pd-size-full #pd-info {
  display: block !important;
  width: 100% !important;
  color: #fff !important;
  margin-top: 8px !important;
}

/* ── v1.31.80 — Setup button red on all skins (per Dustin) ─────────
   Targets:
     #pd-setup-btn      → large phone + goal skins (the Setup pill)
     #pd-mini-settings  → mini ball + jersey "⚙ Setup" button
   #pd-mini-options stays unchanged so Setup/Options are visually
   distinct side-by-side on the ball skin. */
html body #pd-root #pd-setup-btn,
html body #pd-root #pd-mini-settings {
  background: linear-gradient(135deg, #b02432, #e63946) !important;
  background-color: #c43b3b !important;
  color: #fff !important;
  border-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-weight: 700 !important;
}
html body #pd-root #pd-setup-btn:hover,
html body #pd-root #pd-mini-settings:hover {
  filter: brightness(1.12) !important;
  background: linear-gradient(135deg, #c52d3d, #f04855) !important;
}

/* ── v1.31.80 — Audio devices drawer readability ────────────────────
   The drawer was rendering white-on-white because <select> elements
   inherit their browser default styling. Force dark background +
   white text + visible borders on all picker elements. */

html body .pd-audio-drawer-panel {
  background: #1a1f28 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
}

html body .pd-audio-drawer-title,
html body .pd-audio-drawer-head {
  color: #fff !important;
  font-weight: 700 !important;
}

html body .pd-audio-drawer-close {
  background: transparent !important;
  border: 0 !important;
  color: #cfd8e3 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}
html body .pd-audio-drawer-close:hover { background: rgba(255,255,255,0.1) !important; }

/* Input / Output device labels */
html body .pd-mic-picker-lbl {
  color: #fff !important;
  font-weight: 700 !important;
  display: inline-block !important;
  background: rgba(0, 0, 0, 0.55) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-bottom: 4px !important;
}

/* <select> dropdown — dark with white text, was rendering white-on-white */
html body .pd-mic-picker,
html body select.pd-mic-picker {
  background: #0d1218 !important;
  background-color: #0d1218 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body .pd-mic-picker option {
  background: #0d1218 !important;
  color: #fff !important;
}

/* "In use: ..." current device line */
html body .pd-mic-current {
  color: #cfd8e3 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  display: inline-block !important;
  max-width: fit-content !important;
}

/* Picker row spacing */
html body .pd-mic-picker-row {
  margin-bottom: 12px !important;
  padding: 0 !important;
}

/* Body wrapper of the drawer */
html body .pd-audio-drawer-body {
  padding: 14px 16px !important;
  background: transparent !important;
  color: #fff !important;
}

/* ── v1.31.80 — ENFORCE 1mm tight bubbles on every text element ────
   Per Dustin's strict spec: background pills must hug the text within
   ~3-4 px. Apply to phone + goal + ball; jersey excluded.
   Overrides ALL prior wider-padding rules via specificity + !important. */

/* SECTION LABELS — "MANUAL DIAL — CURRENT LEAD", "OR DIAL ANY NUMBER" */
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-section-label {
  background: rgba(0, 0, 0, 0.8) !important;
  color: #fff !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  margin: 4px auto 2px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: 0.3px !important;
}

/* STATS — kill outer container backgrounds + tight inner pills */
html body #pd-root.pd-skin-goal.pd-size-full .pd-stats,
html body #pd-root.pd-skin-goal.pd-size-full .pd-stat,
html body #pd-root.pd-skin-phone .pd-stats,
html body #pd-root.pd-skin-phone .pd-stat {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body #pd-root.pd-skin-goal.pd-size-full .pd-stat,
html body #pd-root.pd-skin-phone .pd-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-stat-num,
html body #pd-root:not(.pd-skin-jersey):not(.pd-jersey-bg) .pd-stat-lbl {
  background: rgba(0, 0, 0, 0.82) !important;
  color: #fff !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  margin: 0 auto !important;
}

/* Wrap the stats row so they sit centered, gapped, content-width. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-stats,
html body #pd-root.pd-skin-phone .pd-stats {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 4px auto !important;
  width: 100% !important;
}

/* STATUS / PROFILE rows — kill wide containers, keep text pills tight. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-status-row,
html body #pd-root.pd-skin-goal.pd-size-full .pd-profile-row {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Make the stats3 (mini) follow same tight rule — already done but
   re-affirm to win any later inherits. */
html body #pd-root.pd-skin-goal.pd-size-mini .pd-mini-stats3 {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 14px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Manual dial input + Call button row — input narrower so its bg
   doesn't read as a band. */
html body #pd-root.pd-skin-goal.pd-size-full .pd-manual-row .pd-manual-input {
  max-width: 60% !important;
  margin-right: 6px !important;
}

/* ── v1.31.80 — Audio devices: FORCE everything readable ──────────
   Earlier override lost specificity to one of the inherited rules.
   Using ID-level selectors + universal-text override + tight pills
   on every label. */

html body #pd-audio-drawer,
html body #pd-audio-drawer * {
  color: #fff !important;
}

html body #pd-audio-drawer .pd-audio-drawer-panel {
  background: #14181f !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7) !important;
}

/* Audio devices header — TIGHT pill around "🎛️ Audio devices" */
html body #pd-audio-drawer .pd-audio-drawer-title {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.8) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* "Input device:" / "Output device:" — TIGHT pills */
html body #pd-audio-drawer .pd-mic-picker-lbl {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.8) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

/* The <select> dropdown — force dark + white text on every state */
html body #pd-audio-drawer select.pd-mic-picker,
html body #pd-audio-drawer .pd-mic-picker {
  color: #fff !important;
  background: #0d1218 !important;
  background-color: #0d1218 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 6px 28px 6px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  width: auto !important;
  max-width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  /* Custom dropdown arrow */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='white' stroke-width='2' fill='none'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}
html body #pd-audio-drawer select.pd-mic-picker option,
html body #pd-audio-drawer .pd-mic-picker option {
  background: #0d1218 !important;
  background-color: #0d1218 !important;
  color: #fff !important;
}
html body #pd-audio-drawer .pd-mic-picker:focus {
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* "In use: ..." — TIGHT pill */
html body #pd-audio-drawer .pd-mic-current {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.65) !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  font-size: 11px !important;
  margin-top: 4px !important;
}

/* Each picker row stacks vertically with breathing room */
html body #pd-audio-drawer .pd-mic-picker-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}

/* Drawer body */
html body #pd-audio-drawer .pd-audio-drawer-body {
  padding: 14px 18px !important;
  background: transparent !important;
}

/* Close button on the drawer header */
html body #pd-audio-drawer .pd-audio-drawer-close {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border: 0 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
}

/* ── v1.31.80 — Audio drawer side popout on phone + goal ───────────
   Reparented to #pd-root by JS; here we style as a right-edge slide-
   out panel that fits within the dialer panel bounds. */

html body #pd-root #pd-audio-drawer {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
  z-index: 100 !important;
}
html body #pd-root #pd-audio-drawer.open {
  pointer-events: auto !important;
}

/* Backdrop dimming the panel content behind the drawer */
html body #pd-root #pd-audio-drawer .pd-audio-drawer-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: background 0.25s ease !important;
  pointer-events: none !important;
}
html body #pd-root #pd-audio-drawer.open .pd-audio-drawer-backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
  pointer-events: auto !important;
}

/* The slide-out side panel itself — 280px from the right edge. */
html body #pd-root #pd-audio-drawer .pd-audio-drawer-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 280px !important;
  max-width: 90% !important;
  min-width: 0 !important;
  background: #14181f !important;
  border-radius: 12px 0 0 12px !important;
  border-left: 2px solid rgba(108, 232, 160, 0.4) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-right: 0 !important;
  padding: 14px 16px !important;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.6) !important;
  transform: translateX(100%) !important;
  transition: transform 0.28s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: none !important;
}
html body #pd-root #pd-audio-drawer.open .pd-audio-drawer-panel {
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Ensure #pd-root is the positioning context (it's already fixed, so
   children's absolute is relative to it — re-affirm). */
html body #pd-root {
  position: fixed !important;
}

/* ── v1.31.80 — Restore phone drag + reliable drawer close ─────────
   1) Statusbar / #pd-drag → forced pointer-events:auto + z-index so
      mousedown always reaches the drag handler.
   2) Audio drawer when CLOSED → pointer-events:none on every layer
      so it doesn't block the panel underneath.
   3) Close button + backdrop → explicitly clickable + cursor:pointer. */

/* DRAG HANDLES — guaranteed click-throughable */
html body #pd-root.pd-skin-phone .pd-statusbar,
html body #pd-root.pd-skin-phone #pd-drag,
html body #pd-root.pd-skin-goal .pd-statusbar,
html body #pd-root.pd-skin-goal #pd-drag,
html body #pd-root .pd-header {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 50 !important;
  cursor: grab !important;
}
html body #pd-root.pd-dragging .pd-statusbar,
html body #pd-root.pd-dragging #pd-drag,
html body #pd-root.pd-dragging .pd-header {
  cursor: grabbing !important;
}

/* AUDIO DRAWER CLOSED — every layer transparent to pointer events */
html body #pd-root #pd-audio-drawer:not(.open),
html body #pd-root #pd-audio-drawer:not(.open) .pd-audio-drawer-backdrop,
html body #pd-root #pd-audio-drawer:not(.open) .pd-audio-drawer-panel,
html body #pd-root #pd-audio-drawer:not(.open) .pd-audio-drawer-panel * {
  pointer-events: none !important;
}

/* AUDIO DRAWER OPEN — backdrop + panel + every interactive child clickable */
html body #pd-root #pd-audio-drawer.open,
html body #pd-root #pd-audio-drawer.open .pd-audio-drawer-backdrop,
html body #pd-root #pd-audio-drawer.open .pd-audio-drawer-panel,
html body #pd-root #pd-audio-drawer.open .pd-audio-drawer-panel * {
  pointer-events: auto !important;
}

/* Close button (×) — explicitly clickable */
html body #pd-root #pd-audio-drawer.open .pd-audio-drawer-close {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 20 !important;
}

/* ── v1.31.80 — Big visible Close button on audio drawer ─────────── */
html body #pd-root #pd-audio-drawer .pd-audio-drawer-bigclose {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, #b02432, #e63946) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-bottom: 14px !important;
  font-family: inherit !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 30 !important;
}
html body #pd-root #pd-audio-drawer .pd-audio-drawer-bigclose:hover {
  filter: brightness(1.12) !important;
}

/* ── v1.31.80 — Drawer must CLIP its sliding panel ──────────────────
   When .open is removed, the panel transforms translateX(100%) — it
   slides 280px to the right of where it sat. But the drawer container
   itself had overflow:visible, so the panel was still visible past
   the drawer's right edge. Force overflow:hidden so the panel is
   clipped (and therefore actually disappears when closed). */
html body #pd-root #pd-audio-drawer {
  overflow: hidden !important;
}

/* Belt-and-suspenders: visibility flips at the end of the close
   transition (so we still see the slide), but is visible immediately
   when opening. */
html body #pd-root #pd-audio-drawer:not(.open) .pd-audio-drawer-panel {
  visibility: hidden !important;
  transition: transform 0.28s ease, visibility 0s linear 0.28s !important;
}
html body #pd-root #pd-audio-drawer.open .pd-audio-drawer-panel {
  visibility: visible !important;
  transition: transform 0.28s ease, visibility 0s linear 0s !important;
}
/* ── v1.31.80 — Classic phone skin (MINIMAL override of branded phone)
   JS applies BOTH pd-skin-phone AND pd-skin-classic classes. Phone-skin
   provides ALL layout (sizing, .pd-screen inset, scroll, drag, resize).
   Classic only overrides:
     1) the background image (None-branded clean phone)
     2) hides the HTML statusbar (image has its own baked-in)
   This guarantees the classic skin renders IDENTICALLY to the branded
   phone except for the bezel image. */
/* Classic skin variant — applied via BOTH .pd-classic-mode class
   and data-skin-variant="classic" attribute on pd-root.
   Hide HTML statusbar (image has its own). */
html body #pd-root.pd-classic-mode .pd-statusbar,
html body #pd-root[data-skin-variant="classic"] .pd-statusbar {
  display: none !important;
}
/* Screen content area matches the two image overlays exactly so
   scroll content fills the entire VISIBLE band between them.
   No constraint past the overlay zones — user can scroll to see
   ALL buttons. */
html body #pd-root.pd-classic-mode .pd-screen,
html body #pd-root[data-skin-variant="classic"] .pd-screen {
  /* v1.32.9 — REVERTED to 80/100 after the 56/76 attempt pushed pd-screen
     UP into where the phone image's status bar (4G/time/battery) renders,
     visually clipping the "Power Dialer" header behind it. The classic
     image's safe content zone STARTS at y=80, not earlier. */
  top: 80px !important;
  bottom: 100px !important;
  overflow-y: auto !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
/* v1.31.89 → v1.31.91 — Classic skin pd-root.
   PRIOR (v1.31.89): clip-path inset(0 round 42px) + overflow:hidden cropped
   pd-root to a rounded rectangle. PROBLEM (per Dustin):
     • Clipped the skin chooser bar (which is position:absolute top:-36px,
       OUTSIDE pd-root's box). Bar vanished from view.
     • Clipped the right side of the phone when pd-root's auto-width
       didn't perfectly match pd-phone's rendered width.
     • Removed the intentional small white card behind the phone — that
       was a design feature, not a bug.
   FIX (v1.31.91): pd-root is transparent and hugs the phone (padding 0,
   width/height auto). No clipping. The "white card behind" effect is
   provided via .pd-phone::before in a separate rule below (positioned
   slightly INSIDE the phone bezel via inset:8px so it never bleeds
   past). Skin bar stays visible (no overflow:hidden). */
html body #pd-root.pd-classic-mode,
html body #pd-root[data-skin-variant="classic"] {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* clip-path + overflow:hidden REMOVED — were causing skin-bar clip
     and phone right-side clip per Dustin's screenshot 2026-06-11. */
}
/* v1.31.93 — Per Dustin: the BRANDED skin (pd-skin-phone) has the right
   "white space and trim" treatment on the screen area — a translucent
   dark card with subtle border + backdrop blur. Duplicating those values
   onto the classic skin's .pd-screen so the inside-the-bezel content
   has the same polished look. Coordinates differ (classic's screen is
   between 80px top + 100px bottom image overlays, set by the
   pdClassicEnforcer in content.js), but the CARD VISUAL itself
   (background, border, padding, blur) is identical to the branded skin
   rule at content.css line ~4779. */
html body #pd-root.pd-classic-mode .pd-screen,
html body #pd-root[data-skin-variant="classic"] .pd-screen {
  background: rgba(11, 18, 32, 0.78) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* v1.32.2 — REMOVED the #pd-root::before white card behind the classic
   phone (was background:#ffffff inset:8px border-radius:36 box-shadow).
   It was producing the visible white rounded box behind the phone
   illustration on the classic skin. The branded phone skin never had a
   white card; classic now matches. Phone illustration renders with
   transparent backdrop, same as branded. */

/* ── CRITICAL: PHYSICAL TOP + BOTTOM IMAGE OVERLAYS ────────────────
   These ::before (top) and ::after (bottom) pseudo-elements cover
   the top and bottom of the phone bezel with the classic image
   itself. Any scroll content that goes past these zones is
   PHYSICALLY COVERED by the image — no mask, no clip, no specificity
   tricks. The overlay literally draws the image's status bar (top)
   and nav bar (bottom) on top of everything. */
html body #pd-root.pd-classic-mode .pd-phone,
html body #pd-root[data-skin-variant="classic"] .pd-phone {
  position: relative !important;
  overflow: hidden !important;
}
html body #pd-root.pd-classic-mode .pd-phone::before,
html body #pd-root[data-skin-variant="classic"] .pd-phone::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 80px !important;
  background-image: var(--pd-classic-img) !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  z-index: 10 !important;
  pointer-events: none !important;
}
html body #pd-root.pd-classic-mode .pd-phone::after,
html body #pd-root[data-skin-variant="classic"] .pd-phone::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100px !important;
  background-image: var(--pd-classic-img) !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* ── v1.31.80 — Jersey 100% opaque (was 0.95). */
html body #pd-root.pd-jersey-bg .pd-mini-ball-bg {
  opacity: 1 !important;
}

/* ── v1.31.80 — Classic crop: extreme specificity to absolutely win.
   Triple-stacked html body + 4 different selectors so this cannot
   lose. pd-root width:auto+padding:4px = hugs the phone bezel. */
html body html body #pd-root.pd-classic-mode,
html body html body #pd-root[data-skin-variant="classic"],
html body #pd-root.pd-classic-mode.pd-skin-phone,
html body #pd-root[data-skin-variant="classic"].pd-skin-phone {
  width: auto !important;
  height: auto !important;
  padding: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* ── v1.31.80 — Button colors + tight 1mm padding ─────────────────── */

/* GREEN: Start Session + Start Autopilot */
html body #pd-root #pd-start,
html body #pd-root .pd-btn-start,
html body #pd-root #pd-autopilot.pd-btn-autostart,
html body #pd-root .pd-btn-autostart {
  background: linear-gradient(180deg, #2dab5f 0%, #1f8b48 100%) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}

/* RED: End Session */
html body #pd-root #pd-end,
html body #pd-root .pd-btn-end {
  background: linear-gradient(180deg, #e63946 0%, #b81d2d 100%) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}

/* ORANGE: Pause Autopilot */
html body #pd-root #pd-autopilot.pd-btn-autopause,
html body #pd-root .pd-btn-autopause {
  background: linear-gradient(180deg, #f59e0b 0%, #c2570c 100%) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}

/* TIGHT 1mm padding on all main action buttons — buttons hug their
   text within ~4 px (≈ 1 millimeter). */
html body #pd-root #pd-start,
html body #pd-root #pd-end,
html body #pd-root #pd-autopilot,
html body #pd-root .pd-btn-start,
html body #pd-root .pd-btn-end,
html body #pd-root .pd-btn-autostart,
html body #pd-root .pd-btn-autopause {
  padding: 5px 14px !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
  border-radius: 8px !important;
}

/* ── v1.31.80 — Mobile App + Desktop GREEN, other dialer buttons get
   a blue outline so they're visible against the black phone screen. */

/* GREEN: Mobile App + Desktop mode buttons */
html body #pd-root #pd-mode-mobile,
html body #pd-root #pd-mode-desktop,
html body #pd-root .pd-mode-btn {
  background: linear-gradient(180deg, #2dab5f 0%, #1f8b48 100%) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}
html body #pd-root .pd-mode-btn.active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6) !important;
}

/* BLUE OUTLINE on other dialer buttons so they pop on the black
   phone screen. box-shadow used (not border) so the buttons don't
   change size. Applied to:
     - History / Stats jersey / Setup (.pd-pill-btn)
     - Header icon buttons (.pd-iconbtn) like refresh / minimize
     - Mobile/Home dial buttons (.pd-btn-cleat)
     - Manual dial input + Call button
     - Devices button (.pd-audio-settings-btn)
     - Enable mic button (.pd-mode-mic-btn)
     - Toggle rows (.pd-toggle-row)
     - Skip-bad-number button
   Setup keeps its red bg from earlier — we only ADD a blue ring. */
html body #pd-root .pd-pill-btn,
html body #pd-root .pd-iconbtn,
html body #pd-root .pd-btn-cleat,
html body #pd-root .pd-manual-input,
html body #pd-root #pd-manual-call,
html body #pd-root .pd-audio-settings-btn,
html body #pd-root .pd-mode-mic-btn,
html body #pd-root .pd-toggle-row,
html body #pd-root .pd-btn-skiplead,
html body #pd-root #pd-mobile,
html body #pd-root #pd-home,
html body #pd-root #pd-skip-bad,
html body #pd-root #pd-c-reset {
  box-shadow: 0 0 0 2px #3b82f6 !important;
  border-radius: 6px !important;
}

/* ── v1.31.80 — Classic: toggles 1-per-row (was 2 columns) ──────── */
html body #pd-root.pd-classic-mode .pd-toggle-stack,
html body #pd-root[data-skin-variant="classic"] .pd-toggle-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
}
html body #pd-root.pd-classic-mode .pd-toggle-stack .pd-toggle-row,
html body #pd-root[data-skin-variant="classic"] .pd-toggle-stack .pd-toggle-row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 6px !important;
}

/* ── v1.31.80 — BOTH phone skins (branded + classic): toggles 1-per-row ── */
html body #pd-root.pd-skin-phone .pd-toggle-stack {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  width: 100% !important;
}
html body #pd-root.pd-skin-phone .pd-toggle-stack .pd-toggle-row {
  width: 100% !important;
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 6px !important;
}

/* ── v1.31.80 — Jersey skin: opaque + controls inside jersey body ──
   PROBLEM 1: pd-root has transparent background, so Impact CRM page
   bleeds through around the jersey image edges.
   PROBLEM 2: .pd-screen uses default L/R inset of ~22px, so the Client
   Number input + Start Auto-Cuts button extend past the jersey body.
   FIX: solid white pd-root + inset .pd-screen to fit inside torso. */
html body #pd-root.pd-skin-jersey {
  background-color: #ffffff !important;
  background-image: var(--pd-jersey-img) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}
/* Reveal the pd-screen for jersey (base rule on line 1395 hides it).
   We use the SAME dialer layout as phone, just constrained narrower. */
html body #pd-root.pd-skin-jersey .pd-screen {
  display: block !important;
  position: absolute !important;
  top: 26% !important;
  bottom: 18% !important;
  left: 22% !important;
  right: 22% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  background: transparent !important;
}
/* Children stay inside the new narrower screen */
html body #pd-root.pd-skin-jersey .pd-screen .pd-manual-input,
html body #pd-root.pd-skin-jersey .pd-screen .pd-pill-btn,
html body #pd-root.pd-skin-jersey .pd-screen .pd-toggle-row,
html body #pd-root.pd-skin-jersey .pd-screen .pd-btn-start,
html body #pd-root.pd-skin-jersey .pd-screen .pd-btn-end,
html body #pd-root.pd-skin-jersey .pd-screen .pd-btn-autostart,
html body #pd-root.pd-skin-jersey .pd-screen .pd-btn-autopause,
html body #pd-root.pd-skin-jersey .pd-screen #pd-manual-call,
html body #pd-root.pd-skin-jersey .pd-screen .pd-toggle-stack,
html body #pd-root.pd-skin-jersey .pd-screen .pd-call-stack {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Toggles 1-per-row for jersey too (matches phone skins) */
html body #pd-root.pd-skin-jersey .pd-toggle-stack {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  width: 100% !important;
}
html body #pd-root.pd-skin-jersey .pd-toggle-stack .pd-toggle-row {
  width: 100% !important;
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 6px !important;
}

/* ── v1.31.80 — Jersey (REAL): pd-jersey-bg + pd-size-mini ────────
   Jersey is goal-skin + mini-size + pd-jersey-bg watermark, NOT a
   .pd-skin-jersey class. Earlier patch targeted the wrong selector.
   This is the real fix paired with pdJerseyLayoutEnforcer. */
html body #pd-root.pd-jersey-bg,
html body #pd-root.pd-skin-goal.pd-size-mini.pd-jersey-bg {
  background-color: #ffffff !important;
}
html body #pd-root.pd-jersey-bg .pd-mini-card {
  background-color: #ffffff !important;
}
html body #pd-root.pd-jersey-bg .pd-mini-fg {
  padding: 75px 75px 35px !important;
  box-sizing: border-box !important;
}
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-manual-input,
html body #pd-root.pd-jersey-bg .pd-mini-fg #pd-manual-call,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-pill-btn,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-mini-input,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-mini-startsess,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-mini-autoclick,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-mini-autoattend,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-mini-settings,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-mini-status,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-mini-stats3,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-btn-start,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-btn-end,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-btn-autostart,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-btn-autopause,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-toggle-row,
html body #pd-root.pd-jersey-bg .pd-mini-fg .pd-toggle-stack {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────────────────────────
   v1.33.2 — In-call panel reorder
   ─────────────────────────────────────────────────────────────────
   When state.prospect != null (an active call leg exists), paint()
   adds .pd-incall to #pd-root. This CSS uses flex `order:` to swap
   the visual stacking of pd-body so the critical action buttons jump
   to the top:
     1. Autopilot Start/Pause          (.pd-priority-autopilot)
     2. Lead identity + Hangup/VM/Auto-Attd (#pd-prospect-area)
     3. Manual Dial — current lead     (.pd-manual-dial-block)
     4. End Session                    (#pd-end)
     5. Stats
     6. Status row
     7. Profile row
     8. Toggles
   Scoped to single-column skins (phone, classic, ball, jersey). The
   goal/medium/soccer-medium grid skins are excluded — they already
   place prospect in the middle grid column where it's naturally
   prominent. Using :not() on those 3 skin classes keeps grid layouts
   untouched.

   Implementation notes:
   • pd-body becomes display:flex on these skins.
   • #pd-session-area becomes display:contents WHILE .pd-incall is on,
     so its inner wrappers (.pd-priority-autopilot,
     .pd-manual-dial-block) and the sibling #pd-end participate in
     pd-body's flex order directly.
   • .pd-call-stack already has display:contents globally
     (see "Default = single-column flow" rule above), so the wrappers
     surface up correctly.
   ───────────────────────────────────────────────────────────────── */

/* Make pd-body a flex column on non-grid skins */
#pd-root:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-body {
  display: flex;
  flex-direction: column;
}

/* Default order — preserves the current visual flow off-call */
#pd-root:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-body > .pd-profile-row   { order: 1; }
#pd-root:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-body > .pd-status-row    { order: 2; }
#pd-root:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-body > .pd-stats         { order: 3; }
#pd-root:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-body > #pd-session-area  { order: 4; }
#pd-root:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-body > #pd-prospect-area { order: 5; }
#pd-root:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-body > #pd-toggles-area  { order: 6; }
#pd-root:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-body > .pd-info          { order: 7; }

/* In-call: explode session-area so its inner wrappers join the flex
   order, then assign priority orders for the locked layout. */
#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) #pd-session-area { display: contents; }

#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-priority-autopilot { order: 1; }
#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) #pd-prospect-area      { order: 2; }
#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-manual-dial-block  { order: 3; }
#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) #pd-end                { order: 4; }
#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-stats              { order: 5; }
#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-status-row         { order: 6; }
#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-profile-row        { order: 7; }
#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) #pd-toggles-area       { order: 8; }
#pd-root.pd-incall:not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-info               { order: 9; }

/* ─── v1.33.3 — Pre-session Start Session bump ───────────────────────
   When the dialer is in the idle/ended state, pd-session-area renders
   ONLY the Start Session button. Move it to the top of pd-body so it
   sits right below the mode-config card (Devices link / device chooser)
   instead of buried below profile / status / stats.

   Only applies to non-grid skins (same scope as v1.33.2 in-call reorder).
   Suppressed when .pd-incall is active so it doesn't fight the in-call
   priority order — but .pd-session-idle naturally drops off when
   state.session === "parked" / "starting" / "dialing-agent", so this is
   a belt-and-suspenders :not() in case of a brief state overlap. */
#pd-root.pd-session-idle:not(.pd-incall):not(.pd-skin-goal):not(.pd-skin-medium):not(.pd-skin-soccer-medium) .pd-body > #pd-session-area {
  order: 0;
}

/* ── v1.34 redesign — "More options" expander (collapses the 6 session
   toggles + Skip Lead Types under the 3 per-call toggles) ─────────── */
.pd-more-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #9fb1c9; font-weight: 600;
  cursor: pointer; padding: 8px 2px 6px; user-select: none;
}
.pd-more-toggle:hover { color: #cfe0fa; }
.pd-more-toggle .pd-more-chev { display: inline-block; transition: transform .15s; }
.pd-more-toggle.pd-more-open .pd-more-chev { transform: rotate(180deg); }
.pd-more-body { display: none; padding-left: 8px; margin-left: 6px; border-left: 2px solid rgba(255,255,255,0.08); }
.pd-more-body.pd-more-open { display: block; }

/* v1.34 redesign — branded soccer ball on the in-call Hangup/End button. */
.pd-gpball { width: 42px; height: 42px; display: block; margin: 0 auto; object-fit: contain; }
.pd-callbtn .pd-gpball { width: 40px; height: 40px; }

/* ══════════════════════════════════════════════════════════════════════
   v1.34 redesign — CSS-DRAWN PHONE FRAME (option A, verified live 2026-08-04)
   The old branded skin was a fixed 320×500 PNG whose baked-in logo band
   (top 128px) + nav bar (bottom 84px) left only ~288px of screen, so the
   dialer always scrolled. This replaces it with a CSS-drawn frame: thin
   bezel, tall flex-column screen that fits the whole idle dialer with NO
   scroll, the Goal Power logo as the header band (via --pd-logo-img, set in
   JS next to --pd-phone-img), and History/Stats/Setup pinned to the bottom.
   Reflow is idle-only (:not(.pd-incall)); the in-call layout is untouched.
   Scoped to the BRANDED variant (:not(.pd-classic-mode)) — classic keeps its
   own inline-JS positioning until it's converted in a follow-up.
   Verified in the live Impact panel: screen 560px, 0 overflow, Start in-frame.
   ══════════════════════════════════════════════════════════════════════ */

/* Frame: CSS-drawn, no background image */
#pd-root.pd-skin-phone .pd-phone {
  background-image: none !important;
  background: linear-gradient(160deg,#3a3d42,#0e0f12 40%,#1c1d21) !important;
  width: 400px !important; height: auto !important;
  border-radius: 44px !important; padding: 12px !important;
  box-shadow: 0 22px 48px rgba(0,0,0,0.55), 0 6px 14px rgba(0,0,0,0.4),
              inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.14) !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
/* Decorative side buttons (mockup parity) */
#pd-root.pd-skin-phone .pd-phone::after {
  content: ""; position: absolute; right: -3px; top: 150px; width: 3px; height: 64px;
  border-radius: 2px; background: #2a2c30;
}
#pd-root.pd-skin-phone .pd-phone::before {
  content: ""; position: absolute; left: -3px; top: 120px; width: 3px; height: 96px;
  border-radius: 2px; background: #2a2c30;
}
/* Screen: normal-flow tall flex column (was absolute inside the image) */
#pd-root.pd-skin-phone .pd-phone > .pd-screen,
#pd-root.pd-skin-phone .pd-screen {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: auto !important; min-height: 560px !important; max-height: 92vh !important;
  border-radius: 30px !important; background: #0b1a2e !important;
  display: flex !important; flex-direction: column !important;
  overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
/* Header → Goal Power logo band; hide the "Power Dialer" text, float icon btns */
#pd-root.pd-skin-phone .pd-screen .pd-header {
  background-image: var(--pd-logo-img) !important; background-repeat: no-repeat !important;
  background-position: center 9px !important; background-size: 160px auto !important;
  background-color: transparent !important;
  min-height: 58px !important; height: 58px !important; position: relative !important;
  padding: 8px 8px 4px !important; display: block !important;
}
/* Refresh relocated into the skin bar (first button) — hide the header copy. */
#pd-root.pd-skin-phone #pd-refresh { display: none !important; }
/* Classic phone skin — v1.34: same CSS-drawn frame + two-screen layout as
   branded, but NO Goal Power logo. Header collapses to a thin blank strip. */
#pd-root.pd-skin-phone.pd-classic-mode .pd-screen .pd-header {
  background-image: none !important;
  min-height: 16px !important; height: 16px !important;
}
#pd-root.pd-skin-phone .pd-screen .pd-title { display: none !important; }
#pd-root.pd-skin-phone .pd-screen .pd-header-btns {
  position: absolute !important; right: 6px !important; top: 6px !important; margin: 0 !important;
  display: flex !important; gap: 4px !important; z-index: 3 !important;
}
/* ══ TWO-SCREEN MODEL (verified hooks: .pd-session-idle = pre-session Start
   screen; :not(.pd-session-idle) = in-session Session/Call screen, covers both
   parked-no-call and .pd-incall). Order EVERY screen + body child in each state
   so nothing floats (incomplete ordering = the scramble we already fixed). ══ */

/* ── START screen (pre-session): logo · Setup(prominent) · mode · toggles ·
   Start Session · History/Stats at bottom. No call buttons here. ── */
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-statusbar     { order: 0 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-header        { order: 1 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-inline-actions{ order: 2 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > #pd-mode-row      { order: 3 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > #pd-mode-info     { order: 4 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > #pd-desk-pip-row  { order: 5 !important; display: none !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > #pd-test-banner   { order: 6 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-body          { order: 7 !important; flex: 1 1 auto !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-footer        { order: 8 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-gesture       { order: 9 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-body > .pd-status-row    { order: 1 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-body > #pd-toggles-area  { order: 2 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-body > #pd-session-area  { order: 3 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-body > .pd-info          { order: 4 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-body > #pd-prospect-area { display: none !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-body > .pd-profile-row   { display: none !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-body > .pd-stats         { display: none !important; }
/* Setup pill prominence on the Start screen (new agents click it first) */
#pd-root.pd-skin-phone.pd-session-idle .pd-inline-actions { gap: 6px !important; }
#pd-root.pd-skin-phone.pd-session-idle #pd-setup-btn {
  flex: 1.8 !important; font-weight: 800 !important; font-size: 13px !important;
  box-shadow: 0 0 0 1px rgba(230,57,70,0.55), 0 2px 8px rgba(230,57,70,0.35) !important;
}

/* ── SESSION / CALL screen (in-session): call buttons + status + transcript on
   top (greyed when parked, lit on a live call — existing #pd-prospect-area
   render); then Autopilot/dial/End, toggles, stats; and Mobile/Desktop +
   devices + History/Stats/Setup all sink to the BOTTOM. ── */
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > .pd-statusbar     { order: 0 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > .pd-header        { order: 1 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > #pd-test-banner   { order: 2 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > .pd-body          { order: 3 !important; flex: 1 1 auto !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > #pd-desk-pip-row  { order: 6 !important; display: none !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > #pd-mode-row      { order: 7 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > #pd-mode-info     { order: 8 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > .pd-inline-actions{ order: 9 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > .pd-footer        { order: 10 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen > .pd-gesture       { order: 11 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-body > #pd-prospect-area { order: 1 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-body > #pd-session-area  { order: 2 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-body > .pd-status-row    { order: 3 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-body > #pd-toggles-area  { order: 4 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-body > .pd-stats         { order: 5 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-body > .pd-info          { order: 6 !important; }
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-body > .pd-profile-row   { display: none !important; }
/* Show the greyed call-button preview on the SESSION screen (was hidden by the
   old cramped-frame space-saver at ~line 5164). It renders greyed when parked,
   and JS swaps in the live lit buttons when a prospect connects. Still hidden on
   the pre-session Start screen (prospect-area display:none there). Verified live:
   prospect-area 0→117px, 3 greyed buttons appear. */
#pd-root.pd-skin-phone:not(.pd-session-idle) .pd-screen .pd-incall.pd-incall-idle { display: block !important; }
#pd-root.pd-skin-phone .pd-mode-hint { font-size: 10px !important; line-height: 1.3 !important; }

/* Mobile App / Desktop buttons — halve the vertical height, keep width, no wrap. */

/* Mobile App / Desktop buttons — halve the vertical height, keep width, no wrap. */
#pd-root.pd-skin-phone .pd-mode-btn { padding-top: 3px; padding-bottom: 3px; white-space: nowrap; min-height: 0; }

/* ══ v1.34 refinements (2026-08-04, from Dustin's screenshots) ══ */

/* Prominent Setup CTA at the top of the phone Start screen; the small
   History/Stats/Setup pill row moves to the BOTTOM. */
#pd-setup-cta { display: none; }
#pd-root.pd-skin-phone.pd-session-idle #pd-setup-cta {
  display: block !important; order: 2 !important; padding: 2px 12px 2px !important;
}
/* High specificity (2 ids + class) + !important so the phone-skin
   `.pd-screen *` background-stripper (content.css ~4997) can't flatten it. */
html body #pd-root.pd-skin-phone #pd-setup-cta-btn {
  width: 100%; padding: 11px 12px; cursor: pointer;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #e63946, #b02432) !important;
  background-color: #d62f3c !important; color: #fff !important;
  border: 1px solid rgba(0,0,0,0.3) !important; font-family: inherit;
  font-size: 14px !important; font-weight: 800; letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(230,57,70,0.5) !important; text-shadow: none !important;
}
html body #pd-root.pd-skin-phone #pd-setup-cta-btn:hover { filter: brightness(1.08); }
/* Re-order the Start screen now that the Setup CTA owns slot 2: pills to bottom. */
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-body          { order: 7 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-inline-actions { order: 8 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-footer         { order: 9 !important; }
#pd-root.pd-skin-phone.pd-session-idle .pd-screen > .pd-gesture        { order: 10 !important; }

/* Devices button — bump the font up to match the Setup pill. */
html body #pd-root.pd-skin-phone .pd-audio-settings-btn,
html body #pd-root.pd-skin-phone .pd-audio-settings-lbl { font-size: 13px !important; }
html body #pd-root.pd-skin-phone .pd-audio-settings-icon { font-size: 15px !important; }

/* Call-button row: center the buttons so the 4th (Mute) doesn't orphan to
   the left. Flex-wrap + justify-center puts 3 on a row and centers the 4th. */
#pd-root.pd-skin-phone .pd-incall-btnrow {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important;
  gap: 10px 18px !important;
}
#pd-root.pd-skin-phone .pd-incall-btnrow .pd-callbtn { flex: 0 0 auto !important; width: 82px !important; }

/* During-call header — make the ringing status + avatar more compact. */
#pd-root.pd-skin-phone .pd-incall { margin-top: 2px !important; }
#pd-root.pd-skin-phone .pd-incall-avatar { width: 44px !important; height: 44px !important; font-size: 16px !important; margin-bottom: 6px !important; }
#pd-root.pd-skin-phone .pd-incall-label { margin-bottom: 4px !important; font-size: 9px !important; }
#pd-root.pd-skin-phone .pd-incall-num { font-size: 15px !important; }
#pd-root.pd-skin-phone .pd-incall-status { font-size: 10px !important; padding: 3px 8px !important; margin-top: 6px !important; }

/* Greyed idle call-preview: declutter — drop the avatar + "In-call view"
   label, keep a compact "No active call" line above the greyed button row. */
#pd-root.pd-skin-phone .pd-incall-idle .pd-incall-avatar,
#pd-root.pd-skin-phone .pd-incall-idle .pd-incall-label { display: none !important; }
#pd-root.pd-skin-phone .pd-incall-idle .pd-incall-num { font-size: 13px !important; opacity: 0.72 !important; }
#pd-root.pd-skin-phone .pd-incall-idle .pd-incall-sub { font-size: 10px !important; }

/* v1.34 — Dial-any-number header row: "Dial any number" label on the left,
   From: chooser on the right (even with the label). Input + Call then sit
   together on the row below (the 2-col grid fits them side by side again). */
.pd-manual-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pd-manual-head .pd-section-label { margin: 6px 0 4px !important; }

/* v1.34 — Manual "dial from" chooser: pin an owned number for a manual call
   (spam-check per number). */
.pd-manual-from {
  flex: 0 0 auto; max-width: 118px; padding: 5px 6px; border-radius: 6px;
  background: rgba(0,0,0,0.42); color: #fff; border: 1px solid rgba(255,255,255,0.22);
  font-size: 11px; font-family: inherit; cursor: pointer;
}
.pd-manual-from option { background: #12233b; color: #fff; }
html body #pd-root.pd-skin-phone .pd-manual-from {
  background: rgba(0,0,0,0.55) !important; color: #fff !important;
  border-color: rgba(255,255,255,0.25) !important; box-shadow: none !important;
}

/* ── v1.33.9.4 — Stats hub (8-day history recall + all-time + reset) ─────
   Reuses .pd-session-summary for the slide-out shell. Adds the scrollable
   history list, the recall rows, the reset button, and the jersey entry. */
.pd-stats-hub .pd-ssum-body { overflow-y: auto; max-height: calc(100vh - 150px); }
.pd-stats-reset {
  display: block; width: 100%; margin: 12px 0 4px;
  background: transparent; color: #ff9d9d;
  border: 1px solid rgba(255, 90, 90, 0.4); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pd-stats-reset:hover { background: rgba(255, 90, 90, 0.14); color: #ffbfbf; }
.pd-stats-hist { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pd-stats-empty { color: #9fb1c9; font-size: 12px; padding: 10px 2px; }
.pd-stats-hist-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px;
  padding: 9px 11px; cursor: pointer; color: #e9eef7;
  font-family: inherit; font-size: 12px;
  transition: background 0.15s, border-color 0.15s;
}
.pd-stats-hist-row:hover { background: rgba(255, 210, 63, 0.10); border-color: rgba(255, 210, 63, 0.4); }
.pd-stats-hist-when { font-weight: 700; color: #ffd23f; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-stats-hist-stat { flex: 1; color: #c7d3e4; text-align: center; font-variant-numeric: tabular-nums; }
.pd-stats-hist-view { color: #8fc9a5; font-weight: 600; white-space: nowrap; }
.pd-jersey-hub-btn {
  display: block; width: 100%; margin-top: 10px;
  background: rgba(255, 210, 63, 0.14); color: #ffd23f;
  border: 1px solid rgba(255, 210, 63, 0.4); border-radius: 8px;
  padding: 9px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.3px; transition: background 0.15s;
}
.pd-jersey-hub-btn:hover { background: rgba(255, 210, 63, 0.24); }
