/* Keep the page width unchanged when the root scrollbar is locked. */
html { scrollbar-gutter: stable; }
html.sa-follow-locked, body.sa-drawer-open { overflow: hidden; }
[data-follow-drawer] { background: #141b20; }
[data-follow-drawer]:not(.hidden) { display: flex; flex-direction: column; }
[data-follow-drawer] > :first-child { flex: 0 0 auto; }
.sa-follow-body { position: relative; flex: 1; min-height: 0; }
.sa-follow-host, .sa-follow-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.sa-follow-frame { visibility: hidden; }
.sa-follow-frame.is-ready { visibility: visible; }
.sa-follow-status { position: relative; z-index: 1; padding: 24px 20px; color: #aebcc9; font-size: 13px; line-height: 1.6; }
.sa-follow-status p { margin: 0; }
.sa-follow-status [hidden], .sa-follow-status[hidden] { display: none !important; }
.sa-follow-retry { margin-top: 16px; min-height: 44px; padding: 8px 16px; border: 1px solid #566575; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.sa-follow-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff20; border-radius: 6px; background: #ffffff08; color: inherit; cursor: pointer; }
.sa-follow-close svg { width: 18px; height: 18px; }
.sa-follow-close:focus-visible, .sa-follow-retry:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
body.sa-light-mode .sa-follow-status { color: #475569; }
body.sa-light-mode [data-follow-drawer] { background: #f8fafc; color: #0f172a; }
body.sa-light-mode [data-follow-drawer] h2 { color: #0f172a; }
body.sa-light-mode [data-follow-drawer] > :first-child { border-color: #cbd5e1; }
body.sa-light-mode [data-follow-drawer] > :first-child p { color: #047857; }
@media (prefers-reduced-motion: reduce) {
    [data-follow-drawer], .sa-friends-overlay, .sa-follow-overlay { transition: none !important; }
}