/* ═══════════════════════════════════════════════════════════
   DEXTrack Pro — Mobile Responsive Layer
   Active only at @≤768px (480px refinement)
   Adds: hamburger drawer + bottom nav.
   Desktop is unaffected (all rules guarded by display:none default).
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. HAMBURGER BUTTON ─── */
.mobile-hamburger-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, rgba(255,255,255,0.03));
  border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 8px);
  color: var(--text-main, #e5edf7);
  cursor: pointer;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
}
.mobile-hamburger-btn:hover {
  background: var(--bg-elevated, rgba(255,255,255,0.06));
  border-color: var(--border-medium, rgba(255,255,255,0.15));
}
.mobile-hamburger-btn span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s ease, top 0.25s ease, opacity 0.15s ease;
}
.mobile-hamburger-btn span:nth-child(1) { top: 13px; }
.mobile-hamburger-btn span:nth-child(2) { top: 19px; }
.mobile-hamburger-btn span:nth-child(3) { top: 25px; }
body.mobile-sidebar-open .mobile-hamburger-btn span:nth-child(1) {
  top: 19px; transform: rotate(45deg);
}
body.mobile-sidebar-open .mobile-hamburger-btn span:nth-child(2) {
  opacity: 0;
}
body.mobile-sidebar-open .mobile-hamburger-btn span:nth-child(3) {
  top: 19px; transform: rotate(-45deg);
}

/* ─── 2. SIDEBAR DRAWER (slide-in from left) ─── */
.mobile-sidebar-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg-panel, #0d1420);
  border-right: 1px solid var(--border-soft, rgba(255,255,255,0.06));
  z-index: 9300;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 4px;
  box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  -webkit-overflow-scrolling: touch;
}
body.mobile-sidebar-open .mobile-sidebar-drawer {
  transform: translateX(0);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}
.mobile-drawer-logo-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--purple, #7c3aed), var(--base-blue, #0052ff));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 13px;
  letter-spacing: -0.3px;
}
.mobile-drawer-logo-text {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-main, #e5edf7);
  letter-spacing: -0.2px;
}
.mobile-drawer-section {
  font-size: 10px;
  color: var(--text-dim, #5d6578);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 14px 12px 6px;
  font-weight: 700;
}

.mobile-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm, 8px);
  color: var(--text-muted, #8b98aa);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  min-height: 44px;
  font-family: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.mobile-drawer-item:hover {
  background: var(--bg-hover, rgba(255,255,255,0.03));
  color: var(--text-main, #e5edf7);
}
.mobile-drawer-item.active {
  background: var(--solana-glow, rgba(124,58,237,0.15));
  color: var(--text-main, #e5edf7);
  font-weight: 600;
}
.mobile-drawer-item svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  stroke-width: 1.7;
}

/* ─── 3. BACKDROP OVERLAY ─── */
.mobile-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 9200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body.mobile-sidebar-open .mobile-sidebar-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ─── 4. BOTTOM NAVIGATION ─── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(8, 11, 18, 0.95);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid var(--border-soft, rgba(255,255,255,0.06));
  z-index: 9100;
  margin: 0;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bottom-nav-list {
  display: flex;
  align-items: stretch;
  height: 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted, #8b98aa);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 500;
  padding: 6px 4px;
  min-height: 44px;
  transition: color 0.15s, transform 0.15s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.1px;
}
.mobile-bottom-nav-item svg {
  width: 22px; height: 22px;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.mobile-bottom-nav-item:hover { color: var(--text-main, #e5edf7); }
.mobile-bottom-nav-item:active { transform: scale(0.94); }
.mobile-bottom-nav-item.active {
  color: var(--purple, #7c3aed);
  transform: scale(1.04);
}
.mobile-bottom-nav-item.active svg {
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.45));
}
.mobile-bottom-nav-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1;
}

/* ─── 5. SCROLL LOCK WHEN DRAWER OPEN ─── */
body.mobile-sidebar-open {
  overflow: hidden;
  touch-action: none;
}

/* ═══════════════════════════════════════════════════════════
   ACTIVATION RULES
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .mobile-hamburger-btn { display: inline-flex; }
  .mobile-bottom-nav    { display: block; }

  body { padding-bottom: 64px; }
}

@media (max-width: 480px) {
  .mobile-bottom-nav        { height: 60px; }
  .mobile-bottom-nav-list   { height: 60px; }
  body                      { padding-bottom: 60px; }
  .mobile-bottom-nav-item svg { width: 20px; height: 20px; }
  .mobile-bottom-nav-label    { font-size: 10px; }
  .mobile-sidebar-drawer      { width: 260px; }
}

/* ─── 6. PAGE-SPECIFIC ADJUSTMENTS @≤768px ─── */

@media (max-width: 768px) {
  /* /chat/dashboard/ — page is .page max-width:900px self-contained */
  .page {
    padding: 16px 14px !important;
  }
  .page .header h1 {
    font-size: 18px !important;
  }
  .page .header {
    gap: 8px;
    flex-wrap: wrap;
  }
  /* Tighten credits/stats grids */
  .credits-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .nav-tabs {
    -webkit-overflow-scrolling: touch;
  }
  .nav-tab {
    padding: 9px 12px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 480px) {
  .page {
    padding: 12px 10px !important;
  }
  .credits-row {
    grid-template-columns: 1fr !important;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .credit-value { font-size: 26px !important; }
  .stat-value   { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE: / (homepage) — topbar adjustments
   Added: 2026-05-01 (Phase 2)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Replace dashboard topbar's pre-existing menu button with our mobile hamburger */
  .topbar > .topbar-menu-btn { display: none !important; }

  /* Free space in topbar (these items live in the drawer / bottom-nav) */
  .topbar .live-indicator { display: none; }

  /* Tighter spacing */
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar-actions { gap: 6px; margin-left: auto; }

  /* Search input — slightly tighter */
  .search-bar { max-width: none; min-width: 0; }
  .search-input { font-size: 12.5px; }
}

@media (max-width: 480px) {
  /* On very small screens, drop redundant topbar icons (available in drawer) */
  .topbar .topbar-actions .icon-btn[title="Favorites"],
  .topbar .topbar-actions .icon-btn[title="Notifications"] { display: none; }
  .topbar .user-avatar { display: none; }

  /* Compact chain selector */
  .topbar .chain-selector {
    padding: 0 8px;
    height: 32px;
    font-size: 11.5px;
  }
  .topbar .chain-selector > svg { display: none; }

  /* Search shortcut hint hides on tiny screens */
  .topbar .search-shortcut { display: none; }
  .search-input { padding-right: 12px; height: 34px; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE: /marketplace/ — scoped via body[data-page="marketplace"]
   Added: 2026-05-01 (Phase 3)
   Marketplace has body{overflow:hidden} + .app{height:100vh}
   so generic body{padding-bottom} doesn't apply — we move
   the padding to .main (the actual scroll container).
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Reset generic body rule (marketplace body is overflow:hidden) */
  body[data-page="marketplace"] { padding-bottom: 0 !important; }
  /* Apply space for bottom-nav INSIDE the scrollable .main */
  body[data-page="marketplace"] .main { padding-bottom: 64px; }

  /* Tighten topbar — many items, narrow viewport */
  body[data-page="marketplace"] .topbar { padding: 0 12px; gap: 6px; }
  body[data-page="marketplace"] .tb-links,
  body[data-page="marketplace"] .tb-live { display: none; }
  body[data-page="marketplace"] .topbar-extras .tb-icon-btn { display: none; }

  /* Make tabs horizontally scrollable on mobile */
  body[data-page="marketplace"] .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  body[data-page="marketplace"] .tabs .tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Page padding adjust */
  body[data-page="marketplace"] .page { padding: 16px 14px !important; }
}

@media (max-width: 480px) {
  body[data-page="marketplace"] .main { padding-bottom: 60px; }
  body[data-page="marketplace"] .tb-title { font-size: 12.5px; }

  /* Compact chain selector — keep icon, drop label */
  body[data-page="marketplace"] .tb-chain-sel {
    padding: 4px 8px;
    font-size: 11px;
  }
  body[data-page="marketplace"] .tb-chain-sel > span:not(.ic) { display: none; }
  body[data-page="marketplace"] .tb-chain-sel > svg { display: none; }

  body[data-page="marketplace"] .page { padding: 12px 10px !important; }
  body[data-page="marketplace"] .page-head h1 { font-size: 22px; }
  body[data-page="marketplace"] .page-head p  { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE: /solana/<addr> (token-detail) — scoped via body[data-page="token-detail"]
   Added: 2026-05-01 (Phase 4)
   Toggling between Chart/Info/Swap/Trades via body[data-mobile-tab].
   Chart uses TradingView lightweight-charts with a ResizeObserver,
   so display:none → display:block is safe.
   ═══════════════════════════════════════════════════════════ */

/* Mobile token tabs — hidden by default (desktop) */
.mobile-token-tabs {
  display: none;
  background: var(--bg-panel, #0d1420);
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.06));
  padding: 0;
  margin: 0;
}

.mobile-token-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 7px;
  background: transparent;
  border: none;
  color: var(--text-muted, #8b98aa);
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  min-height: 44px;
  letter-spacing: 0.1px;
}
.mobile-token-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.mobile-token-tab:active { background: rgba(255,255,255,0.04); }
.mobile-token-tab.active {
  color: var(--purple, #7c3aed);
  border-bottom-color: var(--purple, #7c3aed);
}

/* Activation @≤768 */
@media (max-width: 768px) {
  body[data-page="token-detail"] .mobile-token-tabs { display: flex; }

  /* CHART tab: hide trades tabs+table, hide right side */
  body[data-page="token-detail"][data-mobile-tab="chart"]  .tk-tabs,
  body[data-page="token-detail"][data-mobile-tab="chart"]  .tk-table-area,
  body[data-page="token-detail"][data-mobile-tab="chart"]  .tk-right { display: none !important; }

  /* TRADES tab: hide chart, hide right side */
  body[data-page="token-detail"][data-mobile-tab="trades"] .tk-chart-area,
  body[data-page="token-detail"][data-mobile-tab="trades"] .tk-right { display: none !important; }

  /* INFO tab: hide left, hide swap section in right */
  body[data-page="token-detail"][data-mobile-tab="info"]   .tk-left,
  body[data-page="token-detail"][data-mobile-tab="info"]   [data-mobile-section="swap"] { display: none !important; }

  /* SWAP tab: hide left, hide non-swap content in right */
  body[data-page="token-detail"][data-mobile-tab="swap"]   .tk-left,
  body[data-page="token-detail"][data-mobile-tab="swap"]   .tk-profile-banner,
  body[data-page="token-detail"][data-mobile-tab="swap"]   .tk-profile-info,
  body[data-page="token-detail"][data-mobile-tab="swap"]   .tk-right-content > .tk-section:not([data-mobile-section="swap"]) { display: none !important; }

  /* When in chart tab, give it a generous height */
  body[data-page="token-detail"][data-mobile-tab="chart"] .tk-chart-area {
    height: 60vh !important;
    min-height: 380px;
  }

  /* Topbar tightening (same approach as homepage) */
  body[data-page="token-detail"] .topbar > .topbar-menu-btn { display: none !important; }
  body[data-page="token-detail"] .topbar .live-indicator { display: none; }
  body[data-page="token-detail"] .topbar { gap: 8px; padding: 0 12px; }

  /* Token header (tk-header) — tighter on mobile */
  body[data-page="token-detail"] .tk-header { padding: 12px 14px; gap: 10px; }
  body[data-page="token-detail"] .tk-title { font-size: 16px; }
  body[data-page="token-detail"] .tk-title-name { font-size: 12px; }

  /* tk-body becomes column — already in token.html @768. We keep the column. */
  /* tk-tabs (inner): make horizontally scrollable */
  body[data-page="token-detail"] .tk-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  body[data-page="token-detail"] .tk-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  body[data-page="token-detail"] .mobile-token-tab { font-size: 10.5px; padding: 8px 2px 6px; }
  body[data-page="token-detail"] .mobile-token-tab svg { width: 17px; height: 17px; }
  body[data-page="token-detail"] .topbar .topbar-actions .icon-btn[title="Favorites"],
  body[data-page="token-detail"] .topbar .topbar-actions .icon-btn[title="Notifications"] { display: none; }
  body[data-page="token-detail"] .topbar .user-avatar { display: none; }
  body[data-page="token-detail"] .topbar .chain-selector { padding: 0 8px; height: 32px; font-size: 11.5px; }
  body[data-page="token-detail"] .topbar .chain-selector > svg { display: none; }
  body[data-page="token-detail"] .topbar .search-shortcut { display: none; }
  body[data-page="token-detail"][data-mobile-tab="chart"] .tk-chart-area { height: 55vh !important; min-height: 320px; }
}


/* ═══════════════════════════════════════════════════════════
   PHASE 5 (V2 FIXES) — added 2026-05-01
   Idempotency: presence of "PHASE 5 (V2 FIXES)" comment
   ═══════════════════════════════════════════════════════════ */

/* Fix 1: prevent horizontal overflow on every page */
@media (max-width: 768px) {
  body { overflow-x: hidden; }
}

/* Fix 2: chat dashboard — scoped (requires <body data-page="chat-dashboard">) */
@media (max-width: 768px) {
  body[data-page="chat-dashboard"] .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  body[data-page="chat-dashboard"] .header h1 { font-size: 20px !important; }
  body[data-page="chat-dashboard"] .stat-value { font-size: 16px !important; }
  body[data-page="chat-dashboard"] .page { padding: 16px 14px !important; }
}

/* Fix 3: clean topbar across all pages from @≤768 (was @≤480) */
@media (max-width: 768px) {
  .topbar .live-indicator { display: none !important; }
  .topbar .icon-btn[title="Favorites"],
  .topbar .icon-btn[title="Notifications"] { display: none !important; }
  .topbar .user-avatar { display: none !important; }
}

/* Fix 4: token-detail — make mobile-token-tabs sticky below the topbar */
@media (max-width: 768px) {
  body[data-page="token-detail"] .mobile-token-tabs {
    position: sticky;
    top: 56px;          /* dashboard.css --topbar-height */
    z-index: 90;
    background: rgba(13, 20, 32, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}


/* ═══════════════════════════════════════════════════════════
   PHASE 6 (V3) — Sidebar/right-panel cascade fix
   ROOT CAUSE: theme.css imports load sidebar.css/right-panel.css
   AFTER dashboard.css, so their unconditional display:flex wins
   over dashboard.css's @media display:none rules.
   FIX: !important here always wins regardless of source order.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .app > aside.sidebar,
  .app > .sidebar,
  body > .app .sidebar { display: none !important; }

  .app > aside.right-panel,
  .app > .right-panel,
  body > .app .right-panel { display: none !important; }

  .app {
    grid-template-columns: 1fr !important;
    grid-template-areas: "topbar" "main" !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 7 (V3) — Scoped rules for alerts/watchlist/multicharts
   ═══════════════════════════════════════════════════════════ */

/* /alerts/ */
@media (max-width: 480px) {
  body[data-page="alerts"] .alerts-hero { padding: 14px 12px !important; }
  body[data-page="alerts"] .alerts-actions { flex-wrap: wrap; gap: 8px; }
  body[data-page="alerts"] .alerts-stats { grid-template-columns: 1fr 1fr !important; }
}

/* /watchlist/ */
@media (max-width: 768px) {
  body[data-page="watchlist"] .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 480px) {
  body[data-page="watchlist"] .wl-hero { padding: 14px 12px !important; }
  body[data-page="watchlist"] .wl-actions { flex-wrap: wrap; gap: 8px; }
}

/* /multicharts/ */
@media (max-width: 768px) {
  body[data-page="multicharts"] .mc-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 6.1 (V3 hotfix) — Token page grid override
   ROOT CAUSE: Phase 6's .app rule (specificity 0,0,1,0) loses to
   token.html inline body[data-page="token-detail"] .app
   (specificity 0,0,2,1). Result: 240px sidebar column reserved
   but empty (sidebar hidden by display:none) → black screen +
   content squeezed into ~95px on iPhone SE.

   FIX: Higher specificity (html body[data-page="token-detail"])
   forces single-column grid on mobile only.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  html body[data-page="token-detail"] .app {
    grid-template-columns: 1fr !important;
    grid-template-areas: "topbar" "main" !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  html body[data-page="token-detail"] {
    padding-bottom: 64px !important;
  }
}

@media (max-width: 480px) {
  html body[data-page="token-detail"] {
    padding-bottom: 60px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 8.1 (V3.2) — Token UI improvements
   added: 2026-05-01
   
   BUG FIX: Info/Swap tabs were empty on mobile because:
   token.html @1100 hides .tk-right (display:none).
   .tk-right contains the Info section + Swap form.
   Phase 4 toggles .tk-left visibility but never re-shows .tk-right.
   
   UX: Move mobile-token-tabs to bottom (above bottom-nav)
   for better thumb reach on mobile devices.
   ═══════════════════════════════════════════════════════════ */

/* Rule 1: Show .tk-right on Info and Swap tabs (overrides @1100 hide) */
@media (max-width: 768px) {
  body[data-page="token-detail"][data-mobile-tab="info"] .tk-right,
  body[data-page="token-detail"][data-mobile-tab="swap"] .tk-right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-left: none !important;
    border-top: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
  }

  /* INFO tab — hide swap section, show everything else inside .tk-right */
  body[data-page="token-detail"][data-mobile-tab="info"]
    .tk-right [data-mobile-section="swap"] {
    display: none !important;
  }

  /* SWAP tab — show only swap section, hide other info sections */
  body[data-page="token-detail"][data-mobile-tab="swap"]
    .tk-right > .tk-section:not([data-mobile-section="swap"]) {
    display: none !important;
  }
}

/* Rule 2: Move mobile-token-tabs to bottom (above bottom-nav) */
@media (max-width: 768px) {
  body[data-page="token-detail"] .mobile-token-tabs {
    position: fixed !important;
    bottom: 64px !important;       /* قوف bottom-nav */
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;        /* أقل من overlay/drawer (9200/9300) */
    background: rgba(13, 20, 32, 0.95) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: none !important;
  }
}

/* Rule 3: Adjust body padding-bottom to accommodate both bars */
@media (max-width: 768px) {
  html body[data-page="token-detail"] {
    padding-bottom: 114px !important;  /* 64 bottom-nav + 50 token-tabs */
  }
}

@media (max-width: 480px) {
  html body[data-page="token-detail"] {
    padding-bottom: 108px !important;  /* 60 + 48 */
  }
  body[data-page="token-detail"] .mobile-token-tabs {
    bottom: 60px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   PHASE 8.2 (V3.3) — Token page: Home button + hide bottom-nav
   added: 2026-05-01

   User request: On token page only, replace mobile-bottom-nav
   with a single Home button integrated into mobile-token-tabs.
   Result: 5 tabs (Home + Chart + Info + Swap + Trades).
   Frees 64px of viewport space.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Hide global bottom-nav on token page only (HTML stays for consistency) */
  body[data-page="token-detail"] .mobile-bottom-nav {
    display: none !important;
  }

  /* Token-tabs go to viewport bottom now (no bottom-nav above them) */
  body[data-page="token-detail"] .mobile-token-tabs {
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Body padding shrinks (no bottom-nav, only ~50px tabs) */
  html body[data-page="token-detail"] {
    padding-bottom: 50px !important;
  }

  /* Home is an <a> link — neutralize default underline */
  body[data-page="token-detail"] .mobile-token-tabs a.mobile-token-tab {
    text-decoration: none;
  }
}

@media (max-width: 480px) {
  body[data-page="token-detail"] .mobile-token-tabs {
    bottom: 0 !important;
  }
  html body[data-page="token-detail"] {
    padding-bottom: 48px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   PHASE 9 (V3.5) — Rocket boost badges in token lists
   added: 2026-05-01

   Display rocket count badges next to UFO badge.
   Threshold: 10 (regular) / 500 (golden) / 1000 (diamond)
   Position: after UFO badge (last badge before pair name)
   ═══════════════════════════════════════════════════════════ */

.rocket-boost-badge {
  display: inline-block;
  font-size: 10.5px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  vertical-align: middle;
  line-height: 1.4;
  font-weight: 700;
  background: rgba(240, 185, 11, 0.18);
  border: 1px solid rgba(240, 185, 11, 0.45);
  color: #f0b90b;
  cursor: help;
}
.rocket-boost-badge.golden {
  background: linear-gradient(135deg, rgba(240,185,11,0.4), rgba(255,107,43,0.4));
  border-color: rgba(255,215,0,0.6);
  color: #fff;
  box-shadow: 0 0 6px rgba(240,185,11,0.4);
}
.rocket-boost-badge.diamond {
  background: linear-gradient(135deg, rgba(0,240,255,0.3), rgba(124,58,237,0.4));
  border-color: rgba(124,58,237,0.6);
  color: #fff;
  box-shadow: 0 0 8px rgba(124,58,237,0.5);
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 12 (V3.6) — Pill Premium for token detail rkSection
   Idempotency: presence of "PHASE_12_PILL_PREMIUM" comment
   Scope: only #rkSection.varB-section (no impact elsewhere)
   ═══════════════════════════════════════════════════════════════ */
/* PHASE_12_PILL_PREMIUM */
.varB-section .tk-rocket {
  border: 1px solid rgba(240,185,11,0.30);
  animation: borderGlowSlow 3s ease-in-out infinite;
}
.varB-section .tk-section-title { color: #f0b90b; }
.varB-rocket-icon {
  display: inline-block;
  animation: rocketBob 2s ease-in-out infinite;
}
.var-b-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 10px;
  font-family: 'JetBrains Mono', monospace; font-weight: 800;
  font-size: 14px; line-height: 1;
  background: rgba(240,185,11,0.18);
  border: 1px solid rgba(240,185,11,0.45);
  color: #f0b90b;
}
.var-b-pill.golden {
  background: linear-gradient(135deg, rgba(240,185,11,0.4), rgba(255,107,43,0.4));
  border-color: rgba(255,215,0,0.6); color: #fff;
  box-shadow: 0 0 10px rgba(240,185,11,0.45);
}
.var-b-pill.diamond {
  background: linear-gradient(135deg, rgba(0,240,255,0.3), rgba(124,58,237,0.4));
  border-color: rgba(124,58,237,0.6); color: #fff;
  box-shadow: 0 0 12px rgba(124,58,237,0.55);
}
.varB-section .tk-rocket-pack {
  border-color: rgba(240,185,11,0.22);
  transition: all 0.18s ease-out;
}
.varB-section .tk-rocket-pack:hover {
  transform: translateY(-2px);
  border-color: rgba(240,185,11,0.6);
  box-shadow: 0 6px 14px rgba(240,185,11,0.25);
}
.varB-section .tk-rocket-pack.active {
  border-color: #f0b90b;
  background: linear-gradient(180deg, rgba(240,185,11,0.18), rgba(240,185,11,0.05));
  box-shadow: 0 0 0 3px rgba(240,185,11,0.18), 0 4px 12px rgba(240,185,11,0.3);
}
.varB-section .tk-rocket-buy {
  background: linear-gradient(90deg, #f0b90b 0%, #ffd86b 25%, #ff8a3d 50%, #ffd86b 75%, #f0b90b 100%);
  background-size: 250% 100%;
  animation: shimmer 4s linear infinite;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, opacity 0.18s ease-out;
}
.varB-section .tk-rocket-buy:hover {
  opacity: 1;
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(240,185,11,0.5);
}
@keyframes borderGlowSlow {
  0%, 100% { border-color: rgba(240,185,11,0.30); }
  50%      { border-color: rgba(240,185,11,0.60); }
}
@keyframes rocketBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-6deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .varB-section .tk-rocket,
  .varB-rocket-icon,
  .varB-section .tk-rocket-buy {
    animation: none !important;
  }
}