/* SENDIT's chat (sub-project 4g): a clan's room, a public room per perp
 * market and per launched token, and direct messages.
 *
 * Built only from shell.css's --pep-* tokens, loaded after social.css and
 * before sendit.css (the brand layer stays last). Colour keeps its three
 * jobs: the brand lime is the primary action (Send), the tint of your own
 * messages and of the open conversation (a ground, never a bar down an edge),
 * and focus; green and red are never drawn here
 * (a message has no direction); unread counts are amber, as the bell's.
 * Messages are somebody's words: isolated, wrapping, never wider than the
 * room. Every motion is for those who did not ask for less.
 */

/* ------------------------------------------------------------------ a room */

.pep-chat { display: grid; gap: 10px; min-width: 0; }
.pep-chat-logwrap { position: relative; min-width: 0; }
.pep-chat-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: clamp(320px, 56vh, 640px);
  padding: 4px 4px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--pep-line-strong) transparent;
  scrollbar-width: thin;
}
.pep-chat-compact .pep-chat-log { height: 320px; }
.pep-chat-log:focus { outline: none; }
.pep-chat-log:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }

/* A few messages sit at the bottom, by the box, as a conversation does. */
.pep-chat-list { display: grid; gap: 10px; margin: auto 0 0; padding: 0; list-style: none; }
.pep-chat-said { margin: auto 0; padding: 24px 12px; color: var(--pep-text-2); font-size: 14px; line-height: 1.45; text-align: center; }
.pep-chat-said-denied { color: var(--pep-text); }
.pep-chat-older { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 10px; font-size: 13px; }

/* A day: its name on a hairline. */
.pep-chat-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
  color: var(--pep-text-3);
  font-size: 12px;
  font-weight: 600;
}
.pep-chat-day::before,
.pep-chat-day::after { content: ""; flex: 1; height: 1px; background: var(--pep-line); }

/* One author's run of messages: the trader, when, then the bubbles under the name. The bubbles' list spans the room
 * (justify-self: stretch, past the group's justify-items): fitted to its widest message instead, a message's
 * max-width (a percentage) would resolve against that message's own width, and its last word would wrap. */
.pep-chat-group { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.pep-chat-group-own { justify-items: end; }
.pep-chat-who { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; font-size: 13px; }
.pep-chat-who .pep-trader-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pep-chat-who .pep-trader-address { font-size: 11px; }
.pep-chat-you { color: var(--pep-text-2); font-weight: 700; }
/* Round 15: a clan room's owner and moderators, a small badge after the name (clans.py's roles). */
.pep-chat-role {
  flex: none; padding: 0 6px; border: 1px solid var(--pep-line-strong); border-radius: var(--pep-radius-pill);
  color: var(--pep-text-2); font-size: 10px; font-weight: 700; line-height: 16px;
}
.pep-chat-role-owner { color: var(--pep-text); }
.pep-chat-role-moderator { border-color: var(--pep-line); background: var(--pep-panel-hover); }
.pep-chat-time { color: var(--pep-text-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pep-chat-bubbles { display: grid; justify-self: stretch; justify-items: start; gap: 3px; max-width: 100%; min-width: 0; margin: 0; padding: 0 0 0 30px; list-style: none; }
.pep-chat-group-own .pep-chat-bubbles { justify-items: end; padding: 0; }

.pep-chat-msg { display: grid; justify-items: start; gap: 4px; max-width: min(88%, 560px); min-width: 0; }
.pep-chat-msg-own { justify-items: end; }
.pep-chat-bubble {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  padding: 7px 6px 7px 12px;
  border-radius: 14px;
  background: var(--pep-panel-2);
}
.pep-chat-group:not(.pep-chat-group-own) .pep-chat-msg:first-child .pep-chat-bubble { border-top-left-radius: 4px; }
/* Yours: a ground tinted with the brand, and no stripe down its edge (round 11). A shared position in it sits on the
   same tint. */
.pep-chat-msg-own .pep-chat-bubble { background: color-mix(in srgb, var(--pep-brand) 16%, var(--pep-panel-2)); }
.pep-chat-group-own .pep-chat-msg:first-child .pep-chat-bubble { border-top-right-radius: 4px; }
.pep-chat-body {
  min-width: 0;
  margin: 0;
  color: var(--pep-text);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-line;
  unicode-bidi: isolate;
}

/* The message's menu button: shown on a pointer's hover or the keyboard's focus, and while its menu is open; always on
   a touch screen. */
.pep-chat-more {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px 0 -2px 4px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pep-text-3);
  cursor: pointer;
}
.pep-chat-more:hover,
.pep-chat-more[aria-expanded="true"] { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-chat-more:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
@media (hover: hover) {
  .pep-chat-msg:not(:hover):not(:focus-within) .pep-chat-more[aria-expanded="false"] { opacity: 0; }
}

/* A message's menu (round 14): opened by its "..." button, a right-click or a long press, drawn over the page where it
   opened (position: fixed on the body, its left and top set from script: MessageMenu), kept inside the viewport and
   scrolling on its own when the viewport is shorter than it. The quick row, Add reaction..., then Delete or Report;
   Delete and Report turn it into a small dialog (the confirm, the reason). */
.pep-chat-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  background: var(--pep-panel);
  box-shadow: inset 0 0 0 1px var(--pep-line-strong), 0 16px 40px rgb(0 0 0 / 50%);
  font-size: 14px;
}
.pep-chat-menu:focus { outline: none; }
.pep-chat-menu-dialog { width: min(300px, calc(100vw - 16px)); padding: 10px; }
.pep-chat-menu .pep-react-quick { flex-wrap: nowrap; padding: 0 0 2px; }
.pep-chat-menu .pep-react-quick-one { width: 32px; }
.pep-chat-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pep-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.pep-chat-menu-item:hover,
.pep-chat-menu-item:focus { background: var(--pep-panel-hover); outline: none; }
.pep-chat-menu-item:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-chat-menu-item:disabled { cursor: default; opacity: 0.6; }
.pep-chat-menu-icon { display: inline-grid; flex: none; place-items: center; width: 16px; color: var(--pep-text-3); }
.pep-chat-menu-sign { display: grid; gap: 2px; }
.pep-chat-menu-sign .pep-write { display: grid; gap: 2px; }
.pep-chat-menu-sign .pep-write-alert:empty { display: none; }
.pep-chat-menu-sign .pep-write-alert { padding: 0 10px; font-size: 12px; }
.pep-chat-menu-sep { height: 1px; margin: 4px 6px; background: var(--pep-line); }
.pep-chat-menu-confirm { display: grid; gap: 10px; }
.pep-chat-menu-ask { margin: 0; color: var(--pep-text); font-size: 14px; font-weight: 700; line-height: 1.4; }
.pep-chat-menu-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.pep-chat-menu .pep-report { padding: 0; border: 0; }
.pep-chat-menu .pep-report-title { padding: 0; color: var(--pep-text); font-size: 14px; }
@media (pointer: coarse) {
  .pep-chat-menu-item { min-height: 44px; }
  .pep-chat-menu .pep-react-quick-one { height: 44px; }
}

/* Being sent, refused, or hidden from others: said in words beside the look. */
.pep-chat-note { margin: 0; color: var(--pep-text-3); font-size: 12px; line-height: 1.4; }
.pep-chat-msg-sending .pep-chat-bubble { opacity: 0.62; }
.pep-chat-msg-failed .pep-chat-bubble { box-shadow: inset 0 0 0 1px var(--pep-warn); }
.pep-chat-msg-hidden .pep-chat-bubble { background: transparent; box-shadow: inset 0 0 0 1px var(--pep-line-strong); }
.pep-chat-hidden { color: var(--pep-warn); }
.pep-chat-failed { display: grid; justify-items: end; gap: 2px; max-width: 100%; color: var(--pep-warn); font-size: 12px; line-height: 1.4; text-align: right; }
.pep-chat-failed-do { display: inline-flex; gap: 12px; }

/* Read back up, with something new below: one press to the end. */
.pep-chat-jump {
  position: absolute;
  bottom: 12px;
  left: 50%;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel-hover);
  box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
  color: var(--pep-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  translate: -50% 0;
}
.pep-chat-jump:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }

/* ------------------- a shared position (round 3, S1-S3; round 15 a compact position card) */

/* A message's words and the card of the position it shares, one above the other in its bubble. */
/* One column that may shrink below the card's own width, so the card narrows with a phone's bubble. */
.pep-chat-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.pep-share {
  /* The card's head and figures fit its own width (a phone's bubble, a desktop's): @container below. */
  container-type: inline-size;
  display: grid;
  gap: 10px;
  width: 320px;
  max-width: 100%;
  min-width: 0;
  margin: 2px 0 4px;
  padding: 12px;
  border: 1px solid var(--pep-line-strong);
  border-radius: 12px;
  background: var(--pep-panel);
}
.pep-chat-msg-share .pep-chat-bubble { padding-left: 8px; }
/* A message that shares a position may take the room's width: its card keeps to 320 px. */
.pep-chat-msg.pep-chat-msg-share { max-width: min(100%, 560px); }
/* The head, the position card's: the logo, the ticker with its side badge and leverage, the trader under them, and the
   state at the right of the ticker (under it, beside the trader, in a narrow card). */
.pep-share-top {
  display: grid;
  grid-template-areas: "logo what state" "logo by by";
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
}
.pep-share-top-said { display: flex; }
.pep-share-logo { display: inline-grid; grid-area: logo; }
.pep-share-what { display: flex; grid-area: what; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; margin: 0; }
.pep-share-what bdi { overflow-wrap: anywhere; unicode-bidi: isolate; }
.pep-share-t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.pep-share-side,
.pep-share-row-side { height: 20px; padding: 0 6px; font-size: 12px; }
.pep-share-lev { color: var(--pep-text-2); font-size: 13px; font-weight: 700; }
/* A token's "Spot", where a perp has its side: words on a quiet ground, no direction. */
.pep-share-badge,
.pep-share-row-badge {
  flex: none;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--pep-panel-hover);
  color: var(--pep-text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}
.pep-share-by { grid-area: by; min-width: 0; margin: 0; font-size: 12px; }
.pep-share-by .pep-trader { min-width: 0; }
.pep-share-by .pep-trader-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pep-share-by .pep-trader-address { font-size: 11px; }
/* Open, Closed, Liquidated (a token's Holding, Sold out), in words on a hairline pill: news, not a direction. */
.pep-share-state {
  grid-area: state;
  justify-self: end;
  padding: 1px 8px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  color: var(--pep-text-3);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pep-share-state-open { border-color: var(--pep-text-3); color: var(--pep-text); }
.pep-share-state-liq { border-color: var(--pep-warn); color: var(--pep-warn); }
/* The PnL (or the Result) large on a line of its own, the figure the card is shared for; then the entry, an arrow to
   the mark or the exit, and the size at the right. */
.pep-share-figs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 26px; margin: 0; }
.pep-share-figs > div { display: grid; gap: 1px; min-width: 0; }
.pep-share-figs dt { color: var(--pep-text-3); font-size: 11px; font-weight: 600; }
.pep-share-figs dd { margin: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.pep-share-pnl { flex-basis: 100%; }
.pep-share-pnl dd { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.pep-share-pct { font-size: 13px; font-weight: 600; letter-spacing: 0; }
/* What the figure leaves out ("excl. funding"), after its percent: quieter than the figure. */
.pep-share-tail { color: var(--pep-text-2); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.pep-share-to { position: relative; }
.pep-share-to::before {
  content: "\2192";
  position: absolute;
  bottom: 0;
  left: -19px;
  color: var(--pep-text-3);
  font-size: 13px;
  line-height: 1.45;
}
.pep-share-size { margin-left: auto; text-align: right; }
@container (max-width: 279px) {
  .pep-share-top { grid-template-areas: "logo what what" "logo by state"; }
  /* "excl. funding" on its own line, under the figure. */
  .pep-share-tail { display: block; }
}
.pep-share-note,
.pep-share-said { margin: 0; color: var(--pep-text-2); font-size: 12px; line-height: 1.4; }
.pep-share-do { display: flex; justify-content: flex-end; font-size: 13px; }
/* Details: the full position, a quiet link with the arrow out of a box. */
.pep-share-details { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

/* --------------------------------------------- the "+"'s list (round 15) */

/* A popover over the bar's left end on a desktop; a sheet from the screen's foot, over a backdrop, on a phone. */
.pep-share-scrim { display: none; }
.pep-share-pick {
  position: absolute;
  z-index: 7;
  bottom: calc(100% + 8px);
  left: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  width: min(420px, 100%);
  max-height: min(460px, 64vh);
  padding: 12px;
  /* Brought into view clear of the ticker and the phone's tab bar. */
  scroll-margin-bottom: calc(var(--pep-tabbar-h) + 16px);
  border: 1px solid var(--pep-line-strong);
  border-radius: 14px;
  background: var(--pep-panel-2);
  box-shadow: 0 16px 40px rgb(0 0 0 / 50%);
}
.pep-share-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding-left: 4px; }
.pep-share-pick-title { margin: 0; font-size: 15px; font-weight: 700; }
.pep-share-pick-close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pep-text-3);
  cursor: pointer;
}
.pep-share-pick-close:hover { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-share-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--pep-panel); }
.pep-share-tab {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.pep-share-tab:hover { color: var(--pep-text); }
.pep-share-tab[aria-selected="true"] { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-share-tab-n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel-2);
  color: var(--pep-text-3);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.pep-share-pick-body {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  margin: 0 -6px;
  padding: 0 6px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--pep-line-strong) transparent;
  scrollbar-width: thin;
}
.pep-share-search {
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel);
  color: var(--pep-text);
  font: inherit;
  font-size: 14px;
}
.pep-share-search::placeholder { color: var(--pep-text-3); }
.pep-share-search:focus { outline: none; border-color: var(--pep-brand); }
.pep-share-pick-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* One position, a compact row of the position card: the logo, the ticker, side and leverage over the size and when, and
   the PnL with its percent at the right. The same row is the attached preview in the bar. */
.pep-share-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pep-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pep-share-pick-row:hover,
.pep-share-pick-row:focus { background: var(--pep-panel-hover); outline: none; }
.pep-share-row-logo { display: inline-grid; flex: none; }
.pep-share-row-main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.pep-share-row-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pep-share-row-t { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pep-share-row-t bdi { unicode-bidi: isolate; }
.pep-share-row-lev { flex: none; color: var(--pep-text-2); font-size: 12px; font-weight: 700; }
.pep-share-row-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--pep-text-3);
  font-size: 12px;
  white-space: nowrap;
}
.pep-share-row-dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.pep-share-row-pnl { display: grid; flex: none; justify-items: end; gap: 1px; text-align: right; }
.pep-share-row-usd { font-size: 14px; font-weight: 700; }
.pep-share-row-pct { font-size: 12px; font-weight: 600; }
/* The attached preview's PnL, first on its second line. */
.pep-share-row-subpnl { display: inline-flex; flex: none; gap: 4px; align-items: baseline; }
.pep-share-row-subpnl .pep-share-row-usd { font-size: 12px; }
.pep-share-row-sub > span { flex: none; }
.pep-share-row-sub > span:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pep-share-pick-said { margin: 0; padding: 8px 4px; color: var(--pep-text-2); font-size: 13px; line-height: 1.45; }
.pep-share-pick-empty { display: grid; justify-items: center; gap: 6px; padding: 22px 8px 18px; color: var(--pep-text-2); font-size: 13px; line-height: 1.45; text-align: center; }
.pep-share-pick-empty p { margin: 0; }
.pep-share-pick-empty .pep-share-pick-empty-t { color: var(--pep-text); font-size: 14px; font-weight: 700; }
.pep-share-pick-empty .pep-btn { margin-top: 6px; }
.pep-share-pick-foot { margin: 0; padding: 0 8px; color: var(--pep-text-3); font-size: 11px; line-height: 1.4; }
.pep-share-pick-close:focus-visible,
.pep-share-tab:focus-visible,
.pep-share-pick-row:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
@media (max-width: 599px) {
  .pep-share-scrim { position: fixed; inset: 0; z-index: 55; display: block; background: rgb(0 0 0 / 55%); }
  .pep-share-pick {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 56;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    width: auto;
    max-height: min(78dvh, 620px);
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px rgb(0 0 0 / 50%);
  }
  /* The sheet's grabber: a short rule at its top. */
  .pep-share-pick::before {
    content: "";
    justify-self: center;
    width: 36px;
    height: 4px;
    border-radius: var(--pep-radius-pill);
    background: var(--pep-line-strong);
  }
  .pep-share-pick-row { min-height: 58px; }
  .pep-share-tab { min-height: 40px; }
}

/* ------------------------------------------- the box (round 15: one bar) */

/* The bar: the "+", the words, the face, then Send, in one rounded field; a share attached sits in it, above them. */
.pep-chat-compose { display: grid; gap: 4px; margin: 0; padding-top: 10px; border-top: 1px solid var(--pep-line); }
.pep-chat-field {
  display: grid;
  min-width: 0;
  /* Brought into view clear of the ticker and the phone's tab bar. */
  scroll-margin-bottom: calc(var(--pep-tabbar-h) + 16px);
  border: 1px solid var(--pep-line-strong);
  border-radius: 22px;
  background: var(--pep-panel-2);
}
.pep-chat-field:focus-within { border-color: var(--pep-brand); }
.pep-chat-bar { display: flex; align-items: flex-end; gap: 2px; min-width: 0; padding: 4px; }
.pep-chat-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pep-text-3);
  cursor: pointer;
}
.pep-chat-icon:hover:not(:disabled),
.pep-chat-icon[aria-expanded="true"] { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-chat-icon:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-chat-icon:disabled { cursor: default; opacity: 0.45; }
/* The "+" is the bar's ground cut out of the disc. */
.pep-chat-plus-x { stroke: var(--pep-panel-2); }
.pep-chat-plus:hover:not(:disabled) .pep-chat-plus-x,
.pep-chat-plus[aria-expanded="true"] .pep-chat-plus-x { stroke: var(--pep-panel-hover); }
.pep-chat-box {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 128px;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: var(--pep-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  resize: none;
  unicode-bidi: isolate;
}
.pep-chat-box:focus { outline: none; }
.pep-chat-box::placeholder { overflow: hidden; color: var(--pep-text-3); text-overflow: ellipsis; white-space: nowrap; }
.pep-chat-box:disabled { cursor: not-allowed; }
/* Send: the primary pill (shell.css) as a disc with a paper plane; grey while there is nothing to send. */
.pep-chat-send.pep-btn { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; min-height: 36px; margin-left: 2px; padding: 0; }
.pep-chat-send svg { margin-left: -1px; }
/* A share attached: its row in the bar, above the words, with the cross that takes it off. */
.pep-chat-attach { min-width: 0; padding: 8px 8px 0; }
.pep-share-attached {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 4px 6px 8px;
  border: 1px solid var(--pep-line);
  border-radius: 14px;
  background: var(--pep-panel);
}
.pep-share-attached-row { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.pep-share-attached-x { width: 32px; height: 32px; }
.pep-chat-foot { display: flex; justify-content: space-between; gap: 12px; padding: 0 8px; color: var(--pep-text-3); font-size: 12px; }
.pep-chat-hint { min-width: 0; }
.pep-chat-count { white-space: nowrap; }
/* A phone's keyboard has no Shift+Enter to tell of. */
@media (max-width: 599px) {
  .pep-chat-hint { visibility: hidden; }
}
.pep-chat-count-near { color: var(--pep-text-2); font-weight: 600; }
.pep-chat-count-over { color: var(--pep-warn); font-weight: 700; }
.pep-chat-problem { padding: 0 8px; }
.pep-chat-problem span { display: block; color: var(--pep-warn); font-weight: 600; }
/* A room the viewer cannot write in for now (a clan's mute): the line over the bar, the bar drawn and disabled. */
.pep-chat-blocked { margin: 0; padding: 0 8px; color: var(--pep-text-2); font-size: 13px; font-weight: 600; line-height: 1.4; }
.pep-chat-compose-blocked .pep-chat-field { background: var(--pep-panel); }

/* Before the box: the steps to write, or why this room is read-only for you. */
.pep-chat-signin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--pep-line);
}
.pep-chat-signin-text { margin: 0; color: var(--pep-text-2); font-size: 13px; line-height: 1.45; }
/* A plain note in the site's banner (dex.css, .pep-callout). */
.pep-chat-notice { margin: 0; }

/* --------------------------------------------- a room on the page it is about */

.pep-chat-panel { display: grid; gap: 4px; min-width: 0; }
.pep-chat-panel .pep-panel-head { margin-bottom: 0; }
.pep-chat-sub { margin: 0 0 6px; font-size: 13px; }
.pep-chat-open { font-size: 13px; }

/* ---------------------------------------------------------------- the inbox */

.pep-inbox { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pep-inbox-row {
  display: grid;
  grid-template-areas: "who when" "last count";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px;
  border-radius: var(--pep-radius-sm);
  color: var(--pep-text);
  text-decoration: none;
}
a.pep-inbox-row:hover { background: var(--pep-panel-2); color: var(--pep-text); }
a.pep-inbox-row:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
/* The open conversation: its ground tinted with the brand, as the film's chosen tab is filled; no bar down its edge
   (round 11). */
.pep-inbox-row-open { background: color-mix(in srgb, var(--pep-brand) 12%, var(--pep-panel-2)); }
.pep-inbox-who { grid-area: who; min-width: 0; }
.pep-inbox-sub { color: var(--pep-text-3); font-size: 12px; }
.pep-inbox-when { grid-area: when; color: var(--pep-text-3); font-size: 12px; white-space: nowrap; }
.pep-inbox-last {
  grid-area: last;
  min-width: 0;
  padding-left: 30px;
  overflow: hidden;
  color: var(--pep-text-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.pep-inbox-row-unread .pep-inbox-last { color: var(--pep-text); font-weight: 600; }
.pep-inbox-count {
  grid-area: count;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-warn);
  color: var(--pep-ground);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.pep-inbox-said { margin: 6px 4px; }

/* ------------------------------------------------------- the Messages page */

.pep-msgs { display: grid; gap: 16px; min-width: 0; }
.pep-msgs-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pep-msgs-inbox,
.pep-msgs-room { display: grid; align-content: start; gap: 12px; min-width: 0; }
.pep-msgs-inbox {
  position: sticky;
  top: calc(var(--pep-top-h) + 16px);
  max-height: calc(100dvh - var(--pep-top-h) - var(--pep-ticker-h) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pep-msgs-room-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pep-msgs-back { display: none; font-size: 13px; }
.pep-msgs-none { margin: 0; padding: 48px 12px; text-align: center; }
.pep-msgs-signin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.pep-msgs-signin .pep-sub { margin: 0; }
.pep-msgs-room .pep-chat-log { height: clamp(340px, calc(100dvh - 400px), 780px); }

.pep-convo { display: grid; gap: 12px; min-width: 0; }
.pep-convo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pep-line);
}
.pep-convo-link { font-size: 13px; }
.pep-chat-block { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pep-chat-block-note { font-size: 12px; }

@media (max-width: 899px) {
  .pep-msgs-grid { grid-template-columns: minmax(0, 1fr); }
  .pep-msgs-inbox { position: static; max-height: none; overflow: visible; }
  /* One at a time on a phone: the list, or the conversation with its way back. */
  .pep-msgs-open .pep-msgs-inbox { display: none; }
  .pep-msgs:not(.pep-msgs-open) .pep-msgs-room { display: none; }
  .pep-msgs-back { display: inline; }
  .pep-msgs-room .pep-chat-log { height: max(280px, calc(100dvh - var(--pep-top-h) - var(--pep-tabbar-h) - 340px)); }
}

/* ----------------------------------------- the top bar's way to the page */

.pep-msgs-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--pep-line);
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel);
  color: var(--pep-text-2);
  text-decoration: none;
}
a.pep-msgs-link:hover,
.pep-msgs-link[aria-current="page"] { border-color: var(--pep-line-strong); background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-msgs-link:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-msgs-count {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-warn);
  box-shadow: 0 0 0 2px var(--pep-ground);
  color: var(--pep-ground);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
/* In the account menu, beside its word. The bubble stays in the bar at every width (round 13): Messages is in no
   menu and in no More sheet, the bubble is its way, and the account menu's. */
.pep-msgs-count-inline { position: static; display: inline-block; margin-left: 8px; box-shadow: none; }

/* A trader's profile: Message beside Follow. */
.pep-prof-do { align-items: flex-start; gap: 10px; }
@media (max-width: 599px) {
  .pep-prof-message { flex: 1 1 auto; }
}

/* ------------------------------------- reactions, emoji and tags (round 13) */

/* A message's reactions under its bubble: one chip per emoji with its count; yours tinted with the brand, as your own
   messages are (a ground, never a bar), and pressed. 28 px high: a finger's target. */
.pep-react-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
.pep-react-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 28px;
  min-height: 28px;
  padding: 0 9px 0 7px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel);
  color: var(--pep-text-2);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
button.pep-react-chip:hover { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-react-chip:focus-visible,
.pep-react-quick-one:focus-visible,
.pep-chat-emoji-open:focus-visible,
.pep-emoji-cell:focus-visible,
.pep-emoji-jumpto:focus-visible,
.pep-chat-tag:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-react-shown { cursor: default; }
.pep-react-chip.pep-react-mine { border-color: color-mix(in srgb, var(--pep-brand) 55%, transparent); background: color-mix(in srgb, var(--pep-brand) 14%, var(--pep-panel)); color: var(--pep-text); }
button.pep-react-chip.pep-react-mine:hover { background: color-mix(in srgb, var(--pep-brand) 22%, var(--pep-panel)); }
.pep-react-emoji { font-size: 15px; line-height: 1; }
.pep-react-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.pep-react-add { justify-content: center; padding: 0 7px; color: var(--pep-text-3); }
.pep-react-problem { color: var(--pep-warn); }

/* The quick row at the top of a message's menu: eight a tap away (Add reaction..., the picker, is the menu's next item). */
.pep-react-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0; max-width: 100%; }
.pep-react-quick-one {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pep-text-3);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.pep-react-quick-one:hover,
.pep-react-quick-one:focus { background: var(--pep-panel-hover); color: var(--pep-text); outline: none; }
.pep-react-quick-one.pep-react-mine { background: color-mix(in srgb, var(--pep-brand) 16%, var(--pep-panel-2)); }
/* A message whose reaction picker is open spans the room, so the picker has room to draw. */
.pep-chat-msg-picking { justify-self: stretch; max-width: 100%; }

/* A tag in somebody's words: a link SENDIT made (a market, a token, the search), in the words' own colour, underlined. */
.pep-chat-tag {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pep-text);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--pep-text-3);
  text-underline-offset: 2px;
  cursor: pointer;
  unicode-bidi: isolate;
}
a.pep-chat-tag:hover,
.pep-chat-tag:hover { color: var(--pep-text); text-decoration-color: currentColor; }
/* A tag that asks the search (no page of its own): its underline dotted, so it reads apart from a market's or a token's. */
.pep-chat-tag-search { text-decoration-style: dotted; }

/* The box's emoji: the face at the bar's right (round 15, .pep-chat-icon). Its picker opens over the room above the
   bar's right end, the :shortcode: suggestions above its left. */
.pep-chat-fieldwrap { position: relative; min-width: 0; }
.pep-chat-pop { position: absolute; z-index: 6; bottom: calc(100% + 6px); left: 0; box-shadow: 0 12px 32px rgb(0 0 0 / 45%); }
.pep-chat-pop-end { right: 0; left: auto; }

/* The picker: drawn in the flow of what opened it, its own search, its groups, then a grid that scrolls on its own. */
.pep-emoji {
  display: grid;
  gap: 8px;
  width: min(360px, 100%);
  min-width: 0;
  padding: 10px;
  /* Brought into view clear of the ticker and the phone's tab bar. */
  scroll-margin-bottom: calc(var(--pep-tabbar-h) + 16px);
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
}
.pep-emoji-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pep-emoji-search {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel);
  color: var(--pep-text);
  font: inherit;
  font-size: 14px;
}
.pep-emoji-search::placeholder { color: var(--pep-text-3); }
.pep-emoji-search:focus { outline: none; border-color: var(--pep-brand); }
.pep-emoji-close { flex: none; font-size: 13px; }
.pep-emoji-jump { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pep-emoji-jumpto {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.pep-emoji-jumpto:hover { background: var(--pep-panel-hover); }
.pep-emoji-body {
  display: grid;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--pep-line-strong) transparent;
  scrollbar-width: thin;
}
.pep-emoji-section { display: grid; gap: 2px; min-width: 0; }
.pep-emoji-head { margin: 4px 2px 0; color: var(--pep-text-3); font-size: 12px; font-weight: 700; }
.pep-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.pep-emoji-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pep-emoji-cell:hover { background: var(--pep-panel-hover); }
.pep-emoji-said { margin: 6px 2px; color: var(--pep-text-2); font-size: 13px; line-height: 1.45; }

/* :shortcode: suggestions over the box. */
.pep-emoji-suggest {
  display: grid;
  gap: 2px;
  width: min(320px, 100%);
  margin: 0;
  padding: 4px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
  list-style: none;
}
.pep-emoji-suggest-one {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--pep-text-2);
  font-size: 14px;
  cursor: pointer;
}
.pep-emoji-suggest-on { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-emoji-suggest-e { font-size: 20px; line-height: 1; }

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: no-preference) {
  .pep-chat-msg { animation: pep-chat-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pep-chat-jump { animation: pep-chat-in 180ms ease-out both; }
  .pep-chat-field { transition: border-color 0.15s ease; }
  .pep-chat-more { transition: opacity 0.12s ease, background-color 0.12s ease; }
  .pep-chat-menu { animation: pep-chat-menu-in 120ms ease-out both; }
  .pep-share-pick { animation: pep-chat-menu-in 120ms ease-out both; }
  .pep-chat-icon,
  .pep-share-tab,
  .pep-share-pick-row { transition: background-color 0.12s ease, color 0.12s ease; }
  .pep-chat-menu-item { transition: background-color 0.12s ease; }
  .pep-inbox-row { transition: background-color 0.12s ease; }
  .pep-react-chip,
  .pep-react-quick-one,
  .pep-emoji-cell { transition: background-color 0.12s ease, border-color 0.12s ease; }
  @keyframes pep-chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes pep-chat-menu-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
}