/*
 * web.css — Responsive web overrides for perpdexwars.com
 *
 * HOW TO USE:
 *   Add AFTER style.css in index.html:
 *   <link rel="stylesheet" href="web.css">
 *
 * This file ONLY overrides what needs to change for the web/mobile context.
 * style.css stays untouched — all your existing rules still apply.
 *
 * Breakpoints used:
 *   Mobile  : < 480px   (phones, narrow)
 *   Tablet  : 480–768px (wide phones, small tablets)
 *   Desktop : > 768px   (laptops, monitors)
 */


/* ═══════════════════════════════════════════════════════════════
   1. CONTAINER — unlock the fixed width, make it fluid
   ═══════════════════════════════════════════════════════════════ */

/* Body: remove the sidebar's 450px floor, allow the page to breathe */
body {
  min-width: 0;
  overflow-x: hidden; /* prevent horizontal scroll */
  overflow-y: auto;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
}

/* .ext: was a fixed iframe sidebar. Now it's a centered web column. */
.ext {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Kill the sidebar's overflow:hidden so content flows normally */
#mainContent {
  overflow: visible;
  overflow-x: hidden; /* never let content sections bleed right */
  flex: none;
  max-width: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   2. HEADER — remove extension-only controls, fix crowding
   ═══════════════════════════════════════════════════════════════ */

/* Close button (✕) has no meaning on a website — hide it */
.close-btn {
  display: none !important;
}

/* Header wraps gracefully if tabs ever get too wide on tiny screens */
.ext-hdr {
  flex-wrap: wrap;
  padding: 10px 16px;
  gap: 8px;
}

/* Nav tabs: slightly more breathing room on web */
.nav-tabs {
  gap: 4px;
}

.ntab {
  padding: 5px 10px;
  font-size: 12px;
}

/* Settings panel: position relative to header, not the iframe */
.settings-panel {
  position: fixed; /* stays on screen even when scrolled */
  top: 56px;
  right: 16px;
  left: auto;
  width: 240px;
  z-index: 9998;
}


/* ═══════════════════════════════════════════════════════════════
   3. SECTION PADDING — comfortable on all screen sizes
   ═══════════════════════════════════════════════════════════════ */

/* Most section bodies have 14px padding — keep it but make it
   slightly more generous so it doesn't feel cramped on a wide screen */
.sec-h {
  padding: 12px 16px 7px;
}

.oi-body,
.fr-list,
.liq-rects,
.liq-split,
.tabs-sm,
.mirror-chart,
.liq-legend,
.vol-bars,
.vol-ex,
.news-filter,
.news-list,
.mkt-oi-body,
#hmBands {
  padding-left: 16px;
  padding-right: 16px;
}

.price-bar {
  padding: 10px 16px;
}


/* ═══════════════════════════════════════════════════════════════
   4. HEATMAP POPUP (fullscreen) — take over the full viewport
   ═══════════════════════════════════════════════════════════════ */

/* Already uses position:fixed inset:0 — works fine on web.
   Just ensure it clears the header and isn't cut off. */
.hm-popup {
  padding: 12px;
}

.hm-popup-inner {
  max-width: 800px;
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   5. INTERPRET (MSR) POPUP — full-width overlay on web
   ═══════════════════════════════════════════════════════════════ */

/*
 * In the extension the popup sits inside the iframe with
 * position:absolute, 12px insets, top:57px.
 * On the web page we use position:fixed so it stays visible
 * while the user scrolls, and fills the width of the content column.
 */
.itp-popup {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(652px, calc(100vw - 32px)); /* matches .ext max-width minus margins */
  top: 57px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  border-radius: 0 0 10px 10px;
}

/* Scrollbar inside the popup on overflow */
.itp-popup::-webkit-scrollbar { width: 4px; }
.itp-popup::-webkit-scrollbar-thumb { background: #1e2330; border-radius: 2px; }


/* ═══════════════════════════════════════════════════════════════
   6. TOUCH TARGETS — 44px minimum for phone usability
   ═══════════════════════════════════════════════════════════════ */

/*
 * Buttons that are visually small (icon size 22–26px) need
 * invisible hit-area padding so thumbs can tap them reliably.
 * We expand the clickable area without changing the visual size.
 */
.iBtn {
  width: 36px;
  height: 36px;
}

.sec-toggle {
  padding: 8px; /* expands tap area around the ▾ arrow */
}

/* Nav tabs: already ~30px tall, push to 36px for thumbs */
.ntab {
  padding: 6px 10px;
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* Timeframe tabs */
.tsm {
  padding: 5px 10px;
  min-height: 32px;
}

.stab {
  padding: 4px 8px;
  min-height: 32px;
}

/* MSR row: already 36px min-height — fine */

/* Section collapse header: needs a bigger tap zone */
.sec-h[data-sec] {
  min-height: 44px;
}


/* ═══════════════════════════════════════════════════════════════
   7. HOVER → TAP: tooltip/interactive fallbacks for touch screens
   ═══════════════════════════════════════════════════════════════ */

/*
 * On touch devices there is no "hover". Two patterns here:
 *
 * a) The ↗ icon on exchange links is hover-only. On touch we make
 *    it faintly visible at rest so it's discoverable.
 *
 * b) Volume bar and heatmap tooltips fire on mousemove which touch
 *    doesn't generate. Those need JS changes (see bridge.js notes).
 *    Here we just ensure they don't get stuck visible on touch.
 */

@media (hover: none) {
  /* Make exchange link icon slightly visible at rest on touch */
  .ex-ref-icon {
    opacity: 0.35;
  }

  /* Prevent hover-stuck states on bars */
  .vbw:hover .vb {
    filter: none;
  }

  .mc-col:hover {
    background: transparent;
  }

  .lrect:hover {
    background: #111420;
    border-color: rgba(148,163,184,0.10);
  }

  /* Volume tooltip: hide it on touch (can't hover to dismiss) */
  .vb-tip {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   8. MOBILE — narrow phones (< 480px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 479px) {

  /* --- Prevent horizontal overflow on all sections ----------- */
  .sec, .sec-body, .sec-h, .panel, .price-bar,
  .mgrid, .mirror-chart, .vol-bars, .vol-ex,
  .fr-list, .fr-map, .oi-body, .news-filter, .news-list,
  .liq-rects, .liq-split, .tabs-sm, .liq-legend,
  .mkt-oi-body, #hmBands {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* --- Header ------------------------------------------------ */

  .ext-hdr {
    padding: 8px 12px;
    gap: 6px;
  }

  .logo-name {
    font-size: 13px;
  }

  .nav-tabs {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 3px;
  }

  .ntab {
    font-size: 12px;
    padding: 6px 10px;
    flex: 1;
    justify-content: center;
    min-height: 38px;
  }

  .iBtn {
    margin-left: auto;
    width: 38px;
    height: 38px;
  }
  .iBtn + .iBtn {
    margin-left: 0;
  }

  /* --- Section padding --------------------------------------- */

  .sec-h,
  .oi-body,
  .fr-list,
  .liq-rects,
  .liq-split,
  .tabs-sm,
  .mirror-chart,
  .liq-legend,
  .vol-bars,
  .vol-ex,
  .news-filter,
  .news-list,
  .mkt-oi-body,
  #hmBands {
    padding-left: 12px;
    padding-right: 12px;
  }

  .price-bar {
    padding: 8px 12px;
  }

  /* --- Section collapse toggle: bigger tap area -------------- */
  .sec-toggle {
    font-size: 16px;
    padding: 10px 6px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sec-h[data-sec] {
    min-height: 48px;
  }

  /* --- Timeframe tabs: bigger and more tappable -------------- */
  .tsm {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 34px;
    display: flex;
    align-items: center;
  }

  .stab {
    font-size: 12px;
    padding: 5px 9px;
    min-height: 34px;
    display: flex;
    align-items: center;
  }

  /* --- Price bar -------------------------------------------- */
  .pv { font-size: 17px; }

  /* --- Metrics grid ----------------------------------------- */
  .mcell { padding: 8px 10px; }
  .mval  { font-size: 13px; }

  /* --- Liquidations rects: 2×2 on narrow phones ------------- */
  .liq-rects {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  /* --- OI table: tighter columns ---------------------------- */
  .oi-tbl-row {
    grid-template-columns: 1fr 76px 52px 52px;
    gap: 0 4px;
  }

  /* --- Volume exchange table: equal cols filling full width ---- */
  .vex-row {
    grid-template-columns: repeat(5, 1fr);
    gap: 0 2px;
    font-size: 10.5px;
  }

  .vex-row > *:nth-child(5) {
    display: block;
  }

  .vex-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Funding rate: exchange name narrower ----------------- */
  .fr-ex {
    width: 72px;
    font-size: 11px;
  }

  /* --- Funding history chart: clamp to screen width --------- */
  .mirror-chart {
    padding-left: 0;
    padding-right: 0;
  }

  /* --- Heatmap bands: tighter grid -------------------------- */
  .hm-band-row {
    grid-template-columns: 8px 72px 36px 1fr 52px;
    gap: 4px;
    font-size: 10px;
  }

  /* --- Heatmap expand button: ensure it's never cut off ------- */
  .hm-expand-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
  }

  /* Heatmap section header: prevent overflow hiding button ------ */
  .sec.sec-heatmap .sec-h {
    flex-wrap: nowrap;
    overflow: visible;
  }

  .sec-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sec-tabs::-webkit-scrollbar { display: none; }

  /* --- Heatmap fullscreen popup: rotate to landscape ----------- */
  .hm-popup {
    transform: rotate(90deg);
    transform-origin: center center;
    width: 100vh !important;
    height: 100vw !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin-left: -50vh;
    margin-top: -50vw;
    padding: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .hm-popup-inner {
    max-width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #hmCanvasPopup {
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: 0 !important;
  }

  /* --- ITP row grid ----------------------------------------- */
  .itp-row-content {
    grid-template-columns: 120px 1fr 58px 52px;
  }

  /* --- ITP band grid ---------------------------------------- */
  .itp-band {
    grid-template-columns: 78px 32px 1fr 54px 38px;
    font-size: 10px;
    gap: 4px;
  }

  /* --- ITP popup: flush to screen edges --------------------- */
  .itp-popup {
    width: 100vw;
    left: 0;
    transform: none;
    border-radius: 0 0 8px 8px;
  }

  /* --- Settings panel: full-width on tiny screens ----------- */
  .settings-panel {
    left: 12px;
    right: 12px;
    width: auto;
  }

  /* --- MSR trigger text ------------------------------------- */
  .msr-trigger {
    font-size: 11px;
  }

  /* --- Dominance line chart --------------------------------- */
  #domLineCanvas {
    height: 130px;
  }

  /* --- News filter ------------------------------------------ */
  .news-filter {
    gap: 8px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   9. TABLET — 480–768px (large phones, small tablets)
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 480px) and (max-width: 767px) {

  .ntab {
    padding: 5px 10px;
  }

  /* OI table: full 4-column stays */
  .oi-tbl-row {
    grid-template-columns: 1fr 86px 60px 60px;
  }

  /* Volume exchange table: full columns stay */
  .vex-row {
    grid-template-columns: 1fr 70px 54px 54px 54px;
  }

  /* Liq rects: all 4 in one row, can stay */
  .liq-rects {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ═══════════════════════════════════════════════════════════════
   10. DESKTOP — 769px and above
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {

  /* Give the content column a little more room on wide screens */
  .ext {
    max-width: 700px;
  }

  /* Restore hover for exchange links (desktop has a pointer) */
  .ex-ref-icon {
    opacity: 0; /* hidden at rest, shown on hover — same as original */
  }

  /* Settings panel: anchored to right side of content column */
  .settings-panel {
    right: calc(50% - 350px + 8px);
  }

  /* ITP popup: anchored to content column */
  .itp-popup {
    width: min(668px, calc(100vw - 32px));
    left: 50%;
    transform: translateX(-50%);
  }

  /* ── PINNED RIGHT SIDEBAR (desktop only) ─────────────────────
     Restores the extension's native scroll model and pins the
     panel to the right edge. Left side stays empty for now.
     Placed last in this media query so it overrides the
     centered-column rules above. Mobile is unaffected. */

  .ext {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 450px;
    max-width: 450px;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    border-left: 1px solid rgba(148,163,184,0.12);
    z-index: 10;
  }

  /* Header stays pinned to the top while the sidebar scrolls */
  .ext-hdr {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* Keep #mainContent NON-scrolling — same as the working web version.
     This leaves app.js's dual-scroll (news pinning) inert, so it can't
     hijack the wheel. The scroll lives on .ext, not here. */
  #mainContent {
    flex: none;
    overflow: visible;
  }

  /* Empty left area: white. Also unclip html+body so the fixed
     sidebar can scroll — style.css sets overflow:hidden on both. */
  html,
  body {
    background: #ffffff;
    overflow: visible !important;
    height: auto !important;
    min-height: 100% !important;
  }

  /* MSR popup: anchor over the right column instead of centered */
  .itp-popup {
    left: auto;
    right: 0;
    transform: none;
    width: 450px;
    max-width: 450px;
  }

  /* Settings panel: top-right of the sidebar */
  .settings-panel {
    right: 16px;
    left: auto;
  }

  /* Heatmap popup: restore full-viewport coverage (was accidentally
     restricted to 450px). position:fixed inset:0 from style.css is correct. */
  .hm-popup {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    top: 0 !important;
    bottom: 0 !important;
  }

  /* Share overlay: style.css uses position:absolute which is now trapped
     inside .ext (450px). Switch to fixed so it covers the full viewport. */
  .share-overlay {
    position: fixed !important;
    inset: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   11. REDUCED MOTION — respect OS accessibility setting
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .itp-loading-dot,
  .msr-pulse,
  .iBtn.spinning svg {
    animation: none !important;
  }

  .itp-loading-dot {
    opacity: 0.7;
  }

  .msr-pulse {
    opacity: 0.5;
  }

  /* Disable all CSS transitions */
  * {
    transition-duration: 0.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   12. SHARE CARD overlay — web-friendly sizing
   ═══════════════════════════════════════════════════════════════ */

/*
 * The share overlay (.sov-*) uses position:fixed already — fine on web.
 * On mobile we just ensure it doesn't overflow horizontally.
 */
.sov-wrap {
  padding: 12px;
}

@media (max-width: 479px) {
  .sov-inner {
    padding: 12px;
    gap: 10px;
  }

  .sov-actions {
    flex-direction: column;
  }

  .sov-action-btn {
    width: 100%;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════
   13. EXTENSION-ONLY ELEMENTS — hide on web
   ═══════════════════════════════════════════════════════════════ */

/*
 * The tip banner (.tip-banner from inject.js) is extension-only.
 * If any injection artifacts appear, hide them cleanly.
 */
.tip-banner,
.tip-progress,
#ext-tip {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   NOTES FOR bridge.js (the JS counterpart to this file)
   ═══════════════════════════════════════════════════════════════

   These CSS changes work without any JS changes:
   ✓ Container sizing and centering
   ✓ Header layout and close-button removal
   ✓ Touch target sizes
   ✓ Popup positioning
   ✓ All breakpoint layouts
   ✓ Reduced motion

   These CSS changes need matching JS changes in bridge.js:
   → Canvas redraw on resize: window 'resize' + screen 'orientationchange'
     events should call drawHeatmap() and redrawDomCanvas() so canvases
     don't appear stretched after rotating the phone.
   → Heatmap tooltip on touch: the tooltip listens to 'mousemove'.
     Add a 'touchstart' handler on #hmCanvas that reads touch.clientX/Y
     and calls the same tooltip logic.
   → Volume bar tooltip (.vb-tip) listens to 'mouseenter'/'mouseleave'.
     Add 'touchstart' to show it and 'touchend' to hide it after 1.5s.
   → chrome.storage → localStorage: when you write bridge.js,
     stub chrome.storage.local.get/set with localStorage equivalents.
   → chrome.runtime.sendMessage → direct fetch():
     replace each message type with a direct API call to
     https://perpdexwars.com/api/...

   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   SCROLL OVERRIDE — added last so it wins over everything above.
   Uses div.ext (higher specificity than .ext) to beat style.css.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  div.ext {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
  }

  html, body {
    overflow: visible !important;
    height: auto !important;
  }
}