/* ============================================================
   TOKEN SELECT PANEL — COMPLETE
   Every line related to the token select modal functionality
   Extracted from claude-style.css
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   TOKEN SELECT PANEL — Claude-style theme overrides
   Applies Claude typography, radius, shadows & color tokens to
   #tok-modal (Select Token sheet)
═══════════════════════════════════════════════════════════════ */

/* ── Overlay container ── */
/* [migrated to overlay.css] */

/* [migrated to overlay.css] */


/* Sidebar expanded/collapsed adjustments */
/* [migrated to overlay.css] */

/* [migrated to overlay.css] */


/* ── Panel container ── */
/* [panel CSS migrated to overlay.css] */


/* ── Panel bar (hidden) ── */
/* [panel CSS migrated to overlay.css] */


/* ── Panel head ── */
/* [panel CSS migrated to overlay.css] */


/* ── Panel title ── */
/* [panel CSS migrated to overlay.css] */


/* ── Panel close button ── */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */


/* ── Search row — input + back button side by side ── */
#tok-modal .tok-search-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  margin: var(--space-5) var(--space-4) var(--space-2) !important;
}
/* [panel CSS migrated to overlay.css] */


/* ── Search input ── */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */


/* Back button sits beside the search bar */
/* [panel CSS migrated to overlay.css] */


/* ── Chips row (ETH / WETH / USDC quick filters) ── */
#tok-modal .tok-chips {
  padding: 0 var(--space-4) var(--space-2) !important;
  gap: var(--space-2) !important;
}

#tok-modal .tok-chip {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  border-radius: var(--radius-full) !important;
  border: var(--border-subtle) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text, #e8e8f0) !important;
  border: 1px solid var(--bb-border)!important;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out) !important;
}

#tok-modal .tok-chip:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--border-default) !important;
  border: 1px solid var(--bb-border)!important;
}

#tok-modal .tok-chip.on,
#tok-modal .tok-chip.active {
  border-color: var(--bb-border) !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid var(--bb-border)!important;
}

/* ── Fetch status line ── */
#tok-modal .fetch-st {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  color: var(--muted2) !important;
  padding: 0 var(--space-4) var(--space-1) !important;
}

/* ── Token list ── */
#tok-modal .sdx-tok-list {
  padding: var(--space-1) 0 var(--space-3) !important;
}

#tok-modal .sdx-tok-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1) !important;
  border-radius: var(--radius-full) !important;
}

/* ── Token rows ── */
#tok-modal .tok-row {
  display: grid !important;
  grid-template-columns: 36px 1fr auto !important;
  grid-template-rows: auto auto auto !important;
  column-gap: var(--space-3) !important;
  row-gap: 4px !important;
  align-items: center !important;
  padding: var(--space-3) var(--space-4) !important;
  font-family: var(--ff-base) !important;
  border-radius: 0 !important;
  border-bottom: var(--border-subtle) !important;
  transition: background var(--duration-fast) var(--ease-out) !important;
  cursor: pointer;
}

#tok-modal .tok-row:last-child {
  border-bottom: none !important;
}

#tok-modal .tok-row:hover {
  background: rgba(255,255,255,0.04) !important;
}

#tok-modal .tok-row.sel::before {
  background: var(--sky, var(--text-sky)) !important;
}

/* Plain text — no border/background on contract address & volume */
#tok-modal .t-addr-pill {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

#tok-modal .t-vol-chip {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Larger buy/sell text */
#tok-modal .t-row3-stats .t-stat-val,
#tok-modal .t-row3-stats .t-stat-lbl {
  font-size: var(--fs-sm) !important;
}

/* ── Token avatar — row1, column 1 ── */
#tok-modal .t-av {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-full) !important;
  background: rgba(255,255,255,0.06) !important;
  border: var(--border-subtle) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-base) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--muted) !important;
  flex-shrink: 0;
  overflow: hidden;
}

#tok-modal .t-av img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius-full) !important;
}

/* ── Row 1, column 2: symbol + full token name ── */
#tok-modal .t-row1 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

#tok-modal .t-sym {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-tight) !important;
  color: var(--text-normal-tier) !important;
  flex-shrink: 0 !important;
}

#tok-modal .t-native-tag,
#tok-modal .t-cust-tag {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wide) !important;
  border-radius: var(--radius-xs) !important;
  border: var(--border-subtle) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--muted) !important;
  padding: 1px 6px !important;
  flex-shrink: 0 !important;
}

#tok-modal .t-nm {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-normal) !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 160px !important;
}

/* ── Row 1, column 3: price ── */
#tok-modal .t-usd {
  grid-column: 3 !important;
  grid-row: 1 !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--muted2) !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* ── Row 2: holders + address, full width ── */
#tok-modal .t-row2 {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-2) !important;
}

#tok-modal .t-stats {
  font-family: var(--ff-base) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#tok-modal .t-stat-val {
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
}

#tok-modal .t-stat-lbl {
  font-size: var(--fs-xs) !important;
  color: var(--muted2) !important;
}

/* Address pill — row2, right side */
#tok-modal .t-addr-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-xs) !important;
  background: rgba(255,255,255,0.04) !important;
  border: var(--border-subtle) !important;
  padding: 1px 6px !important;
}

#tok-modal .t-addr-txt {
  font-family: var(--ff-mono) !important;
  font-size: var(--fs-xs) !important;
  color: var(--muted2) !important;
}

#tok-modal .t-copy-btn {
  color: var(--muted2) !important;
  transition: color var(--duration-fast) var(--ease-out) !important;
}

#tok-modal .t-copy-btn:hover {
  color: var(--text, #e8e8f0) !important;
}

/* ── Row 3: buy/sell + volume, full width ── */
#tok-modal .t-row3 {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-2) !important;
}

#tok-modal .t-row3-stats {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Volume chip — row3, right side */
#tok-modal .t-vol-chip {
  display: inline-block;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--radius-xs) !important;
  border: var(--border-subtle) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--muted) !important;
  padding: 1px 6px !important;
}

/* ── Selection checkmark — top right corner, row1 col3 ── */
#tok-modal .tok-row > svg {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
  margin-left: 0 !important;
}

#tok-modal .tok-row.sel .t-usd {
  padding-right: 22px !important;
}

/* ── Balance display removed from layout (no longer used) ── */
#tok-modal .t-bal {
  display: none !important;
}

/* ── Footer removed from layout ── */
/* [panel CSS migrated to overlay.css] */


/* ═══════════════════════════════════════════════════════════════════════
   TOKEN SELECT PANEL — LIGHT MODE
   ═══════════════════════════════════════════════════════════════════════ */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */