/* The floating "Feedback / Support" widget (public/feedback.js), on every page: a round button in the bottom-right corner and a small
   panel above it. Its own file, so the site's stylesheet stays untouched (work on other pages merges cleanly). Colours and type come
   from the site's variables, so both themes work. The button keeps clear of the phone menu bar, the coin page's Buy bar, the
   device's safe area and the page's main buttons, and steps aside for the toast, dialogs and typing; it sits under the toast, the modals, the full-screen map and the Terms gate (z-index 70).
   --fb-below is the room the panel must leave under itself: the bar offset plus the button and the gap (the panel's max-height uses it,
   so its title and Close button never go off the top of a short screen: a phone with the keyboard open, or in landscape). */
.fb { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 70; display: grid; justify-items: end; gap: 10px; --fb-below: 82px; }
@media (max-width: 1023px) { body.has-coin-buybar .fb { bottom: calc(150px + env(safe-area-inset-bottom)); --fb-below: 206px; } } /* the coin page's Buy bar sits above it */

/* the button: 48 px round neutral glass (design v4: the page shows through it, a hairline border, the icon in the secondary text
   colour, a raised shadow and no gold glow: the gold stays for the page's own main actions), a chat bubble that becomes a cross
   while the panel is open. A phone already blurs its header and tab bar, so there the glass is nearly opaque and unblurred. */
.fb__btn { position: relative; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--glass-bg, var(--bg-2)); color: var(--text-2); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--e2, 0 10px 26px -12px rgba(2,8,20,.55)); -webkit-backdrop-filter: var(--glass-blur, blur(12px)); backdrop-filter: var(--glass-blur, blur(12px)); }
.fb__btn:hover { border-color: rgba(var(--ink),.3); color: var(--text); }
.fb__btn:focus-visible, .fb__close:focus-visible, .fb__kinds button:focus-visible, .fb__again:focus-visible { outline: 2px solid var(--focus-ring, var(--pin-2)); outline-offset: 2px; }
.fb__btn svg { width: 24px; height: 24px; display: block; }
.fb__btn[aria-expanded="true"] .fb__ico-chat, .fb__btn:not([aria-expanded="true"]) .fb__ico-x { display: none; }
/* phones: above the menu bar (70 px + the inset), a 44 px button (the site's minimum) a little nearer the edge, so it covers less of the
   content column (after the button's own rules above, so these sizes win); the footer's last line ends above it */
@media (max-width: 900px) { .fb { right: max(10px, env(safe-area-inset-right)); bottom: calc(82px + env(safe-area-inset-bottom)); --fb-below: 138px; } .fb__btn { width: 44px; height: 44px; } .fb__btn svg { width: 22px; height: 22px; }
  .fb__btn { background: var(--glass-bg-strong, var(--bg-2)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-footer { padding-bottom: 64px; } }

/* out of the way while something else has the screen: the toast (site.js sets body.has-toast; an open panel stays), an open dialog
   such as the Buy sheet, and on a phone while a field of the page is being typed in (feedback.js sets .fb--typing; the keyboard
   would carry the button over the field and the page's own Send or Continue) */
body.has-toast .fb:not(.fb--open), body:has(dialog[open]) .fb, body:has(.swap-sheet[open]) .fb, .fb--typing:not(.fb--open) { visibility: hidden; }

/* the panel: a card above the button, as wide as a phone allows; capped by the room between the site header (plus 8 px) and the
   button, never the whole screen, and scrolls inside when the screen is short (the privacy line at its end scrolls with it) */
.fb__panel { width: min(360px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - var(--fb-below) - var(--header-h, 67px) - 8px - env(safe-area-inset-bottom)));
  max-height: min(600px, calc(100dvh - var(--fb-below) - var(--header-h, 67px) - 8px - env(safe-area-inset-bottom))); overflow: auto; overscroll-behavior: contain;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-lg, 20px); box-shadow: var(--e3, var(--shadow)); padding: 16px 16px 14px; display: grid; gap: 10px; }
.fb__panel[hidden] { display: none; }
.fb__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fb__title { margin: 0; font: 600 1.1rem/1.2 var(--display); letter-spacing: -.01em; }
.fb__close { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: 600 1rem/1 var(--body); cursor: pointer; display: grid; place-items: center; }
.fb__close:hover { border-color: rgba(var(--ink),.3); }
.fb__lead { margin: -4px 0 0; font-size: .86rem; line-height: 1.45; color: var(--muted); }

/* the three kinds: a segmented control, one tab stop (arrow keys move inside it) */
.fb__kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--field-line, var(--line)); }
.fb__kinds button { min-height: 44px; padding: 0 4px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 .82rem var(--body); cursor: pointer; white-space: nowrap; }
.fb__kinds button[aria-selected="true"] { background: var(--bg); color: var(--text); font-weight: 700; box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 10px -4px rgba(2,8,20,.5); }

/* the form */
.fb__form { display: grid; gap: 10px; margin: 0; }
.fb__field { display: grid; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.fb__field input, .fb__field textarea { width: 100%; min-width: 0; min-height: 44px; background: var(--card-2); border: 1px solid var(--field-line, var(--line-2)); border-radius: 12px; padding: 10px 12px; color: var(--text); font: 500 .95rem var(--body); outline: none; }
.fb__field textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
@media (max-width: 600px) { .fb__field input, .fb__field textarea { font-size: 16px; } } /* a phone never zooms in when a field takes the keyboard */
.fb__field input:focus, .fb__field textarea:focus { border-color: var(--pin); box-shadow: 0 0 0 3px var(--accent-soft, rgba(var(--accent-rgb),.12)); }
.fb__two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb__two[hidden] { display: none; }
.fb__count { margin: -6px 0 0; text-align: right; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* --muted, not the fainter grey: 4.5:1 at this size in both themes */
/* the honeypot: people never see it, the keyboard never lands on it; a form filler that fills every field gives itself away */
.fb__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fb__err { margin: 0; color: var(--bad-text); font-size: .86rem; }
.fb__err[hidden] { display: none; }
.fb__send { min-height: 46px; }
.fb__meta { margin: 0; font-size: .74rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }

/* sent: a calm thank-you in place of the form */
.fb__done { display: grid; gap: 8px; padding: 10px 0 4px; text-align: center; }
.fb__done[hidden] { display: none; }
.fb__done-mark { width: 44px; height: 44px; margin: 0 auto 2px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft, rgba(var(--ok-rgb),.14)); border: 1px solid rgba(var(--ok-rgb),.4); color: var(--ok-text); font: 700 1.2rem/1 var(--body); }
.fb__done-title { margin: 0; font: 600 1.05rem/1.25 var(--display); }
.fb__done p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.fb__again { margin: 6px auto 0; min-height: 44px; }

/* phones, scrolling down, and any screen while the button would sit on one of the page's main buttons: it slides out to the right
   (feedback.js adds .fb--away) and slides back on the first scroll up, near the top, when it gets the keyboard, or when the panel
   opens; the panel is never moved. With reduced motion it does not slide: it just goes and comes back. */
.fb--away .fb__btn { transform: translateX(calc(100% + 24px)); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .fb--away .fb__btn { transform: none; opacity: 0; pointer-events: none; } }
.fb--away .fb__btn:focus-visible { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .fb__panel { animation: fbIn .18s ease; }
  @keyframes fbIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
  .fb__btn { transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease; }
}
@media (max-width: 360px) { .fb__kinds button { font-size: .76rem; } }