/* Chatly support widget — floating button + modal. On-brand dark glass. */
:root { --sup-grad: linear-gradient(120deg, #36C5FF, #7C5CFF 52%, #FF4DA6); }

/* ---------- modal ---------- */
.sup { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.sup[hidden] { display: none; }
.sup__backdrop { position: absolute; inset: 0; background: rgba(6,6,11,0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: supFade 0.25s ease; }
.sup__card {
  position: relative; width: 100%; max-width: 430px;
  background: linear-gradient(180deg, rgba(22,22,33,0.96), rgba(13,13,20,0.97));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 1.7rem 1.6rem 1.8rem;
  box-shadow: 0 50px 110px -34px rgba(0,0,0,0.85);
  overflow: hidden;
  animation: supPop 0.32s cubic-bezier(.2,.8,.2,1);
}
/* gradient hairline along the top */
.sup__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sup-grad); }
.sup__x { position: absolute; top: 0.8rem; right: 0.9rem; background: none; border: 0; color: var(--muted, #9AA0B4); font-size: 1.05rem; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: 8px; line-height: 1; }
.sup__x:hover { color: var(--ink, #fff); background: rgba(255,255,255,0.07); }

.sup__head { text-align: center; margin-bottom: 1.3rem; }
.sup__icon {
  width: 52px; height: 52px; margin: 0 auto 0.8rem;
  display: grid; place-items: center; font-size: 1.5rem;
  border-radius: 15px; background: rgba(124,92,255,0.16); border: 1px solid rgba(124,92,255,0.3);
}
.sup__head h3 { font-family: "Clash Display","Satoshi",sans-serif; font-weight: 600; font-size: 1.35rem; color: var(--ink, #F4F5FA); }
.sup__head p { color: var(--muted, #9AA0B4); font-size: 0.92rem; margin-top: 0.35rem; line-height: 1.5; }

.sup__form { display: flex; flex-direction: column; gap: 0.9rem; }
.sup__field { display: flex; flex-direction: column; gap: 0.35rem; }
.sup__field > span { font-size: 0.84rem; color: var(--muted, #9AA0B4); font-weight: 500; }
.sup__field > span em { font-style: normal; color: var(--faint, #6A6F82); font-weight: 400; }
.sup__field input, .sup__field textarea {
  width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--ink, #F4F5FA);
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  padding: 0.7em 0.85em; resize: vertical;
}
.sup__field input:focus, .sup__field textarea:focus { outline: none; border-color: rgba(124,92,255,0.65); box-shadow: 0 0 0 3px rgba(124,92,255,0.15); }
.sup__captcha strong { color: var(--ink, #F4F5FA); font-family: "Clash Display", sans-serif; }
/* honeypot — visually gone, still in the DOM for bots */
.sup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sup__err { color: #ff5d73; font-size: 0.86rem; margin: -0.2rem 0 0; }

.sup__submit {
  margin-top: 0.4rem; width: 100%;
  font-family: inherit; font-weight: 700; font-size: 0.98rem; color: #0a0a0f;
  background: var(--sup-grad); border: 0; border-radius: 999px; padding: 0.85em 1.2em; cursor: pointer;
  box-shadow: 0 16px 40px -16px rgba(124,92,255,0.7);
  transition: transform 0.18s ease, box-shadow 0.2s ease, opacity 0.2s;
}
.sup__submit:hover { transform: translateY(-2px); }
.sup__submit:disabled { opacity: 0.6; cursor: default; transform: none; }

/* success state */
.sup__done { text-align: center; padding: 0.8rem 0 0.4rem; }
.sup__check { width: 58px; height: 58px; margin: 0 auto 0.9rem; display: grid; place-items: center; font-size: 1.6rem; color: #0a0a0f; border-radius: 50%; background: linear-gradient(135deg, #46e0a8, #36C5FF); box-shadow: 0 12px 34px -12px rgba(70,224,168,0.7); animation: supPop 0.4s cubic-bezier(.2,1.4,.4,1); }
.sup__done h3 { font-family: "Clash Display","Satoshi",sans-serif; font-weight: 600; font-size: 1.35rem; color: var(--ink, #F4F5FA); }
.sup__done p { color: var(--muted, #9AA0B4); margin: 0.4rem 0 1.3rem; }

@keyframes supFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes supPop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sup__card, .sup__backdrop, .sup__check { animation: none; } }