/* Back to top: a round glass bubble, hidden until the reader scrolls down (back-to-top.js toggles .on).
   Threads with a reply dock: on desktop (and phone landscape) it rides beside Send and the dock and bubble centre together as one group while it shows, and the dock glides back to true centre when it hides;
   on phones the dock keeps its full width and the bubble floats just above Send.
   Every other page (board lists, profiles, search, plugin pages, Admin CP): bottom-right corner, above the tab bar on phones. */
:root { --btt: 52px; --btt-gap: 8px; }
.btt { position: fixed; z-index: 15; right: 18px; bottom: 18px; width: var(--btt); height: var(--btt); display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; color: var(--text-muted); box-shadow: var(--rim), var(--e-3); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9);
  transition: opacity var(--t-med) var(--ease-liquid), transform var(--t-med) var(--ease-liquid), visibility 0s linear var(--t-med),
              left var(--t-slow) var(--ease-liquid), bottom var(--t-med) var(--ease-liquid), color var(--t-fast), background-color var(--t-fast); }
:where(.btt) { background: var(--surface-solid); }   /* .glass (same frosting as the dock) wins where blur is supported */
.btt.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.btt:hover { color: var(--text); }
.btt:active { transform: scale(.94); }
.btt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btt svg { width: 22px; height: 22px; flex: none; }

/* An install offer or open lightbox owns the bottom of the screen: the bubble steps aside */
body:has(.app-offer:not([hidden])) .btt, body:has(.lightbox:not([hidden])) .btt { opacity: 0; visibility: hidden; }

@media (min-width: 761px) {
  /* The dock makes room (it is never narrower than its 560px resting width here) and the bubble follows it as it grows on focus */
  body:has(form.dock) { --dock-w: min(560px, calc(100% - 28px - var(--btt) - var(--btt-gap))); }
  body:has(form.dock:focus-within) { --dock-w: min(780px, calc(100% - 28px - var(--btt) - var(--btt-gap))); }
  /* The dock sits at true centre while the bubble is hidden (top of the page, install offer, lightbox) and glides
     left to centre with the bubble as one group once it shows; the hidden bubble waits just right of the centred dock
     so both slide together. Width stays put either way, so the text box never reflows. */
  body:has(form.dock) .dock, body:has(form.dock) .dock:focus-within { width: var(--dock-w); transform: translateX(-50%);
    transition: width var(--t-slow) var(--ease-liquid), border-radius var(--t-med), transform var(--t-slow) var(--ease-liquid); }
  body:has(form.dock):has(.btt.on):not(:has(.app-offer:not([hidden]), .lightbox:not([hidden]))) .dock {
    transform: translateX(calc(-50% - (var(--btt) + var(--btt-gap)) / 2)); }
  body:has(form.dock) .btt { right: auto; left: calc(50% + var(--dock-w) / 2 + var(--btt-gap)); bottom: calc(18px + (60px - var(--btt)) / 2); }
  body:has(form.dock) .btt.on { left: calc(50% + var(--dock-w) / 2 - var(--btt) / 2 + var(--btt-gap) / 2); }
}
@media (max-width: 760px) {
  :root { --btt: 48px; }
  .btt { right: 12px; bottom: calc(12px + 62px + 10px + env(safe-area-inset-bottom)); }   /* above the tab bar */
  body.thread .btt { bottom: calc(12px + env(safe-area-inset-bottom)); }                  /* threads hide the tab bar */
  /* Above Send, right edges lined up; --dock-h tracks the dock as its text box grows */
  body:has(form.dock) .btt { right: 22px; bottom: calc(12px + var(--dock-h, 60px) + 10px + env(safe-area-inset-bottom)); }
  /* A long thread's timeline pill stays clear above the bubble while the reply box grows */
  body:has(form.dock) .tl { bottom: max(150px, calc(12px + var(--dock-h, 60px) + 10px + var(--btt) + 12px + env(safe-area-inset-bottom))); }
}
@media (prefers-reduced-motion: reduce) {
  .btt, .btt.on { transform: none; transition: opacity 1ms, visibility 0s; }
  body:has(form.dock) .dock, body:has(form.dock) .dock:focus-within { transition: none; }   /* the dock snaps to centre */
}
@media print { .btt { display: none; } }