/* The chat box (public/chat-frame.js): a frame from chat.ayedex.com in a dock placed by corner class, under the toasts (z-index
   50) and the dialogs (top layer). The frame draws the box on a transparent background and keeps 8px on its right for the lime
   shadow (and 8px below it when open, 2px when minimised), so the box keeps a 16px gutter to the side and bottom edges it is
   docked to, and to both sides on a narrow screen. Minimised at the bottom the dock is exactly the bar (30px) and its 2px shadow
   (on top, the bar alone: below); open it is up to 528px of box, never taller than the room between the header and the bottom gutter. Top corners hang from the header
   (--chat-top: its measured height, kept current by chat-frame.js) and open downward; bottom corners open upward. */
.chat-dock { position: fixed; z-index: 40; width: min(356px, calc(100vw - 24px)); height: 32px; }
/* hidden until the frame says the chat is running in it ({mdchat:'ready'}): a chat host that is down, or an older frame, shows no
   box rather than a broken one. The frame still loads and runs; hidden, the box takes no click and no Tab */
.chat-dock:not(.ready) { visibility: hidden; }
.chat-dock.c-tl, .chat-dock.c-bl { left: 16px; }
.chat-dock.c-tr, .chat-dock.c-br { right: 8px; }
.chat-dock.c-tl, .chat-dock.c-tr { top: var(--chat-top, 0px); }
/* the header is not sticky: minimised on top, the bar lies on the ribbon under it, in the document (the body is not positioned,
   so top counts from the top of the document), and scrolls away with it; it never comes to rest on the trading grid. 30px: the
   bar alone, which fills the ribbon and the grid's 8px gap and ends where the grid begins (its 2px shadow row, lime on the lime
   ribbon, is left out) */
.chat-dock.c-tl:not(.open), .chat-dock.c-tr:not(.open) { position: absolute; height: 30px; }
.chat-dock.c-bl, .chat-dock.c-br { bottom: 14px; }
.chat-dock.c-bl.open, .chat-dock.c-br.open { bottom: 8px; }
.chat-dock.open { height: clamp(160px, calc(100vh - var(--chat-top, 0px) - 8px), 536px); height: clamp(160px, calc(100dvh - var(--chat-top, 0px) - 8px), 536px); }
.chat-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
/* unread while minimised: a count on the bar's left edge, never in the way of a click */
.chat-unread { position: absolute; top: 4px; left: -11px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; background: var(--lime, #c7ff2e); color: var(--ink, #0a0a0a); border: 2px solid var(--ink, #0a0a0a); font: 700 11px/1 var(--mono, monospace); pointer-events: none; }
.chat-unread[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .chat-dock { transition: height .16s ease-out; } }
/* the ribbon under the header carries the connection status, the network and, on how-it-works, "do not send real funds": docked on
   top, its words move clear of the box (open or minimised, so nothing shifts when it opens). Wide, they move aside on the ribbon;
   narrower, where the bar spans most of the ribbon, the ribbon moves down below the bar. Wide, the ribbon is at least 22px tall (it
   is 20px until the network label arrives), so the ribbon and the grid's 8px gap always hold the 30px bar */
@media (min-width: 900px) {
  html:has(.chat-dock.ready.c-tl) .ribbon, html:has(.chat-dock.ready.c-tr) .ribbon { min-height: 22px; }
  html:has(.chat-dock.ready.c-tl) .ribbon { padding-left: calc(min(356px, 100vw - 24px) + 28px); }
  html:has(.chat-dock.ready.c-tr) .ribbon { padding-right: calc(min(356px, 100vw - 24px) + 20px); }
}
@media (max-width: 899.98px) {
  html:has(.chat-dock.ready.c-tl) .ribbon, html:has(.chat-dock.ready.c-tr) .ribbon { margin-top: 30px; }
}
/* the page's last line stays readable above a bar docked at the bottom (body > .foot outranks styles.css's .foot, whichever
   loads last), and a field reached with Tab is scrolled clear of the bar */
body > .foot { padding-bottom: calc(1.4rem + 56px); }
html:has(.chat-dock.ready.c-bl:not(.open)), html:has(.chat-dock.ready.c-br:not(.open)) { scroll-padding-bottom: 56px; }