/* ported by offshore-cursor-agent — VistaSign live-only add-on, 2026-09-27 */
/* vv-vistasign-p6-ux 20260922T1755CT — EN/ta/te/hi/zh left rail + solid upload shell */
:root {
  --vv-vs-forest: #071910;
  --vv-vs-gold: #D4AF37;
  --vv-vs-ink: #e8f2ed;
  --vv-vs-rail-w: 88px;
}
@media (min-width: 720px) {
  :root { --vv-vs-rail-w: 168px; }
}
html.vv-vs-p6-has-rail body {
  background: var(--vv-vs-forest) !important;
  padding-left: calc(var(--vv-vs-rail-w) + env(safe-area-inset-left, 0px));
}
.vv-vs-p6-rail {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: calc(var(--vv-vs-rail-w) + env(safe-area-inset-left, 0px));
  padding: calc(10px + env(safe-area-inset-top, 0px)) 8px calc(12px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
  z-index: 9400;
  background: linear-gradient(180deg, #0a1a17 0%, #071910 100%);
  border-right: 1.5px solid var(--vv-vs-gold);
  color: var(--vv-vs-ink);
  display: flex; flex-direction: column; gap: 10px;
  box-sizing: border-box;
  overflow-y: auto;
}
.vv-vs-p6-rail-head strong {
  display: block; font: 600 12px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .04em; color: var(--vv-vs-gold); margin-bottom: 6px;
}
.vv-vs-p6-lang { display: flex; gap: 4px; flex-wrap: wrap; }
.vv-vs-p6-lang button {
  flex: 1 1 40%; min-height: 28px; border-radius: 999px;
  border: 1px solid rgba(212,175,55,.45); background: transparent;
  color: var(--vv-vs-ink); font-size: 10px; font-weight: 700; cursor: pointer;
  padding: 2px 4px; line-height: 1.15;
}
.vv-vs-p6-lang button.on { background: var(--vv-vs-gold); color: #071910; border-color: var(--vv-vs-gold); }
.vv-vs-p6-rail-nav { display: flex; flex-direction: column; gap: 6px; }
.vv-vs-p6-rail-nav button {
  min-height: 44px; border-radius: 12px;
  border: 1px solid rgba(212,175,55,.35); background: rgba(0,66,54,.35);
  color: var(--vv-vs-ink); font-size: 11px; font-weight: 700;
  text-align: left; padding: 8px 10px; cursor: pointer;
}
.vv-vs-p6-rail-note { margin-top: auto; font-size: 10px; line-height: 1.35; color: #9bb5a8; }
.vv-vs-p6-shell {
  position: sticky; top: calc(8px + env(safe-area-inset-top, 0px));
  z-index: 20; margin: 8px 12px 12px; background: var(--vv-vs-forest) !important;
}
.vv-vs-p6-shell-frame {
  min-height: min(52vh, 420px); max-height: 70vh;
  border: 1.5px solid var(--vv-vs-gold); border-radius: 16px;
  background: #0a1a17 !important; overflow: hidden;
  display: flex; flex-direction: column;
}
.vv-vs-p6-shell-stage {
  flex: 1; min-height: 280px; display: grid; place-items: center;
  background: #071910 !important; color: var(--vv-vs-ink);
}
.vv-vs-p6-place { opacity: .7; font-size: 13px; }
.vv-vs-p6-pulse {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(212,175,55,.25); border-top-color: var(--vv-vs-gold);
  animation: vvVsP6Spin .8s linear infinite;
}
@keyframes vvVsP6Spin { to { transform: rotate(360deg); } }
.vv-vs-p6-ready-mark, .vv-vs-p6-fail-mark {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
}
.vv-vs-p6-ready-mark { background: rgba(212,175,55,.2); color: var(--vv-vs-gold); }
.vv-vs-p6-fail-mark { background: rgba(176,0,32,.25); color: #ff8a8a; }
.vv-vs-p6-shell-status {
  padding: 8px 12px; font-size: 12px; color: #c9ddd4;
  border-top: 1px solid rgba(212,175,55,.25);
  background: #0a1a17 !important; min-height: 36px;
}
.vv-vs-p6-toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px); z-index: 9800;
  max-width: min(92vw, 420px); padding: 10px 14px; border-radius: 12px;
  background: #0a1a17; color: #e8f2ed; border: 1.5px solid var(--vv-vs-gold);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  font-size: 13px; font-weight: 600;
}
.vv-vs-p6-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.vv-vs-p6-toast[data-kind="bad"] { border-color: #c44; color: #ffd0d0; }
@media (max-width: 719px) {
  .vv-vs-p6-rail-nav button { font-size: 10px; padding: 8px 6px; text-align: center; }
  .vv-vs-p6-rail-head strong { font-size: 10px; }
  .vv-vs-p6-lang button { font-size: 9px; min-height: 26px; }
}