/* Hero, narrow desktop (1025-1280px) and tablet (<=1024px) layouts.
 *
 * Layer 11 of the stylesheet. ORDER IS SIGNIFICANT: this file's rules
 * are overridden by every later layer and override every earlier one, exactly as
 * when they were one file. See docs/frontend-architecture.md. */

@media (max-width: 600px) {
  .tooltip-text {
    width: 160px;
    font-size: 11px;
  }
}

/* My Coins mobile layout */
@media (max-width: 600px) {
  #myCoins .coin-card {
    grid-template-columns: 32px 1fr auto 28px !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  
  #myCoins .coin-card > div:nth-child(3) {
    display: none; /* Hide signal pill column on mobile */
  }

  /* Grid children also default to min-width:auto. The name/price column could
     not shrink below "$1,944.07", so the four columns needed 238px inside a
     224px card and the row hung off the side of the page at 320px. */
  #myCoins .coin-card > div {
    min-width: 0;
  }
}

/* CLEAN HERO STYLES */
#topSignalHero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 26px;
  padding: 30px;
  min-height: 320px;
  border-radius: 22px;
  border: 1px solid rgba(0,255,153,.45);
  background:
    radial-gradient(circle at 10% 20%, rgba(0,255,153,.20), transparent 30%),
    radial-gradient(circle at 85% 50%, rgba(0,255,153,.10), transparent 32%),
    linear-gradient(180deg, #101922 0%, #071017 100%);
  box-shadow:
    0 0 50px rgba(0,255,153,.15),
    0 24px 70px rgba(0,0,0,.55);
  animation: heroGlow 4s ease-in-out infinite alternate;
  margin-bottom: 10px;
}

#topSignalHero > .hero-copy {
  grid-column: 1;
}

#topSignalHero > .hero-chart-box {
  grid-column: 2;
}

#topSignalHero > .hero-verdict {
  grid-column: 1 / -1;
}
/* NARROW DESKTOP — 1025-1280px: slim the fixed side columns so the main
   column keeps usable width instead of being squeezed by 230px + 380px */
@media (max-width: 1280px) and (min-width: 1025px) {
  .app-shell {
    grid-template-columns: 200px minmax(0, 1fr) 320px;
    gap: 18px;
    padding: 18px;
  }

  /* 07-panels.css pins .right-panel to min-width:340px, which contradicts the
     320px column above — the panel stayed 340px wide and hung 2px off the page,
     making the whole thing scroll sideways. This layer is later, so it wins
     without needing !important. */
  .right-panel {
    min-width: 0;
  }

  #topSignalHero {
    grid-template-columns: 1fr;
  }

  #topSignalHero > .hero-chart-box {
    grid-column: 1;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 20px;
    margin-top: 10px;
  }
}

/* TABLET — 1024px and below (stacked layout; nav lives in the bottom bar) */
@media (max-width: 1024px) {
.app-shell {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  /* The sidebar block was eating the top of the page on mobile (tester
     report); nav is the bottom bar plus the ☰ sheet behind "More". */
  .sidebar {
    display: none !important;
  }

  /* ── Bottom navbar (tester 4 item 5) ──────────────────────────────────
     Three fixed bars share the bottom edge, so they stack explicitly:
     navbar owns bottom:0 and the safe-area inset, the disclaimer sits on
     top of it, and body padding clears both. The floating ☰ button is
     retired here — "More" opens the same sheet, and the button collided
     with focus mode's floating Exit anyway. */
  #mobileBottomNav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 420;
    background: rgba(7,16,23,.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.08);
    padding-bottom: env(safe-area-inset-bottom);
  }

  #mobileBottomNav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 2px 8px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #8e9aa5 !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    min-height: 56px;
  }
  /* The global button:hover lift is !important and makes a docked bar wobble */
  #mobileBottomNav button:hover { transform: none !important; }
  #mobileBottomNav button svg,
  #mobileBottomNav button i { width: 20px; height: 20px; }
  #mobileBottomNav button.active { color: #00ff99 !important; }
  #mobileBottomNav button.active svg { stroke-width: 2.4; }

  /* Search is the centre action and deliberately raised — Ryan's call, backed
     by Ask AI being the return-visit driver: search is the fastest route to a
     coin's details, where Ask AI lives. */
  .search-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -16px;
    border-radius: 50%;
    background: #00ff99;
    color: #050b10;
    box-shadow: 0 4px 14px rgba(0,255,153,.45);
  }
  .search-fab svg { width: 20px; height: 20px; stroke-width: 2.6; }
  #bottomNavSearch { color: #00ff99 !important; }

  /* Alerts moved behind "More" when search took its slot — the dot keeps the
     unread signal visible so nothing is lost by the move. */
  #mobileBottomNav button { position: relative; }
  .nav-dot {
    position: absolute;
    top: 8px;
    right: calc(50% - 16px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff99;
    box-shadow: 0 0 6px rgba(0,255,153,.8);
  }

  /* The disclaimer/body offsets that pair with this navbar CANNOT live here:
     .fp-disclaimer-bar and body are both re-declared later in this stylesheet,
     and a media query adds no specificity — the later rule just wins. They sit
     immediately after that base definition instead. */

  .right-panel {
    position: static !important;
    min-height: auto !important;
    width: 100% !important;
    min-width: auto !important;
  }
  
  #topSignalHero {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }
  
  #topSignalHero > .hero-chart-box {
    grid-column: 1 !important;
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 20px;
    margin-top: 10px;
  }
  
  .hero-copy {
    grid-template-columns: 100px 1fr !important;
    gap: 16px !important;
  }
  
.hero-coin-logo {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }
  
  .hero-name {
    font-size: 36px !important;
  }
  
  .hero-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .market-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}