/* vv-vistasign-p4 20260919T200000Z
 * Hosted signer chrome, library, mobile ergonomics.
 * Do not restyle MLS gold-frame / Super Map.
 */

body.vv-vs-p4-signer,
[data-vv-vs-p4-signer="1"] {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh;
  background: #071910;
  color: #f5ec9b;
}

.vv-vs-p4-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: #0e3429;
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
}

.vv-vs-p4-brand {
  font-family: Georgia, serif;
  font-size: 22px;
  color: #d4af37;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
}

.vv-vs-p4-title {
  flex: 1 1 140px;
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vv-vs-p4-hit,
.vv-vs-p4-bar a,
.vv-vs-p4-actions button,
.vv-vs-p4-actions a,
.vv-vs-p4-lib button,
.vv-vs-p4-lib a,
[data-vv-vs-p4-chrome] button,
[data-vv-vs-p4-chrome] a {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: #071910;
  color: #f5ec9b;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  cursor: pointer;
}

.vv-vs-p4-primary {
  background: #d4af37 !important;
  color: #0a1a17 !important;
  font-weight: 700;
}

.vv-vs-p4-secondary {
  background: transparent !important;
  border-style: dashed !important;
  opacity: 0.9;
}

.vv-vs-p4-note {
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(245, 236, 155, 0.82);
}

.vv-vs-p4-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #0a1a17;
}

.vv-vs-p4-embed,
[data-vv-vs-p4-embed] {
  display: block;
  width: 100%;
  min-height: calc(100dvh - 220px);
  border: 0;
  background: #fff;
}

.vv-vs-p4-missing {
  margin: 24px auto;
  max-width: 520px;
  padding: 20px;
  border: 1px dashed rgba(212, 175, 55, 0.4);
  border-radius: 16px;
}

.vv-vs-p4-actions {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: #0e3429;
  border-top: 1px solid rgba(212, 175, 55, 0.45);
}

body.vv-vs-p4-signer [data-vv-vistasign-seal],
body.vv-vs-p4-signer .vv-vs-p0-seal-panel,
body.vv-vs-p4-signer [data-vv-vs-p0-seal-panel],
body.vv-vs-p4-signer .vv-demo-banner,
body.vv-vs-p4-signer [data-vv-vs-p3-prelaunch],
body.vv-vs-p4-on-signer nav[aria-label="VistaSign dock"],
body.vv-vs-p4-on-signer [data-vv-vistasign-dock],
body.vv-vs-p4-on-signer .vv-vs-p0-seal-panel,
body.vv-vs-p4-on-signer .vv-demo-banner {
  display: none !important;
  pointer-events: none !important;
}

.vv-vs-p4-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
  -webkit-overflow-scrolling: touch;
}
.vv-vs-p4-thumbs button {
  min-width: 56px;
  min-height: 72px;
  flex: 0 0 auto;
}

.vv-vs-p4-lib {
  margin: 16px auto 120px;
  max-width: 720px;
  padding: 16px;
  background: #0a1a17;
  color: #f5ec9b;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
}
.vv-vs-p4-lib h2 {
  margin: 0 0 8px;
}
.vv-vs-p4-lib-empty {
  padding: 16px;
  border: 1px dashed rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  color: rgba(245, 236, 155, 0.8);
}
.vv-vs-p4-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vv-vs-p4-tag {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  font-size: 12px;
}

body.vv-vs-p4-narrow .vv-vs-p4-title {
  flex-basis: 100%;
  order: 5;
}
body.vv-vs-p4-narrow .vv-vs-p4-actions {
  justify-content: stretch;
}
body.vv-vs-p4-narrow .vv-vs-p4-actions .vv-vs-p4-hit {
  flex: 1 1 46%;
}

body.vv-vs-p4-on-signer [aria-label="Open Jessica"],
body.vv-vs-p4-on-signer [aria-label*="Jessica V"] {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 16 !important;
}

[data-vv-vs-p4-ghost="1"] {
  display: none !important;
}

[data-vv-vs-p4-scan-sign] {
  min-height: 48px !important;
  min-width: 48px !important;
}

.vv-vs-p4-pip,
[data-vv-vs-p4-pip] {
  position: fixed;
  right: 12px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 132px;
  height: 176px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #d4af37;
  background: #000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.vv-vs-p4-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-vv-vs-p4-export] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
[data-vv-vs-p4-export] select {
  min-height: 44px;
  min-width: 88px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: #071910;
  color: #f5ec9b;
}

.vv-vs-p4-pip-cap {
  position: absolute;
  left: 0;  right: 0;
  bottom: 0;
  padding: 4px 6px;
  font-size: 10px;
  background: rgba(7, 25, 16, 0.75);
  color: #f5ec9b;
}

.vv-vs-p4-wa,
[data-vv-vs-p4-wa-join] {
  margin: 12px 12px 120px;
  padding: 14px 16px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 14px;
  background: #1a2a12;
  color: #f5ec9b;
}
.vv-vs-p4-wa h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.vv-vs-p4-jessica-parked,
[data-vv-vs-p4-jessica-parked],
body.vv-vs-p4-dockpad [aria-label="Open Jessica"],
body.vv-vs-p4-dockpad [aria-label*="Jessica V"],
body.vv-vs-p4-dockpad [data-vv-vs-p1-jessica-btn] {
  position: fixed !important;
  right: 10px !important;
  top: calc(72px + env(safe-area-inset-top, 0px)) !important;
  bottom: auto !important;
  z-index: 18 !important;
}

.vv-vs-p4-backtop {
  right: 10px !important;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}

.vv-vs-p4-above-dock {
  margin-bottom: calc(var(--vv-vs-dock, 80px) + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: 8px;
}

body.vv-vs-p4-dockpad,
body.vv-vs-p4-narrow,
body.vv-vs-p3-narrow {
  padding-bottom: calc(var(--vv-vs-dock, 80px) + 24px + env(safe-area-inset-bottom, 0px)) !important;
}

[data-vv-vs-p4-memory-off="1"] {
  opacity: 0.45;
  pointer-events: none;
}

.vv-vs-p4-phone,
[data-vv-vs-p2-phone-wrap],
.vv-vs-p2-phone-wrap {
  margin: 8px 16px !important;
  padding: 0 4px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
}

.vv-vs-p4-more,
[role="menu"].vv-vs-p4-more {
  max-height: calc(100dvh - var(--vv-vs-dock, 80px) - 96px) !important;
  overflow-y: auto !important;
  padding-bottom: 16px;
}

.vv-vs-p4-chips-parked,
body.vv-vs-p4-editor .vv-vs-p1-chips,
body.vv-vs-p4-editor [data-vv-vs-p1-chips] {
  bottom: calc(var(--vv-vs-dock, 80px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 30 !important;
}

.vv-vs-p4-complete,
button.vv-vs-p4-complete {
  width: calc(100% - 24px);
  margin: 8px 12px 16px;
  position: relative;
  z-index: 20;
}

body.vv-vs-p4-editor .vv-vs-p0-seal-panel,
body.vv-vs-p4-editor [data-vv-vistasign-seal],
body.vv-vs-p4-editor [data-vv-vistasign-seal-panel],
body.vv-vs-p4-send .vv-vs-p0-seal-panel {
  display: none !important;
}

body.vv-vs-p4-editor [class*="ribbon" i],
body.vv-vs-p4-editor [role="toolbar"] {
  max-height: 88px;
  overflow-x: auto;
  flex-wrap: nowrap !important;
}

body.vv-vs-p4-send [class*="wizard" i] [class*="tile" i],
body.vv-vs-p4-send .vv-vs-p4-source-tile {
  max-height: 120px !important;
  min-height: 88px !important;
}

.vv-vs-p4-wizard-footer,
body.vv-vs-p4-send footer,
body.vv-vs-p4-send [class*="wizard" i] footer {
  position: sticky !important;
  bottom: calc(var(--vv-vs-dock, 80px) + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 45 !important;
  background: #0e3429;
  padding-bottom: 12px;
}

.vv-vs-p4-scan-dialog,
[data-vv-vs-p3-camera-modal] .vv-vs-p3-once-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.vv-vs-p4-scan-dialog button,
[data-vv-vs-p3-camera-modal] .vv-vs-p3-once-card button {
  flex: 1 1 140px;
  min-height: 44px;
  margin: 0 4px 8px;
}

body.vv-vs-p4-features a.vv-vs-p4-feature-link {
  display: block;
  min-height: 44px;
  margin: 8px 0;
}

@media (max-width: 430px) {
  body.vv-vs-p4-narrow [data-vv-vs-p3-panel],
  body.vv-vs-p4-narrow [data-vv-vs-p4-wa-join],
  body.vv-vs-p4-narrow .vv-vs-p4-lib,
  body.vv-vs-p4-narrow [data-vv-vs-p3-panel="wa-join"],
  body.vv-vs-p4-narrow [class*="empty" i] {
    margin-bottom: calc(var(--vv-vs-dock, 80px) + 40px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.vv-vs-p4-narrow .vv-vs-p4-actions {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  body.vv-vs-p4-narrow .vv-vs-p4-title {
    min-width: 160px;
    flex-basis: auto;
  }
}