/* jaspayaja v36 — survei bantuan setelah live chat (lihat jp-survey.js). Menyatu dengan widget gelap .jps-* */
[data-testid="visitor-chat-post-panel"] > .jps-rate,
[data-testid="visitor-chat-post-panel"] > .jps-thanks,
[data-testid="visitor-chat-post-panel"] > .jps-transcript { display: none !important; }
.jsv-host:empty { display: none; }

.jsv { display: flex; flex-direction: column; gap: 18px; color: #e5e7eb; animation: jsv-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; }
.jsv-title { margin: 0; font-size: 15px; font-weight: 800; color: #fff; }
.jsv-sub { margin: 3px 0 0; font-size: 12.5px; color: #94a3b8; line-height: 1.45; }
.jsv-q { display: flex; flex-direction: column; gap: 10px; }
.jsv-qrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jsv-ql { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: #f1f5f9; }

.jsv-faces { display: flex; justify-content: space-between; gap: 6px; }
.jsv-face {
  width: 46px; height: 46px; padding: 3px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
  box-shadow: 0 0 0 2px transparent; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.jsv-face svg { display: block; width: 100%; height: 100%; }
.jsv-face:hover { transform: translateY(-2px) scale(1.06); }
.jsv-faces:has([aria-checked="true"]) .jsv-face:not([aria-checked="true"]) { filter: saturate(0.45) opacity(0.7); }
.jsv-face[aria-checked="true"] { transform: scale(1.1); box-shadow: 0 0 0 3px #161c2b, 0 0 0 5px rgba(255, 255, 255, 0.75); }
.jsv-face:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }
.jsv-face-label { margin: 0; min-height: 18px; font-size: 13px; font-weight: 600; color: #cbd5e1; }

.jsv-radios { display: flex; flex-direction: column; gap: 4px; }
.jsv-radio { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-size: 13.5px; transition: background-color 0.15s ease; }
.jsv-radio:hover { background: rgba(255, 255, 255, 0.04); }
.jsv-radio input { position: absolute; opacity: 0; pointer-events: none; }
.jsv-dot { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #64748b; transition: border-color 0.15s ease; }
.jsv-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #a78bfa; transform: scale(0); transition: transform 0.15s ease; }
.jsv-radio:has(input:checked) .jsv-dot { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18); }
.jsv-radio:has(input:checked) .jsv-dot::after { transform: scale(1); }
.jsv-radio:has(input:focus-visible) .jsv-dot { outline: 2px solid #a78bfa; outline-offset: 2px; }

.jsv-scale { position: relative; display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 2px; }
.jsv-scale-track { position: absolute; left: 12px; right: 12px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.jsv-scale-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f6fb3, #57a77f, #a3dc4d); transition: width 0.25s ease; }
.jsv-step {
  position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.jsv-step:hover { transform: scale(1.18); }
.jsv-step[aria-checked="true"] { transform: scale(1.3); box-shadow: 0 0 0 3px #161c2b, 0 0 0 5px var(--c); }
.jsv-step:focus-visible { outline: 2px solid #a78bfa; outline-offset: 4px; }
.jsv-scale-ends { display: flex; justify-content: space-between; font-size: 12.5px; color: #94a3b8; }
.jsv-ease-now { color: #e2e8f0; }

.jsv-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #475569; color: transparent; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.jsv-check.on { color: #34d399; border-color: #34d399; background: rgba(52, 211, 153, 0.1); }
.jsv-email { display: none; flex-direction: column; gap: 8px; }
.jsv-email.on { display: flex; animation: jsv-in 0.25s ease both; }
.jsv-req { color: #f43f5e; margin-right: 4px; }
.jsv-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: #f8fafc; background: #111827; border: 1px solid #334155;
  border-radius: 12px; outline: none; padding: 11px 13px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jsv-input:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2); }
.jsv-ta { resize: vertical; min-height: 60px; line-height: 1.5; }

.jsv-err { margin: 0; font-size: 12.5px; font-weight: 600; color: #fb7185; }
.jsv-err:empty { display: none; }
.jsv-ok { margin: 0; font-size: 12.5px; font-weight: 600; color: #34d399; }
.jsv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jsv-btn { height: 46px; border-radius: 14px; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.jsv-btn:active { transform: scale(0.98); }
.jsv-btn:disabled { opacity: 0.6; cursor: default; }
.jsv-ghost { color: #c4b5fd; background: transparent; border: 1.5px solid rgba(167, 139, 250, 0.55); }
.jsv-ghost:hover { background: rgba(167, 139, 250, 0.1); }
.jsv-pri { color: #fff; border: 0; background: linear-gradient(90deg, #6d28d9, #db2777); box-shadow: 0 12px 26px -14px rgba(219, 39, 119, 0.7); }

.jsv-done { gap: 10px; }
.jsv-done-row { display: flex; align-items: center; gap: 12px; }
.jsv-done-face { width: 40px; height: 40px; flex: none; }
.jsv-done-face svg { width: 100%; height: 100%; display: block; }
.jsv-skip { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: #94a3b8; }
.jsv-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: #c4b5fd; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

@keyframes jsv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jsv, .jsv-email.on { animation: none; } .jsv-face, .jsv-step { transition: none; } }