.saif-login-support {
  --saif-support-bottom: max(18px, calc(18px + env(safe-area-inset-bottom)));
  box-sizing:border-box;
  position: fixed;
  z-index: 40;
  left: max(18px, env(safe-area-inset-left));
  bottom: var(--saif-support-bottom);
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(224, 196, 123, .7);
  border-radius: 22px;
  color: #fffdf6;
  background: linear-gradient(145deg, #1f5d47 0%, #173d30 62%, #0f2c23 100%);
  box-shadow: 0 15px 32px rgba(14, 45, 34, .24), inset 0 1px 0 rgba(255, 255, 255, .2);
  cursor: pointer;
  isolation: isolate;
  transition: transform 240ms cubic-bezier(.2, .75, .25, 1), box-shadow 240ms ease, border-color 240ms ease;
}
.saif-login-support::before { content: ''; position: absolute; inset: -7px; z-index: -1; border: 1px solid rgba(198, 160, 76, .42); border-radius: 27px; opacity: 0; transform: scale(.9); pointer-events: none; }
.saif-login-support::after { content: attr(data-tooltip); position: absolute; left: 0; bottom: calc(100% + 11px); padding: 8px 11px; border: 1px solid rgba(224, 196, 123, .3); border-radius: 9px; color: #f8f2e1; background: rgba(19, 48, 38, .96); box-shadow: 0 10px 24px rgba(14, 45, 34, .2); font: 700 12px/1.2 Tahoma, Arial, sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity 180ms ease, transform 220ms ease; }
.saif-login-support:hover,.saif-login-support:focus-visible { border-color: #e0c47b; box-shadow: 0 19px 36px rgba(14, 45, 34, .3), 0 0 0 5px rgba(198, 160, 76, .11), inset 0 1px 0 rgba(255, 255, 255, .24); transform: translateY(-4px) scale(1.04); }
.saif-login-support:hover::before,.saif-login-support:focus-visible::before { animation: saif-support-ring 720ms cubic-bezier(.2, .65, .3, 1) 1; }
.saif-login-support:hover::after,.saif-login-support:focus-visible::after { opacity: 1; transform: translateY(0); }
.saif-login-support:focus-visible { outline: 3px solid rgba(224, 196, 123, .95); outline-offset: 4px; }
.saif-login-support:active,.saif-login-support.is-pressed { transform: translateY(-1px) scale(.97); transition-duration: 120ms; }
.saif-login-support svg { width: 39px; height: 39px; overflow: visible; }
.saif-login-support .saif-support-shield { fill: rgba(255, 253, 246, .08); stroke: currentColor; stroke-width: 1.35; }
.saif-login-support .saif-support-bubble { fill: #f5e6bd; stroke: #f5e6bd; stroke-width: 1.35; transform-origin: 24px 24px; transition: transform 240ms cubic-bezier(.2, .75, .25, 1); }
.saif-login-support .saif-support-dot { fill: #173d30; transition: transform 220ms ease; }
.saif-login-support .saif-support-spark { fill: #e0c47b; transform-origin: 33px 13px; transition: transform 240ms cubic-bezier(.2, .75, .25, 1), opacity 240ms ease; }
.saif-login-support:hover .saif-support-bubble,.saif-login-support:focus-visible .saif-support-bubble { transform: translateY(-1px) scale(1.045); }
.saif-login-support:hover .saif-support-dot,.saif-login-support:focus-visible .saif-support-dot { transform: translateX(1px); }
.saif-login-support:hover .saif-support-spark,.saif-login-support:focus-visible .saif-support-spark { transform: translate(1px, -1px) scale(1.08); }
@keyframes saif-support-ring { 0% { opacity: .65; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.16); } }
@media (max-width: 600px) { /* Keep support in normal flow after the public-login footer so it never covers a CTA. */ #auth-screen.public-landing-screen .saif-login-support { position: relative; left: auto; bottom: auto; margin: 0 auto max(14px, env(safe-area-inset-bottom)); width: 50px; height: 50px; border-radius: 18px; } .saif-login-support::before { border-radius: 22px; } .saif-login-support svg { width: 31px; height: 31px; } .saif-login-support::after { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .saif-login-support,.saif-login-support::after,.saif-login-support .saif-support-bubble,.saif-login-support .saif-support-dot,.saif-login-support .saif-support-spark { transition-duration: 1ms; } .saif-login-support:hover::before,.saif-login-support:focus-visible::before { animation: none; } .saif-login-support:hover,.saif-login-support:focus-visible,.saif-login-support:active,.saif-login-support.is-pressed { transform: none; transition: none; } .saif-login-support:hover .saif-support-bubble,.saif-login-support:focus-visible .saif-support-bubble,.saif-login-support:hover .saif-support-dot,.saif-login-support:focus-visible .saif-support-dot,.saif-login-support:hover .saif-support-spark,.saif-login-support:focus-visible .saif-support-spark { transform: none; } }