/* THE PRIVY MODAL.
   Privy's own dark theme is a dark BLUE, which is not this site. Its palette is
   driven by CSS custom properties, so it is retinted here rather than in the
   Privy config -- the config keeps `theme: 'dark'` (Privy needs to know it is
   rendering a dark UI so it picks the right contrasts), and the actual colours
   come from the site's existing tokens. No new values are introduced.

   All THREE backgrounds must be set. -2 and -3 are the wallet rows and their
   hover state: setting only `background` retints the panel and leaves every row
   sitting in Privy's blue.

   There is NO font variable. The complete set of `--privy-*` properties in the
   shipped bundle is colours, radii, modal heights and link styling; the modal's
   type is set through an internal styled-components prop, and `appearance` in
   PrivyClientConfig has no font option either. Matching the site's face would
   mean reaching into Privy's generated class names, which breaks on their next
   release, so the modal keeps its own type. */
body {
  --privy-color-background: var(--bg-page);        /* #0d0d0d, the page */
  --privy-color-background-2: var(--bg-panel);     /* #161616, wallet rows */
  --privy-color-background-3: var(--bg-elevated);  /* #1c1c1c, row hover */
  --privy-color-foreground: var(--card-ink);       /* #f7f5f1, warm white */
  --privy-color-foreground-2: var(--card-ink-muted);
}

/* `hidden` must actually hide.
   The UA sheet's `[hidden] { display: none }` has specificity (0,0,0), so ANY
   rule here that sets a display -- `.trollbox-form { display: grid }` and
   friends -- silently beats it. The element then reads `el.hidden === true` in
   JS while still painting on screen, which is the worst possible failure: every
   scripted check agrees the row is gone and only the pixels disagree. That bug
   shipped twice in this component (the tab, then the composer). This rule ends
   the class of bug for the whole subtree rather than patching each element. */
.trollbox [hidden] { display: none !important; }

/* The trollbox panel.
 *
 * PROPORTIONS AND RHYTHM measured off the ansem.io support widget's live DOM:
 *
 *   panel     392 x 527, docked 16px from the right, radius 7, z 95,
 *             flex column, shadow 0 18px 48px rgba(0,0,0,0.55)
 *   header    54px tall, 10px 12px padding, 1px bottom rule
 *   body      flex 1, overflow auto, 14px padding
 *   bubbles   radius 7, padding 10px 12px, 13.5px/1.5 type, 1px border
 *   input row 64px, 12px 14px 14px padding, flex, 8px gap
 *   input     38px tall, radius 7    send 36x38, radius 7
 *
 * Taken: those numbers, the three-band column, the docked position, the header
 * with a title and a close control, the rounded bubbles, the pinned input with
 * its send control beside it.
 *
 * NOT taken: its colour, and its message layout. That widget is a support chat
 * -- one sender, no identity on any message, bubbles that only need to say
 * "them". Ours is many people, so every message carries a name, a truncated
 * address and a time, and they all sit in ONE column. Splitting left and right
 * by sender encodes "me vs them", which is not the distinction here.
 */

.trollbox {
  /* Sizes the panel, below. Kept as a variable because the mobile rule
     overrides the width and the two should be findable together. */
  --trollbox-w: 392px;

  position: fixed;
  /* THE VIEWPORT'S RIGHT EDGE, at every width. Chosen after seeing both.

     Anchoring it to the content column instead keeps it near the copy on a wide
     monitor, but the panel is 392px wide and the column's right edge is where
     the copy ends, so anchoring guarantees the panel covers 392px of the column
     at EVERY width. Pinned to the edge it covers nothing above 2176px -- the
     width at which the panel, held 16px off the edge, stops reaching a 1360px
     centred column -- and below that it overlaps exactly as it always has.
     (2256 when the column was 1440, 2096 at 1280: it moves with the column.)

     The trade is accepted deliberately: on a very wide screen it sits away from
     the content. Most visitors are not on one, and the ones who are get a panel
     that covers nothing. */
  right: 16px;
  bottom: 16px;
  z-index: 800;               /* under the topbar's 900, over the page */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-variation-settings: "FLAT" 0;
}

/* Closed: a small tab and nothing else. */
.trollbox-tab {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(22 22 22);
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.trollbox-tab:hover { color: var(--text-primary); border-color: rgb(255 255 255 / 0.3); }

.trollbox-panel {
  width: var(--trollbox-w);
  height: 527px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-media);
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(22 22 22);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.55);
  overflow: hidden;
}

.trollbox-head {
  flex: 0 0 auto;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 0.10);
}

.trollbox-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-subtle);
}

.trollbox-close {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: none;
  color: var(--text-subtle);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.trollbox-close:hover { color: var(--text-primary); background: rgb(255 255 255 / 0.06); }

/* WHO YOU ARE, IN THE HEADER. Pushed right by the auto margin so the title
   stays left and the close stays at the edge: three things in a 54px strip,
   with the only gap that can grow sitting between the title and the identity.

   The address is the CONTROL -- it opens the menu -- so it has to look
   pressable without becoming a third button competing with the close. A border
   only on hover and focus does that: at rest it reads as a label. */
.trollbox-who {
  position: relative;
  margin-left: auto;
  /* SEPARATION FROM THE CLOSE. Without it a short name -- one character is the
     worst case -- ends up almost touching the x, and the two read as a pair of
     controls rather than as "who you are" and "shut this". The identity's own
     padding is not enough because it is invisible until hover. */
  margin-right: 10px;
}

.trollbox-whobtn {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-subtle);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.trollbox-whobtn:hover,
.trollbox-whobtn[aria-expanded="true"] {
  color: var(--text-primary);
  border-color: rgb(var(--warm-ink) / 0.24);
}
.trollbox-whobtn .trollbox-name {
  color: var(--text-muted);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trollbox-whobtn:hover .trollbox-name { color: var(--text-primary); }
.trollbox-whobtn .trollbox-addr { white-space: nowrap; }

/* Drops inside the panel, so `overflow: hidden` on the panel does not clip it.
   Above the notice, which it lands on top of. */
.trollbox-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 3;
  min-width: 132px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(31 31 31);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.55);
}
.trollbox-menu button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.trollbox-menu button:hover { background: rgb(255 255 255 / 0.07); color: var(--text-primary); }
.trollbox-close svg { width: 14px; height: 14px; }

/* The one distinction that must not be lost: this panel is the only thing on
   the site that wants a wallet. Someone meeting a connect control here will
   assume voting changed unless the page says otherwise first.
   
   It collapses when there are MESSAGES, not when a wallet connects: the notice
   exists to be read before anything has happened, and once there is content it
   is a reminder rather than the point of the panel. */
.trollbox-note {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  transition: font-size var(--duration-normal) var(--ease-out),
              padding var(--duration-normal) var(--ease-out);
}

.trollbox-note.is-compact {
  padding: 7px 16px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-subtle);
}

/* The pre-launch line. Centred in the message area, where it is the only thing
   to read -- not a placeholder, which would be an instruction about where to
   type into a box that should not be there at all. */
.trollbox-closed {
  margin: 0;
  padding: 40px 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-subtle);
}

.trollbox-nameform { flex: 0 0 auto; padding: 12px 14px 14px; display: grid; gap: 8px; }
.trollbox-namelabel { font-size: 11.5px; color: var(--text-subtle); }
.trollbox-nameinput {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 9px 12px;
  border-radius: 7px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(15 15 15);
  color: var(--card-ink);
  font: inherit;
  font-size: 13.5px;
}
.trollbox-nameinput:focus-visible { outline: 2px solid var(--text-muted); outline-offset: -1px; }
.trollbox-skip {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 6px;
  border: 0;
  background: none;
  color: var(--text-subtle);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.trollbox-skip:hover { color: var(--text-muted); }
.trollbox-nameerr {
  margin: 0;
  font-size: 11.5px;
  color: #f0d9a8;          /* the brass, lightened -- readable, still no colour */
}
.trollbox-nameform .trollbox-connect { margin-left: 0; }

/* The scroller and the pill. The wrapper takes the flex space; the scroller
   fills it; the pill floats over its bottom edge. */
.trollbox-scrollwrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
}

.trollbox-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.14) transparent;
}
.trollbox-body::-webkit-scrollbar { width: 8px; }
.trollbox-body::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.14); border-radius: 999px;
}

/* NEW MESSAGES, WHILE READING FURTHER UP. Floated over the bottom of the
   message area rather than placed in the flow: anything in the layout would
   shift what someone is reading the moment it appeared, which is the same
   rudeness as the autoscroll it replaces. Small, low-contrast, and gone the
   instant they are back at the bottom -- by clicking it or by scrolling. */
.trollbox-unread {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(38 38 38 / 0.96);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.45);
}
.trollbox-unread:hover { color: var(--text-primary); border-color: rgb(255 255 255 / 0.3); }

.trollbox-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.trollbox-item {
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(28 28 28);
}

.trollbox-meta {
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 11px;
}
/* THE COLOUR IS THE WALLET'S, not the message's. Derived in js from the
   address, so one person is the same colour in every message, on every visit,
   on every device -- with nothing stored anywhere. A per-message random would
   make one poster look like several.

   The set below is the site's own register: warm inks, the gold that is already
   the accent, and muted earths. Nothing saturated, because the page is an
   engraving and a pure hue on it reads as a UI element that wandered in from
   another site. All are checked against the panel's rgb(31 31 31) ground.

   `--name-ink` is set inline per element; this is the fallback for a message
   whose wallet js could not read. */
.trollbox-name { color: var(--name-ink, var(--text-muted)); }
/* Always beside the name. A name is unique to one wallet, but it is changeable
   and releasable, so the address stays visible as the thing that does not move.

   NOTE: this is NOT a monospaced face -- it is the site's display serif with
   tabular figures, which is what every address on the site has always used.
   There is no mono token in the stylesheet to point it at. */
.trollbox-addr {
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
/* With no name the address IS the byline, so it takes the byline's weight
   rather than sitting at the dimmer secondary level next to nothing. */
.trollbox-meta.is-nameless .trollbox-name { display: none; }
/* With no name the address IS the byline, so it takes the wallet's colour --
   an unnamed poster is still recognisable from one message to the next. Named
   posters keep the address in the quiet subtle ink, so the name is what
   carries the colour and the address stays the plain fact beside it. */
.trollbox-meta.is-nameless .trollbox-addr { color: var(--name-ink, var(--text-muted)); }
.trollbox-time { margin-left: auto; color: rgb(242 242 242 / 0.35); font-variant-numeric: tabular-nums; }

.trollbox-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--card-ink);
  overflow-wrap: anywhere;
}

/* BOLD. Twice the price, so it has to look it: larger, brighter, and lifted
   onto its own surface with a border rather than merely set heavier. Weight
   alone would be invisible here anyway -- the face has one weight, so bold type
   would be a synthesised smear. */
.trollbox-item.is-bold {
  padding: 13px 14px;
  border-color: rgb(255 255 255 / 0.22);
  background: rgb(38 38 38);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}
.trollbox-item.is-bold .trollbox-text {
  font-size: 16px;
  line-height: 1.45;
  color: #ffffff;
}

/* Wallet state and the backend's refusals. Shown as sentences, because
   "rate limited" and "that transaction has already been used" are different
   problems and collapsing them into one failure helps nobody. */
.trollbox-state {
  flex: 0 0 auto;
  padding: 0 14px;
  display: grid;
  gap: 8px;
}

.trollbox-msg {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(31 31 31);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.trollbox-wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-subtle);
}

.trollbox-connect {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgb(var(--warm-ink) / 0.24);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.trollbox-connect:hover { color: var(--text-primary); border-color: rgb(var(--warm-ink) / 0.4); }

.trollbox-form { flex: 0 0 auto; padding: 12px 14px 14px; display: grid; gap: 8px; }

.trollbox-kinds { display: flex; gap: 6px; }
.trollbox-kinds button {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgb(var(--warm-ink) / 0.20);
  background: none;
  color: var(--text-subtle);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.trollbox-kinds button.is-active {
  background: #f4efe4;
  border-color: #f4efe4;
  color: #16150f;
}

/* THE SLOT. One occupant at a time, and both are exactly 38px tall with the
   same 7px radius, so swapping the connect control for the input changes
   nothing about the panel's height or the position of anything else. If you
   restyle either occupant, restyle both -- the whole point is that they are
   interchangeable in place. */
.trollbox-slot { display: block; }

.trollbox-slotbtn {
  display: block;
  width: 100%;
  height: 38px;
  padding: 9px 12px;
  border-radius: 7px;                 /* == .trollbox-input */
  border: 1px solid rgb(var(--warm-ink) / 0.24);
  background: rgb(15 15 15);          /* == .trollbox-input */
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.trollbox-slotbtn:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: rgb(var(--warm-ink) / 0.44);
}
.trollbox-slotbtn:disabled { opacity: 0.6; cursor: default; }

/* Wallet trouble, and the wrong-chain sentence. A PLAIN LINE: no border, no
   fill, no radius. It sits directly above the slot, and anything given a box
   here would read as the input rather than as a remark about it. */
.trollbox-above {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-subtle);
}

.trollbox-inputrow { display: flex; gap: 8px; }

.trollbox-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 9px 12px;
  border-radius: 7px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(15 15 15);
  color: var(--card-ink);
  font: inherit;
  font-size: 13.5px;
}
.trollbox-input::placeholder { color: var(--text-subtle); }
.trollbox-input:focus-visible { outline: 2px solid var(--text-muted); outline-offset: -1px; }
.trollbox-input:disabled { opacity: 0.5; cursor: not-allowed; }

.trollbox-send {
  flex: 0 0 auto;
  width: 36px; height: 38px;
  display: grid; place-items: center;
  border-radius: 7px;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(31 31 31);
  color: var(--card-ink);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.trollbox-send:hover:not(:disabled) { border-color: rgb(255 255 255 / 0.34); }
.trollbox-send:disabled { opacity: 0.4; cursor: not-allowed; }
.trollbox-send svg { width: 15px; height: 15px; }

@media (max-width: 520px) {
  .trollbox { right: 10px; bottom: 10px; left: 10px; align-items: stretch; }
  /* Full width stays; the height comes down. 527px is 79% of a 375x667 screen
     and left 140px of page behind it, which reads as a takeover rather than a
     panel. 62vh leaves 253px -- a bit over a third of the page still visible --
     and keeps the list at roughly four or five of the 57px rows, which is a
     list rather than a slot.
     
     min(), so it only bites where it needs to: on a 390x844 phone 62vh is
     523px and the panel keeps the height it already had. */
  .trollbox-panel { width: auto; height: min(527px, 62vh); }
}

/* A PAID POST IN FLIGHT. Deliberately the most prominent thing in the panel
   while it exists: someone has spent $WIF and the only question they have is
   whether it worked. The message text is repeated here rather than only being
   in storage, so the words are on screen the entire time. */
.trollbox-pendings { flex: 0 0 auto; display: grid; gap: 8px; margin: 0 0 8px; }

.trollbox-pending {
  margin: 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgb(var(--warm-ink) / 0.22);
  background: rgb(31 31 31);
  display: grid;
  gap: 6px;
}
.trollbox-pending.is-bad { border-color: rgb(214 154 74 / 0.55); }
.trollbox-pending-line {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.trollbox-pending-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--card-ink);
}
.trollbox-pending-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.trollbox-pending-acts a,
.trollbox-pending-acts button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-subtle);
  font: inherit;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.trollbox-pending-acts a:hover,
.trollbox-pending-acts button:hover { color: var(--text-primary); }

/* ==========================================================================
   ROOM FOR THE PANEL -- deliberately none
   ==========================================================================

   The panel overlays. It used to reserve space above 1180px by putting a
   padding-right on .panel and .kol, which moved the grid sideways when it
   opened; that is gone and is not to come back as an override somewhere else.

   Two things went with it, because both existed only to serve it: the
   `transition: padding-right` on the two containers, and the reduced-motion
   rule that cancelled that transition.

   `.wif-trollbox-open` is still set on <html> by trollbox.js. Nothing styles
   it now -- it is left as a hook rather than removed from the script. */