/* The support button in the bottom right corner and the message panel it opens. */

.supportfab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: grid; place-items: center; width: 50px; height: 50px;
  border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand);
  box-shadow: var(--sh-pop); cursor: pointer;
  transition: background .15s ease, transform .16s ease;
}
.supportfab:hover { background: var(--brand-hover); transform: translateY(-2px); }
.supportfab svg { width: 21px; height: 21px; }

.supportpanel {
  position: fixed; right: 22px; bottom: 84px; z-index: 60;
  width: min(360px, calc(100vw - 44px)); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--sh-float);
}
.supportpanel .sp-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--line); }
.supportpanel .sp-head b { display: block; font-size: var(--fs-m); }
.supportpanel .sp-head span { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); }
.supportpanel .sp-head .icon-btn { margin-left: auto; font-size: 18px; line-height: 1; }
.supportpanel .sp-body { padding: 14px 16px; }
.supportpanel .sp-body textarea { min-height: 96px; resize: vertical; }
.supportpanel .sp-body .bad { color: var(--bad); }
.supportpanel .sp-foot { padding: 0 16px 16px; }
.supportpanel .sp-foot .btn { width: 100%; }

@media (max-width: 700px) {
  .supportfab { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  .supportpanel { right: 16px; bottom: 72px; }
}