:root {
  color-scheme: dark;
  --bg: #070a0f;
  --surface: #0d1118;
  --surface-raised: #121824;
  --surface-hover: #182132;
  --border: #243043;
  --text: #f4f7fb;
  --text-secondary: #93a4b8;
  --text-muted: #5f7086;
  --accent: #14f195;
  --accent-secondary: #8b5cf6;
  --accent-cyan: #22d3ee;
  --buy: #16c784;
  --sell: #ea3943;
  --warning: #f5b849;
  --danger: #ff5c7a;
  --shadow: 0 12px 40px rgb(0 0 0 / 0.28);
  --avatar-bg: #d8e0ea;
  --avatar-fg: #1c2534;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fc;
  --surface: #ffffff;
  --surface-raised: #f0f4fa;
  --surface-hover: #e8eef7;
  --border: #d5dfec;
  --text: #101724;
  --text-secondary: #4e6076;
  --text-muted: #7a8ba1;
  --accent: #059669;
  --accent-secondary: #7c3aed;
  --accent-cyan: #0284c7;
  --buy: #0e9f6e;
  --sell: #d92d3a;
  --warning: #b7791f;
  --danger: #d9365e;
  --shadow: 0 12px 36px rgb(16 23 36 / 0.12);
  --avatar-bg: #1c2534;
  --avatar-fg: #d8e0ea;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

button {
  font: inherit;
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  transform: translateY(-140%);
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 10px;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.detail-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.top-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  padding: 10px clamp(12px, 2vw, 24px);
  backdrop-filter: blur(14px);
}

.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/*
 * The sidebar lives below the sticky top-nav in normal document flow (not an overlay), so it
 * structurally can never cover it -- collapsing only ever changes its width, never its
 * position. Two layers on purpose: .sidebar itself has no position/height rules of its own, so
 * the flex row's default stretch alignment makes it run the full remaining page height
 * (edge-to-edge, pump.fun-style) even on a page taller than the viewport. .sidebar-inner is
 * the one that's actually sticky, capped to the viewport height -- if position:sticky were put
 * on .sidebar directly instead, its height would equal its own containing block's height
 * (they're stretched to match), leaving sticky with zero room to move within its container and
 * silently doing nothing while the whole box scrolled away with the page.
 *
 * No overflow rule on .sidebar itself, on purpose: overflow:hidden (or any value other than
 * visible) on an ancestor of a position:sticky element makes that ancestor the sticky
 * element's scrolling container per the CSS spec, even though it never actually scrolls
 * itself (it just clips). .sidebar-inner would then stick relative to .sidebar's own box --
 * which scrolls away with the page -- instead of relative to the real viewport, breaking
 * sticky entirely once the page is taller than one screen. .sidebar-inner already has its own
 * overflow-x: hidden below to clip collapsed-state content, so nothing here needs to
 * duplicate that.
 */
.sidebar {
  flex: 0 0 208px;
  width: 208px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: flex-basis 0.15s ease, width 0.15s ease, border-color 0.15s ease;
}

/* display: flex + column, with min-height matching max-height, so .sidebar-footer (the
   Shrink/Expand toggle) can be pushed all the way to the bottom of the visible viewport via
   margin-top: auto -- without a real height here the column would only hug its own content
   and the footer would sit right after the last nav link instead of pinned to the bottom. */
.sidebar-inner {
  position: sticky;
  top: 64px;
  min-height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Collapses to a narrow icon-only rail: every item (including the footer toggle) keeps its
   icon and just hides its text label -- see .sidebar.collapsed .sidebar-nav a span,
   .sidebar.collapsed .sidebar-toggle span below. */
.sidebar.collapsed {
  flex-basis: 60px;
  width: 60px;
}

.sidebar-nav {
  display: grid;
  gap: 4px;
  padding: 8px 8px 12px;
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 8px;
}

/* .sidebar-toggle sits in .sidebar-footer, below the nav links, styled identically to the
   a. links above it (same layout/spacing/type) so it still reads as a menu item rather than
   a separate control bolted onto the sidebar. */
.sidebar-nav a,
.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  overflow: hidden;
  border: none;
  border-radius: 8px;
  padding: 0 12px;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sidebar-nav a svg,
.sidebar-toggle svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-toggle-icon-chevron {
  transform: none;
}

/* Collapsed shows a menu (hamburger) icon instead of the collapse chevron -- a clearer "open
   the sidebar" affordance than a lone chevron once the sidebar itself is down to its icon
   rail. */
.sidebar-toggle-icon-menu {
  display: none;
}

.sidebar.collapsed .sidebar-toggle-icon-chevron {
  display: none;
}

.sidebar.collapsed .sidebar-toggle-icon-menu {
  display: block;
}

.sidebar-nav a span,
.sidebar-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-nav a span,
.sidebar.collapsed .sidebar-toggle span {
  display: none;
}

.sidebar-nav a[data-admin-nav][hidden] {
  display: none;
}

.sidebar-nav a:hover,
.sidebar-nav a:focus-visible,
.sidebar-nav a[aria-current="page"],
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: var(--surface-raised);
  color: var(--text);
  outline: none;
}

.brand,
.icon-button {
  color: var(--text);
  text-decoration: none;
}

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
}

.brand-mark img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.brand-mark svg,
.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.icon-button svg.brand-glyph {
  fill: currentColor;
  stroke: none;
}

.brand-mark svg {
  width: 25px;
  height: 25px;
  color: #07100d;
}

.brand-copy {
  display: grid;
  min-width: 0;
}

.brand-name {
  display: inline-flex;
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.3px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-name-curve {
  color: var(--text);
}

.brand-name-radar {
  color: var(--accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
}

.brand-subtitle {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.icon-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
}

.icon-button[hidden] {
  display: none;
}

.search-wrap {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0 12px;
}

.search-wrap svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  color: var(--text-muted);
}

.search-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.search-wrap input::placeholder {
  color: var(--text-muted);
}

.search-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgb(3 6 12 / 0.6);
  backdrop-filter: blur(2px);
  padding: 12vh 16px 16px;
}

.search-dialog-backdrop[hidden] {
  display: none;
}

.search-dialog {
  width: min(100%, 640px);
  max-height: 76vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 12px;
}

.search-dialog .search-wrap {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  min-height: 46px;
}

.search-dialog-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.search-dialog-close:hover {
  color: var(--text);
  background: var(--surface-raised);
}

.search-dialog-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-dialog .search-results {
  margin-top: 12px;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.search-results[hidden] {
  display: none;
}

.search-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.search-result:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  outline: none;
}

.search-result-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--accent);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.search-result-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.search-result-title,
.search-result-subtitle,
.search-result-kind {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.search-result-subtitle {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
}

.search-result-kind {
  max-width: 72px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 780;
  text-align: right;
  text-transform: uppercase;
}

.wallet-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
}

.wallet-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.wallet-button.connected {
  border-color: transparent;
  background: transparent;
  color: var(--accent);
}

.icon-button:hover,
.icon-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--surface-hover);
  color: var(--text);
  outline: none;
}

.wallet-button:hover,
.wallet-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--surface-hover);
  outline: none;
}

.wallet-button.connected:hover,
.wallet-button.connected:focus-visible {
  border-color: transparent;
  background: var(--surface-hover);
}

.wallet-button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.wallet-button-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 11px;
  font-weight: 750;
}

.wallet-button-avatar[hidden] {
  display: none;
}

.wallet-button-icon-hidden {
  display: none;
}

.scroll-locked {
  overflow: hidden;
}

.wallet-popover-position-name-col {
  display: grid;
  min-width: 0;
}

.clipboard-fallback-textarea {
  position: fixed;
  opacity: 0;
}

.wallet-button-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallet-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  background: rgb(3 6 12 / 0.4);
  padding: calc(56px + 8px) 16px 16px;
}

.wallet-popover-backdrop[hidden] {
  display: none;
}

.wallet-popover {
  width: min(100%, 320px);
  max-height: 80vh;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
}

.wallet-popover-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.wallet-popover-section {
  display: grid;
  gap: 6px;
}

.wallet-popover-total {
  font-size: 26px;
  font-weight: 800;
}

.wallet-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wallet-popover-sol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: var(--surface-raised);
  padding: 4px 10px 4px 6px;
  font-size: 12px;
  font-weight: 720;
}

.wallet-popover-sol-icon {
  width: 14px;
  height: 14px;
}

.wallet-popover-address-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.wallet-popover-address-row code {
  overflow: hidden;
  color: var(--text-secondary);
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-popover-copy {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.wallet-popover-copy:hover {
  color: var(--text-secondary);
  background: var(--surface-raised);
}

.wallet-popover-copy-icon-copy,
.wallet-popover-copy-icon-check {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wallet-popover-copy-icon-check {
  display: none;
  color: var(--buy);
}

.wallet-popover-copy.copied .wallet-popover-copy-icon-copy {
  display: none;
}

.wallet-popover-copy.copied .wallet-popover-copy-icon-check {
  display: block;
}

.wallet-popover-provider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 720;
}

.wallet-popover-provider svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wallet-popover-positions-head {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.wallet-popover-positions {
  display: grid;
  gap: 6px;
}

.wallet-popover-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.wallet-popover-position {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wallet-popover-position-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 10px;
  font-weight: 850;
}

.wallet-popover-position-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallet-popover-position-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-popover-position-meta {
  color: var(--text-muted);
  font-size: 11px;
}

.wallet-popover-position-value {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 720;
  text-align: right;
}

.wallet-popover-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.wallet-popover-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
  text-decoration: none;
}

.wallet-popover-profile svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.wallet-popover-profile:hover,
.wallet-popover-profile:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-raised));
}

.wallet-popover-disconnect {
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--sell);
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

.wallet-popover-disconnect:hover {
  background: color-mix(in srgb, var(--sell) 14%, var(--surface-raised));
}

.detail-terminal {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 22px);
}

.newsfeed-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 340px;
  align-items: start;
  gap: 0;
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 22px);
}

.newsfeed-center {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* Square corners on desktop, where the feed sits flush against Top Traders and the highlights
   column with no gap (border-radius on a touching edge looks like a gap that isn't there) --
   restored to rounded in the sub-1100px layout below, where Top Traders stacks above/below the
   feed instead and the feed reads as its own standalone card again. */
#newsfeedSection {
  margin-top: 0;
  border-radius: 0;
}

/* Scrolls away with the page exactly like .top-traders-panel and the feed -- no independent
   sticky behavior, so all three columns move in lockstep instead of the header ever detaching
   from the rest of the layout. */
/* grid-auto-rows: max-content -- without it, Chromium shrinks "auto" rows to fit a scrollable
   grid container's definite height instead of letting them keep their natural content height
   and overflow into the container's own scrollbar, clipping every panel's bottom content
   (verified: rows compressed to exactly height/3 each, well under their ~359px scrollHeight). */
/* Desktop: position: sticky (same as .top-traders-panel, via .side-panel's own rule -- neither
   is overridden back to static here anymore) sticks this to the viewport while scrolling,
   releasing once its own 3 panels' combined height has been scrolled past so the feed alone
   drives the rest of the scroll from there. overflow-y: auto only matters for the mobile drawer
   below, which gives this an explicit height; on desktop nothing here has a height short enough
   for it to ever engage. */
.newsfeed-side-right {
  position: sticky;
  top: 80px;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 0;
  overflow-y: auto;
}

/* Desktop: the right column is as tall as the screen (below the nav), and it stays in view while the page scrolls, like Top Traders. When the page is scrolled to the bottom it comes to
   rest against the bottom of the layout, so the three columns end together. The advertisement keeps its size and the chat fills the rest. */
@media (min-width: 1101px) {
  .newsfeed-side-right {
    /* It sits where it starts (below the nav and the strip) and stays there while the page scrolls, so its bottom is the screen's bottom edge less the layout's padding: the message box is
       always in view, and at the end of the page it lines up with the other columns. */
    top: 125px;
    display: flex;
    height: calc(100vh - 147px);
    height: calc(100dvh - 147px);
    min-height: 480px;
    flex-direction: column;
    overflow: hidden;
  }

  .newsfeed-side-right .ad-panel {
    flex: none;
  }

  .newsfeed-side-right .chat-panel {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

/* Only shown below the 1100px breakpoint, where .top-traders-panel and .newsfeed-side-right
   become slide-in drawers instead of stacking inline. Both drawers share one backdrop since only
   one is ever open at a time. */
/* .drawer-trigger-bar is a normal (non-fixed) row in the document flow, directly under .top-nav
   with no gap -- an earlier version made these buttons position: fixed, floating either at
   mid-screen or, moved inside the nav's own row, covering the brand/search/theme controls
   already there. Sitting in flow as a genuine second row avoids covering anything: the nav
   keeps its own content, and everything below (the Suggested/Following tab bar) is simply
   pushed down by this row's own height instead of overlapped. Sticky right under the nav (which
   is itself sticky at top: 0) so it stays reachable while scrolling, exactly like before. */
.drawer-trigger-bar {
  display: none;
}

/* Tablet widths: the buttons are a row of their own under the trending strip, between it and the feed. */
@media (min-width: 1023px) and (max-width: 1100px) {
  .app-body:has(> .trending-bar):has(> .drawer-trigger-bar) {
    grid-template-rows: 38px auto minmax(0, 1fr);
  }

  .app-body:has(> .trending-bar[hidden]):has(> .drawer-trigger-bar) {
    grid-template-rows: 0 auto minmax(0, 1fr);
  }

  .app-body:has(> .trending-bar):has(> .drawer-trigger-bar) > .drawer-trigger-bar {
    grid-row: 2;
    grid-column: 2;
  }

  .app-body:has(> .trending-bar):has(> .drawer-trigger-bar) > main {
    grid-row: 3;
  }
}

@media (max-width: 1100px) {
  .drawer-trigger-bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 6;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    background: var(--surface);
  }
}

/* Full-width, edge to edge, with only the shared border between them as a divider -- a
   segmented-control look matching .top-traders-tab/.profile-tab elsewhere on this page, not two
   separate pill buttons with side padding and their own individual borders. */
.side-drawer-trigger {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.side-drawer-trigger:last-child {
  border-right: 0;
}

.side-drawer-trigger svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.side-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 7;
  background: color-mix(in srgb, black 55%, transparent);
}

/* Only shown inside the two drawers below the 1100px breakpoint (see the media query) -- sits
   in the first panel's own header row via margin-left: auto rather than floating absolutely, so
   it never overlaps that header's title/badge text. */
.drawer-close-button {
  display: none;
}

.newsfeed-side-right .side-panel {
  position: static;
}

.newsfeed-side-right .side-panel:not(:first-child) {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.newsfeed-side-right .side-panel:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Desktop only (the >= 1101px column layout, not the mobile drawer where this same left edge is
   the drawer's own visible boundary and needs its border) -- touches the feed column directly
   with no gap, so the left edge reads as one connected surface exactly like #newsfeedSection's
   own squared-off touching edge. */
@media (min-width: 1101px) {
  .newsfeed-side-right .side-panel {
    border-left: 0;
  }

  .newsfeed-side-right .side-panel:first-child {
    border-top-left-radius: 0;
  }

  .newsfeed-side-right .side-panel:last-child {
    border-bottom-left-radius: 0;
  }

  /* The two seams where the feed touches Top Traders (left) and the highlights column
     (right) -- .top-traders-panel has no border-right and the highlights panels have no
     border-left (just above), so #newsfeedSection's own border is the only line drawn at
     either seam; recoloring it alone is enough to recolor the whole seam. */
  #newsfeedSection {
    border-left-color: var(--accent);
    border-right-color: var(--accent);
  }

  /* The 2 seams between the 3 highlight panels themselves (Most Reacted/Replied/Reposted) --
     each seam is 2 overlapping borders (the panel above's border-bottom, this panel's
     border-top, collapsed via margin-top: -1px), so both sides are recolored to make sure the
     accent line shows regardless of which one paints on top. */
  .newsfeed-side-right .side-panel:not(:first-child) {
    border-top-color: var(--accent);
  }

  .newsfeed-side-right .side-panel:not(:last-child) {
    border-bottom-color: var(--accent);
  }
}

.side-panel {
  position: sticky;
  top: 80px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Touches the feed column directly (.newsfeed-layout has no gap) -- no border or rounding on
   the side that meets it, so the two columns read as one connected surface. Keeps .side-panel's
   own position: sticky/top: 80px (not overridden here) -- with the feed often the tallest column
   once it has more than ~30 posts, Top Traders now sticks to the viewport while scrolling past
   its own (fixed, 30-row) content, then releases and scrolls normally with the rest of the page
   once its own bottom edge is reached, so only the feed keeps driving the scroll after that. */
.top-traders-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* flex-shrink: 0 matters specifically inside .top-traders-panel (a flex column) -- without it,
   this header shrinks proportionally alongside .top-traders-tabs and .top-traders-list whenever
   all 30 trader rows' natural content height exceeds the panel's available space (e.g. the
   fixed-height mobile drawer), squeezing this fixed 46px header down to as little as ~28px
   instead of staying put while .top-traders-list alone absorbs the overflow via its own
   overflow-y: auto. Harmless where .side-panel-head isn't a flex child (the highlight panels). */
.side-panel-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 46px;
  box-sizing: border-box;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}

.side-panel-head h2 {
  font-size: 13px;
  font-weight: 800;
}

.side-panel-window {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.top-traders-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.top-traders-tab {
  flex: 1;
  height: 32px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.top-traders-tab:last-child {
  border-right: 0;
}

.top-traders-tab:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.top-traders-tab.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.top-traders-list {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.top-trader-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.top-trader-row:last-child {
  border-bottom: 0;
}

.top-trader-row:hover,
.top-trader-row:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.top-trader-row-empty {
  color: var(--text-muted);
  cursor: default;
}

.top-trader-row-empty .top-trader-rank,
.top-trader-row-empty .top-trader-avatar,
.top-trader-row-empty .top-trader-name,
.top-trader-row-empty .top-trader-count {
  opacity: 0.5;
}

.top-trader-row-empty:hover {
  background: none;
}

.top-trader-rank {
  display: grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.top-trader-rank svg {
  width: 18px;
  height: 18px;
}

.top-trader-rank.rank-1 svg {
  fill: #ffd700;
}

.top-trader-rank.rank-2 svg {
  fill: #c0c0c0;
}

.top-trader-rank.rank-3 svg {
  fill: #b5651d;
}

.top-trader-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 10px;
  font-weight: 850;
}

.top-trader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-trader-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-traders-mode {
  display: inline-flex;
  gap: 2px;
  min-width: 0;
}

.top-traders-mode-tab {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 2px 8px 2px 0;
}

.top-traders-mode-tab.active {
  color: var(--text);
}

.top-traders-mode-tab:hover {
  color: var(--accent);
}

.top-trader-share {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
}

.top-traders-rewards {
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--accent, #14f195) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #14f195) 10%, transparent);
  color: var(--accent, #14f195);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
}

.top-traders-rewards:hover,
.top-traders-rewards:focus-visible {
  background: color-mix(in srgb, var(--accent, #14f195) 20%, transparent);
  outline: none;
}

.top-trader-pnl-up {
  color: var(--buy, #14f195) !important;
}

.top-trader-pnl-down {
  color: var(--danger, #ff5d6c) !important;
}

.top-trader-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* .comment-item's full-bleed technique (negative margin escaping to the parent's border edge)
   assumes the same 12px side padding .comment-list itself uses -- matched here so the same
   card markup reaches this panel's actual edges instead of overflowing past them. */
/* The welcome banner of an invite link. */
.invite-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 12px 0;
  border: 1px solid color-mix(in srgb, var(--accent, #14f195) 45%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #14f195) 10%, var(--surface));
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}

.invite-banner img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.invite-banner span {
  min-width: 0;
  flex: 1;
}

.invite-banner button {
  flex: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
}

.invite-banner button:first-of-type {
  background: var(--accent, #14f195);
  color: var(--on-accent, #04130c);
}

/* The advertisement section: empty for now. */
.ad-slot {
  display: grid;
  min-height: 96px;
  margin: 10px 12px 12px;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .newsfeed-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .newsfeed-center {
    order: 1;
    padding: 0;
  }

  #newsfeedSection {
    border-radius: 8px;
  }

  /* Below this width, both Top Traders and the highlight panels stop competing with the feed
     for horizontal room -- they move off into slide-in drawers (triggered by .side-drawer-trigger)
     instead of stacking full-width and pushing the feed down, so the feed always stays the
     widest section. */
  .side-drawer-trigger {
    display: flex;
  }

  .side-drawer-backdrop:not([hidden]) {
    display: block;
  }

  .drawer-close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }

  .drawer-close-button:hover {
    background: var(--surface-hover);
    color: var(--text);
  }

  /* .side-panel's base position: sticky/static tug-of-war is settled last, below -- these two
     panels are given position: fixed here but that alone wouldn't win against a same-specificity
     .side-panel rule appearing later in the stylesheet, so the reset below explicitly excludes
     them. */
  .top-traders-panel {
    inset: 0 auto 0 0;
    width: min(360px, 88vw);
    margin: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .top-traders-panel.is-open {
    transform: translateX(0);
  }

  /* Padding/gap/border removed here (unlike .top-traders-panel above) so the 3 stacked highlight
     panels reach the drawer's own edges and merge into one continuous surface -- the same look
     the base .newsfeed-side-right rules already give them on desktop, just carried into the
     drawer instead of overridden back to 3 separately-rounded, gapped cards. */
  .newsfeed-side-right {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 8;
    width: min(360px, 88vw);
    margin: 0;
    padding: 0;
    gap: 0;
    overflow-y: auto;
    background: var(--surface);
    box-shadow: var(--shadow);
    transform: translateX(100%);
    transition: transform 0.2s ease;
  }

  .newsfeed-side-right.is-open {
    transform: translateX(0);
  }

  /* The drawer is the whole screen height: the advertisement keeps its size and the chat takes the rest, down to the bottom edge. */
  .newsfeed-side-right {
    display: flex;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    overflow: hidden;
  }

  .newsfeed-side-right .ad-panel {
    flex: none;
  }

  .newsfeed-side-right .chat-panel {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border-bottom: 0;
    border-radius: 0;
  }

  .side-panel:not(.top-traders-panel) {
    position: static;
  }

  .top-traders-panel {
    position: fixed;
    z-index: 8;
  }
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  overflow: hidden;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h2 {
  font-size: 15px;
  line-height: 1.2;
}

.panel-heading p {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-tabs-panel {
  margin-top: 16px;
}

.profile-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
}

.profile-tab {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  padding: 0 12px;
  white-space: nowrap;
  cursor: pointer;
}

.profile-tab[hidden] {
  display: none;
}

.profile-tab svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-tab:hover {
  color: var(--text-secondary);
}

.profile-tab.active {
  border-bottom-color: var(--accent);
  color: var(--text);
}

.profile-tab-count {
  border-radius: 999px;
  background: var(--surface-raised);
  padding: 1px 7px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 760;
}

.profile-tab.active .profile-tab-count {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-raised));
  color: var(--text);
}

.profile-tab-panel[hidden] {
  display: none;
}

.feed-panel {
  min-width: 0;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

.panel-heading.compact {
  min-height: auto;
  align-items: flex-start;
}

/* Wraps a token avatar so a launchpad badge can be pinned to its bottom-right corner without
   being clipped by the avatar's own overflow:hidden image mask -- the badge is a sibling of the
   avatar, not a child, so JS that replaces the avatar's children never touches it. */
.token-avatar-frame {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.launchpad-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 40%;
  height: 40%;
  min-width: 14px;
  min-height: 14px;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #0a0f0c;
  box-sizing: content-box;
}

.launchpad-badge[hidden] {
  display: none;
}

.launchpad-badge svg {
  width: 60%;
  height: 60%;
  fill: #14f195;
  stroke: none;
}


/* No bottom padding: the last comment's own action bar (flush against its own bottom edge --
   see .comment-item) should be the true end of the list, not followed by a second gap here. */
.comment-list {
  display: grid;
  /* One column that can shrink: a long link or word in a post must wrap, not widen the whole feed. */
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: clip;
  padding: 4px 12px 0;
}

.comment-item,
.comment-item-main {
  min-width: 0;
}

/* Full-bleed the same way .token-social-links escapes its card's own padding: width/margin
   extend .comment-item past .comment-list's 12px side padding to its actual border edge, with
   that same 12px folded into this item's own padding (4px original + 12px list padding = 16px)
   so the content sits at exactly the same visual inset as before -- only the hover/focus
   background (which paints this box, padding included) actually reaches the vertical borders. */
/* No bottom padding: .comment-item-footer (the React/Reply/Share bar) is meant to sit flush
   against this item's bottom edge, right up to the divider line, rather than leaving a second
   gap below an already-boxed-off action bar. */
/* No longer a link, and no longer hovers as one whole block -- only .comment-token-card (its
   own real <a> to the token page) and the individual .comment-action-button segments get their
   own hover feedback now, see below. */
.comment-item {
  position: relative;
  display: block;
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 10px 16px 0;
}

.comment-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--accent);
}

.comment-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-item-avatar {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 10px;
  font-weight: 850;
}

.comment-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The follow button after an author's name (follow-buttons.ts). Styled here too, so it is visible even before the shared script
   arrives, or while a browser still holds an older copy of it. */
.comment-follow-button {
  display: inline-grid;
  width: 22px;
  height: 22px;
  flex: none;
  place-items: center;
  margin-left: -4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}

.comment-follow-button[hidden] {
  display: none;
}

.comment-follow-button.is-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.45;
}

.comment-follow-button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comment-item-author {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}

.comment-item-author:hover,
.comment-item-author:focus-visible {
  text-decoration: underline;
  outline: none;
}

.comment-item-time {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11px;
}

/* The author row and the text together open the post in a dialog (nothing in them is a control except the author link). */
.comment-item-main {
  /* Room on all four sides for the hover highlight, taken back with a negative margin so the text does not move. */
  margin: -6px -10px -6px;
  /* The negative side margins widen it by their 20px: the text then runs the full width of the post. */
  width: calc(100% + 20px);
  box-sizing: border-box;
  border-radius: 10px;
  cursor: pointer;
  padding: 6px 10px;
  transition: background 0.1s ease;
}

.comment-item-main:hover {
  background: color-mix(in srgb, var(--surface-hover) 45%, transparent);
}

.comment-item-main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* In the dialog the post is the whole card: author, text, token, numbers, and the React / Reply / Repost bar, edge to edge. */
.modal-dialog.post-dialog {
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.post-dialog-body {
  min-width: 0;
  margin: 0 -16px -16px;
}

.post-dialog-body .comment-item-body,
.post-dialog-body .comment-item-main {
  min-width: 0;
  overflow-wrap: anywhere;
}

.post-dialog-body .comment-item {
  width: 100%;
  margin: 0;
  padding: 10px 16px 0;
}

.post-dialog-body .comment-item-main {
  cursor: default;
}

.post-dialog-body .comment-item-main:hover {
  background: transparent;
}

.post-dialog-body .comment-token-card,
.post-dialog-body .comment-item-footer {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

.comment-item-body {
  display: block;
  margin-top: 8px;
  margin-left: 0;
  color: var(--text);
  font-size: 14px;
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
  /* Line breaks and blank lines are shown as typed. */
  white-space: pre-wrap;
}

.comment-item-attachment {
  width: auto;
  height: auto;
  display: block;
  max-width: 260px;
  max-height: 200px;
  margin: 8px auto 0;
  border-radius: 8px;
  object-fit: cover;
}

/* Border-top only (no side/bottom box), full-bleed past .comment-item's own 16px side padding
   (same technique the item itself and .comment-item-footer use) so this border -- and
   .comment-token-stats's own internal border-top below -- both reach .comment-list's actual
   vertical border lines instead of stopping short of them. Its own horizontal padding is put
   back so the card's *content* still lines up with the comment body text above it. */
.comment-token-card {
  display: block;
  width: calc(100% + 32px);
  margin: 10px -16px 0;
  border-top: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  background: var(--surface);
  padding: 10px 16px 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease;
}

.comment-token-card:hover,
.comment-token-card:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.comment-token-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
}

.comment-token-head .token-avatar-frame {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.comment-token-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 11px;
  font-weight: 850;
}

.comment-token-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-token-name {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-token-symbol {
  grid-column: 2;
  grid-row: 2;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-token-price {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  color: var(--text);
  font-size: 14px;
  font-weight: 780;
  white-space: nowrap;
}

.comment-token-volume {
  display: inline-flex;
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.comment-token-volume svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Full-bleed the same way .comment-token-card itself is -- this divider is nested one level
   deeper (inside the card's own 16px padding), so it needs the same escape to actually reach
   the list's vertical borders instead of just the card's own (already full-bleed) edges. A
   small bottom padding keeps the row from sitting flush against .comment-item-footer right
   below it, so it reads as vertically centered in its own space rather than crowded at the top. */
.comment-token-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: calc(100% + 32px);
  gap: 6px;
  margin: 8px -16px 0;
  padding: 8px 16px 10px;
  border-top: 1px solid var(--border);
}

.comment-token-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.comment-token-stat-label {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.comment-token-stat-value {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.comment-token-stat-value.positive {
  color: var(--buy);
}

.comment-token-stat-value.negative {
  color: var(--sell);
}

.comment-token-stat-value.risk-low {
  color: var(--buy);
}

.comment-token-stat-value.risk-medium {
  color: var(--warning);
}

.comment-token-stat-value.risk-high {
  color: var(--danger);
}

.comment-token-stat-value.risk-unknown {
  color: var(--text-secondary);
}

/* Same "React | Reply | Share" segmented bar as token-detail-page.ts, full-bleed past
   .comment-item's own 16px side padding so the divider lines reach the card's actual edges
   (same technique .comment-item itself uses to reach .comment-list's border). */
.comment-item-footer {
  display: flex;
  width: calc(100% + 32px);
  margin: 0 -16px;
  border-top: 1px solid var(--border);
}

.comment-action-button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.comment-action-button:last-child {
  border-right: 0;
}

.comment-action-button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.comment-share-button:hover {
  color: var(--accent-cyan);
}

.comment-react-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  overflow: hidden;
}

/* React is now interactive (a real <button>), unlike Reply which stays a display-only segment
   until it gets its own function -- wrapped so the popup picker below can anchor to it without
   disturbing the footer's flex layout. */
.comment-reaction-wrap {
  position: relative;
  display: flex;
  flex: 1;
}

.comment-react-button.active {
  color: var(--accent-cyan);
}

.comment-share-button.active {
  color: var(--accent-cyan);
}

.comment-share-button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.comment-share-button:disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

.comment-repost-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.comment-repost-badge svg {
  flex: 0 0 auto;
}

.comment-reaction-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 5;
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 4px;
}

.comment-reaction-picker[hidden] {
  display: none;
}

.comment-reaction-picker button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}

.comment-reaction-picker button:hover,
.comment-reaction-picker button:focus-visible {
  background: var(--surface-hover);
  transform: scale(1.2);
}

.comment-reaction-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-raised);
  overflow: hidden;
}

.comment-reaction-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.comment-action-count:empty {
  display: none;
}

/* Messages in place of content (nothing here yet, unavailable, sign in): one compact style, centered, with room around
   the text, so none of them sits flush against a panel edge or takes up a tall empty box. */
.empty-state {
  display: grid;
  gap: 8px;
  min-height: 0;
  place-items: center;
  margin: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  padding: 14px 16px;
  text-align: center;
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.75;
  }
}

.skeleton-block {
  display: block;
  background: var(--surface-raised);
  border-radius: 4px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-circle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.skeleton-bar {
  height: 10px;
}

.skeleton-trader-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}

.skeleton-trader-row:last-child {
  border-bottom: 0;
}

.skeleton-trader-name {
  flex: 1 1 auto;
  width: 50%;
}

.skeleton-trader-count {
  flex: 0 0 auto;
  width: 44px;
}

.skeleton-card {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.skeleton-card:last-child {
  border-bottom: 0;
}

.skeleton-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.skeleton-card-name {
  flex: 0 0 auto;
  width: 90px;
}

.skeleton-card-time {
  flex: 0 0 auto;
  width: 28px;
  margin-left: auto;
}

.skeleton-card-line {
  width: 100%;
  margin-bottom: 8px;
}

.skeleton-card-line-short {
  width: 60%;
  margin-bottom: 0;
}

.skeleton-card-image {
  height: 140px;
  margin: 10px 0;
  border-radius: 8px;
}

.skeleton-card-footer {
  height: 32px;
  margin-top: 10px;
  border-radius: 6px;
}

.empty-state[hidden] {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgb(3 6 12 / 0.6);
  backdrop-filter: blur(2px);
  padding: 10vh 16px 16px;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-dialog {
  width: min(100%, 480px);
  max-height: 78vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
}

@keyframes modal-sheet-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-head h2 {
  font-size: 16px;
}

.modal-meta {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
}

.comment-signed-out {
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  padding: 12px 16px;
  text-align: center;
}

.comment-signed-out[hidden] {
  display: none;
}

/* Shown once the feed has no more pages to load (see loadNewsfeedPage's reachedEnd handling) --
   without it, a feed stretched taller than its own content (min-height matching Top Traders, see
   docs/NEWSFEED.md) just trails off into empty space after the last post with nothing marking
   that as intentional rather than a stalled load. .comment-list's own reached-end class puts the
   matching border-bottom on the last post's own action bar, closing it off the same way every
   other post is closed off by the next post's top border. */
.newsfeed-end-message {
  margin: 0;
  padding: 12px 16px 14px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.newsfeed-end-message[hidden] {
  display: none;
}

.comment-list.reached-end .comment-item:last-child .comment-item-footer {
  border-bottom: 1px solid var(--border);
}

.comment-signed-out a {
  font-weight: 700;
  text-decoration: none;
  color: var(--accent-cyan);
}

.turnstile-wrap {
  min-height: 1px;
}

.turnstile-wrap:empty {
  display: none;
}

.comment-error {
  color: var(--danger);
  font-size: 12px;
}

.reply-thread-list {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

/* Extra horizontal inset beyond .modal-dialog's own 16px padding, specifically for the "No
   replies yet" dashed box -- at the dialog's full content width it read as stretching edge to
   edge with no breathing room of its own. */
.reply-thread-list .empty-state {
  margin-left: 8px;
  margin-right: 8px;
}

.reply-thread-composer-footer .preview-button {
  flex: 0 0 auto;
  width: 88px;
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

.reply-thread-item {
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--border);
}

.reply-thread-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.reply-thread-composer {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.reply-thread-composer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}

.preview-button {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
  color: var(--text-secondary);
  font-weight: 780;
  padding: 0 16px;
  cursor: pointer;
}
.preview-button {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.preview-button:hover,
.preview-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-hover));
  color: var(--text);
  outline: none;
}

.preview-button.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.preview-button.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--text-secondary) 30%, transparent);
  border-top-color: var(--text-secondary);
  border-radius: 50%;
  animation: preview-button-spin 0.6s linear infinite;
}

@keyframes preview-button-spin {
  to {
    transform: rotate(360deg);
  }
}


.preview-button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.field {
  display: grid;
  gap: 6px;
}

.field span:first-child {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}


.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}

.field input {
  height: 38px;
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

.char-counter {
  justify-self: end;
  color: var(--text-muted);
  font-size: 11px;
}


.load-more {
  width: 100%;
  margin-top: 8px;
}

.mobile-dock,
.sidebar-backdrop,
.sheet-close {
  display: none;
}

@media (max-width: 1022px) {
  /* The feed runs edge to edge on a phone: no side padding around it, so every post gets the full width of the screen. */
  .newsfeed-layout {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .detail-terminal.newsfeed-center {
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
  }

  /* Full width, with rounded corners and a little space above, under the two buttons. */
  #newsfeedSection {
    overflow: hidden;
    border-radius: 14px;
  }

  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal-dialog {
    width: 100%;
    max-height: 85vh;
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    animation: modal-sheet-up 0.22s ease-out;
  }

  .comment-list {
    gap: 6px;
    padding: 8px;
    padding-bottom: 0;
  }

  .comment-item {
    width: calc(100% + 16px);
    margin: 0 -8px;
    padding: 8px 18px 0;
  }

  .comment-item-footer {
    width: calc(100% + 36px);
    margin: 0 -18px;
  }

  .comment-item-avatar {
    width: 22px;
    height: 22px;
  }

  .comment-item-body {
    margin-top: 6px;
    margin-left: 0;
    font-size: 13px;
  }

  .comment-item-attachment {
    max-width: 180px;
    max-height: 130px;
    margin-top: 6px;
  }

  .comment-token-card {
    width: calc(100% + 36px);
    margin: 8px -18px 0;
    padding: 8px 18px 0;
  }

  .comment-token-head {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    column-gap: 8px;
  }

  .comment-token-avatar {
    width: 28px;
    height: 28px;
  }

  .comment-token-name {
    font-size: 12px;
  }

  .comment-token-price {
    font-size: 13px;
  }

  .comment-token-stats {
    width: calc(100% + 36px);
    gap: 6px;
    margin: 6px -18px 0;
    padding: 6px 18px 8px;
  }

  .comment-token-stat-label {
    font-size: 10px;
  }

  .comment-token-stat-value {
    font-size: 11px;
  }

  .top-nav {
    min-height: 52px;
    padding: 8px 12px;
  }

  .wallet-button {
    display: none;
  }

  .detail-terminal {
    padding: 10px 10px calc(80px + env(safe-area-inset-bottom));
  }

  /* The menu is a bottom sheet: it slides up from the bottom edge with rounded top corners. */
  .sidebar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    flex: none;
    width: 100%;
    border-top: 1px solid var(--border);
    border-right: 0;
    border-radius: 20px 20px 0 0;
    transform: translateY(102%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .sidebar.collapsed {
    flex: none;
    width: 100%;
  }

  .sidebar.mobile-open {
    transform: translateY(0);
    visibility: visible;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.22s ease;
  }

  .sidebar-inner {
    position: static;
    max-height: 78vh;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar-inner::before,
  .search-dialog::before,
  .wallet-popover::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--border);
  }

  .sidebar-nav {
    padding: 8px 10px 4px;
  }

  .sidebar.collapsed .sidebar-nav a span {
    display: inline;
  }

  .sidebar-footer {
    display: none;
  }

  .sheet-close {
    display: block;
    margin: 4px 10px 12px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .sidebar-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.55);
  }

  /* The dock hides behind every bottom sheet: the menu, search and wallet dialogs, and (newsfeed
     only) whichever side drawer is open -- they share one backdrop, so its hidden state alone
     tells us whether either drawer is open. */
  body.menu-open .mobile-dock,
  body:has(#walletPopoverBackdrop:not([hidden])) .mobile-dock,
  body:has(#searchDialogBackdrop:not([hidden])) .mobile-dock,
  body:has(#postDialogBackdrop:not([hidden])) .mobile-dock,
  body:has(#replyThreadDialogBackdrop:not([hidden])) .mobile-dock,
  body:has(#sideDrawerBackdrop:not([hidden])) .mobile-dock {
    display: none;
  }

  .mobile-dock {
    position: fixed;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 15;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    width: min(calc(100% - 16px), 400px);
    transform: translateX(-50%);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    padding: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
  }

  .dock-item {
    display: flex;
    min-width: 0;
    height: 40px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 0 4px;
    text-decoration: none;
    cursor: pointer;
  }

  .dock-item svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dock-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dock-item[aria-current="page"] {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
  }

  #dockWalletText {
    font-size: 11px;
  }

  .dock-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--avatar-fg);
    font-size: 9px;
    font-weight: 800;
  }

  .dock-avatar[hidden] {
    display: none;
  }

  .dock-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Popups: full-width bottom sheets with rounded top corners, flush with the screen bottom. */
  .search-dialog-backdrop,
  .wallet-popover-backdrop {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .search-dialog,
  .wallet-popover {
    width: 100%;
    max-height: 88vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .search-dialog {
    padding-top: 0;
  }

  .search-dialog::before {
    margin-bottom: 10px;
  }

  .wallet-popover::before {
    margin: -6px auto 0;
  }
}

@media (max-width: 374px) {
  .detail-terminal {
    padding: 10px;
  }

  .brand-name {
    font-size: 14px;
  }
}