/* Silo: toolbar chips, tab pill and dropdown parity.
   Loaded last so it wins over the layered design passes in responsive.css.

   One rule: Filter Token, the timeframe, Columns and Filters are the same
   control in four shapes. They share a chip (fill, radius, hover, open state)
   and they all open the same slate menu the More dropdown uses — interactions.js
   routes every one of them through .clone-menu, so the panel material, the
   spring open and the per-item stagger come from a single contract. */

/* ===== toolbar chips ===== */
[data-silo-chip] {
  background: #ededec !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #55606e !important;
  /* neutral grey throughout: the captured hover tokens were bluish slate
     (#ccd5e0) and purple grey (#b4b4bc), which read as a different material */
  transition: background-color .16s ease, color .16s ease !important;
}

button[data-silo-chip]:hover,
div[data-silo-chip]:hover,
[data-silo-trigger]:hover > [data-silo-chip] {
  background: #e2e2e0 !important;
  color: #17181a !important;
}

button[data-silo-chip][data-state="open"],
div[data-silo-chip][data-state="open"],
[data-silo-trigger][data-state="open"] > [data-silo-chip] {
  background: #d9d9d6 !important;
  color: #17181a !important;
}

/* a control holding a filter says so in the accent already used by the badge */
button[data-silo-chip][data-filtered],
div[data-silo-chip][data-filtered],
[data-silo-trigger][data-filtered] > [data-silo-chip] {
  color: #e0447c !important;
}

[data-silo-chip] svg {
  color: currentColor !important;
}

/* chevrons flip while their menu is open — same 200ms on every trigger,
   the More dropdown included */
[aria-expanded] svg[data-sentry-component^="ChevronDownIcon"] {
  transition: rotate .2s cubic-bezier(.34, 1.2, .4, 1);
}

[aria-expanded="true"] svg[data-sentry-component^="ChevronDownIcon"] {
  rotate: 180deg;
}

/* ===== tab pill: same height and radius as the toolbar chips ===== */
[role="tablist"] > div:first-child:not(.silo-tab-thumb),
[role="tablist"][class*="overflow-x-auto"] {
  height: 36px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: #ededec !important;
  box-shadow: none !important;
}

[role="tab"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  transition: background-color .16s ease, color .16s ease !important;
}

[role="tab"]:not([data-state="active"]):hover {
  background: rgba(0, 0, 0, .05) !important;
  color: #17181a !important;
}

/* the sliding glass lens and its pink text mask follow the pill */
.silo-tab-thumb,
.silo-lens-inner,
.silo-lens-rim,
.silo-lens-body {
  border-radius: 999px !important;
}

/* ===== menu parity fixes ===== */
/* the check-only hint hides when a checkbox item is off; a hint carrying a
   value (the Filters menu) stays readable in both states */
.clone-menu .slate-menu-item[role="menuitemcheckbox"]:not([data-checked]) .slate-menu-hint {
  opacity: 1;
}

.clone-menu .slate-menu-item[role="menuitemcheckbox"]:not([data-checked]) .slate-menu-hint:has(.slate-menu-icon) {
  opacity: 0;
}

.clone-menu .slate-menu-hint {
  transition: opacity .15s ease;
}

/* a long menu (Columns) scrolls inside the same panel instead of growing past
   the viewport — short menus are unaffected, so all five stay identical */
.clone-overlay.clone-menu {
  max-height: min(70vh, calc(100vh - 96px)) !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .18) transparent;
}

.clone-overlay.clone-menu::-webkit-scrollbar {
  width: 8px;
}

.clone-overlay.clone-menu::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  background-clip: content-box;
}

/* ===== app shell: the header never moves, only the table scrolls ===== */
/* The capture leaves an empty Jupiter wallet-plugin mount as a second
   full-height block below the app, so <body> is twice the viewport. body is
   overflow:hidden, which hides the scrollbar but does not stop the body being
   scrolled — the wheel chains out of the table at its top edge and drags the
   card title, tabs and toolbar chips off-screen with it. */
#jupiter-plugin-instance {
  height: 0 !important;
  overflow: hidden !important;
}

/* nothing below the markets card adds page height either */
div[class*="justify-center"][class*="md:pb-6"] {
  padding-bottom: 0 !important;
}

/* the app shell is exactly the viewport, so there is nothing left to scroll */
#__next {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* macOS elastic overscroll: flinging up at the top of the list rubber-bands the
   root scroller, which slides the whole shell — title, tabs and toolbar chips —
   even though the page has nothing left to scroll. overscroll-behavior kills the
   bounce in Chrome, Firefox and Safari 16+. If a much older engine ever needs
   it, the structural fallback is body { position: fixed; inset: 0 }. */
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

#__next {
  overscroll-behavior: none;
}

/* the table keeps the scroll; it just does not bounce or chain out of itself */
div[class*="overflow-auto"][class*="max-h-[calc"] {
  overscroll-behavior: none;
}

/* ===== Filter Token: sized to what it says ===== */
/* The capture reserves 266px for a chip holding an icon, two words and a clear
   button, so two thirds of it is empty air. Size it to its content instead,
   and keep the trailing X out of the layout until there is a token to clear —
   at which point it stops being decoration and becomes the way to clear it. */
div[role="button"][data-silo-chip="token"] {
  min-width: 0 !important;
  width: auto !important;
  padding-right: 10px !important;
}

[data-silo-chip="token"] .silo-token-clear {
  display: none !important;
}

[data-silo-chip="token"][data-filtered] {
  padding-right: 4px !important;
}

[data-silo-chip="token"][data-filtered] .silo-token-clear {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: .5;
  transition: opacity .16s ease, background-color .16s ease;
}

[data-silo-chip="token"][data-filtered] .silo-token-clear:hover {
  opacity: 1;
  background: rgba(0, 0, 0, .07);
}

/* ===== Filter Token menu: real token art, sized to the names in it ===== */
/* The shared slate panel is 224px wide, which leaves a gutter of empty air to
   the right of names as short as ETH or UP. This one menu sizes to its
   content, and each row carries the token's own logo (or the table's monogram
   for a token that ships none) instead of a generic glyph. */
.clone-overlay.clone-token-menu {
  width: max-content !important;
  min-width: 164px !important;
  max-width: min(280px, calc(100vw - 16px)) !important;
}

.slate-token-icon {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 50%;
  object-fit: cover;
}

span.slate-token-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cbg, #ededec);
  color: var(--cfg, #55606e);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}