/* ─────────────────────────────────────────────────────
   frownspace — mobile overrides
   All rules are inside max-width media queries.
   Desktop (> 640px / 768px) is completely unaffected.
   ───────────────────────────────────────────────────── */

/* ── Global safety net ───────────────────────────────── */
/* Must target BOTH html and body — html is the scroll container,
   so overflow-x on body alone has no effect on viewport scroll */
@media (max-width: 768px) {
  html { overflow-x: hidden !important; max-width: 100vw !important; }
  body { overflow-x: hidden !important; max-width: 100vw !important; }
}

/* ── Navbar (all pages) ──────────────────────────────── */
@media (max-width: 640px) {
  #navbar {
    padding: 0 12px !important;
    position: relative !important; /* anchor for dropdown */
  }
  .nav-search { display: none !important; }
  .nav-logo   { flex-shrink: 0 !important; }
  #nav-user   { flex-shrink: 0 !important; margin-left: auto !important; }

  /* Hide the inline nav-links — replaced by hamburger dropdown */
  #navbar .nav-links { display: none !important; }

  /* Dropdown when open */
  #navbar .nav-links.open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #111 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 300 !important;
    padding: 4px 0 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  #navbar .nav-links.open a {
    display: block !important;
    padding: 11px 20px !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #ccc !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }
  #navbar .nav-links.open a:hover,
  #navbar .nav-links.open a.active { color: #fff !important; }

  /* Hamburger button */
  #nav-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px 8px !important;
    margin-left: 10px !important;
    flex-shrink: 0 !important;
  }
  #nav-hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #ccc !important;
    border-radius: 2px !important;
    transition: transform .2s, opacity .2s !important;
  }
  /* Animate to X when open */
  #nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  #nav-hamburger.open span:nth-child(2) { opacity: 0 !important; }
  #nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
}

/* ── Profile page navbar (widget-based, needs overflow fix) ── */
@media (max-width: 640px) {
  #w-navbar { overflow: visible !important; }
  #w-navbar .widget-inner {
    padding: 0 12px !important;
    position: relative !important;
    overflow: visible !important;
  }
  #w-navbar .widget-inner .nav-links { display: none !important; }
  #w-navbar .widget-inner .nav-links.open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #111 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 9999 !important;
    padding: 4px 0 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  #w-navbar .widget-inner .nav-links.open a {
    display: block !important;
    padding: 11px 20px !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #ccc !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }
  #w-navbar .widget-inner .nav-links.open a:hover,
  #w-navbar .widget-inner .nav-links.open a.active { color: #fff !important; }
}

/* ── Home — chat input iOS zoom fix ─────────────────── */
@media (max-width: 640px) {
  #chat-input { font-size: 16px !important; }
  #chat-msgs  { height: 240px !important; }
}

/* ── Games — hide keyboard-only / non-touch games ────── */
@media (max-width: 640px) {
  .game-card[data-no-mobile] { display: none !important; }
}

/* ── Home — people grid ──────────────────────────────── */
/* home.html's own 640px query explicitly keeps 4 cols; override */
@media (max-width: 640px) {
  .people-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
}

/* ── Tools — card grid ───────────────────────────────── */
@media (max-width: 640px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════
   PROFILE PAGE
   Widgets are position:absolute with inline style="left/top/width".
   In view mode (body:not(.editing)) we stack them into normal flow.
   !important beats both CSS rules and inline style attributes.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Canvas wrapper: flex column so order property works ── */
  body:not(.editing) #canvas {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 8px 24px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* ── Column order: right col (friends/songs/videos) before left col (info/player/comments) ── */
  body:not(.editing) #w-leftcol { order: 10 !important; }

  /* ── Every widget: leave absolute mode, stack in DOM order ── */
  body:not(.editing) .widget {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
  }
  body:not(.editing) .widget-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── Spotlight ── */
  /* position:absolute in CSS, top set by JS — override both */
  body:not(.editing) #spotlight-section {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    border-radius: 0;
  }
  /* Background blur: inset:-30px + scale(1.12) bleeds outside container.
     On mobile clip it flush and remove the scale bleed. */
  body:not(.editing) #spotlight-bg {
    inset: 0 !important;
    transform: none !important;
    filter: blur(12px) brightness(.35) saturate(.6) !important;
  }
  body:not(.editing) #spotlight-content {
    height: auto !important;
    padding: 16px 14px !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  body:not(.editing) #spotlight-art {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    flex-shrink: 0 !important;
  }
  body:not(.editing) #spotlight-info { min-width: 0 !important; }
  body:not(.editing) #spotlight-title {
    font-size: 15px !important;
    -webkit-line-clamp: 2 !important;
  }
  body:not(.editing) #spotlight-msg {
    font-size: 12px !important;
  }
  body:not(.editing) #spotlight-actions {
    margin-top: 10px !important;
    gap: 6px !important;
  }
  body:not(.editing) .spotlight-btn {
    padding: 5px 12px !important;
    font-size: 11px !important;
  }

  /* ── Banner widget ── */
  body:not(.editing) #w-banner .widget-inner {
    flex-wrap: nowrap !important;
    padding: 16px 14px !important;
    gap: 14px !important;
    align-items: flex-start !important;
  }
  .avatar-box { width: 72px !important; height: 72px !important; min-width: 72px !important; font-size: 28px !important; }
  .banner-name { font-size: 17px !important; line-height: 1.3 !important; }
  .banner-info { min-width: 0 !important; flex: 1 !important; }
  .contact-btns { flex-wrap: wrap !important; gap: 6px !important; margin-top: 10px !important; }
  .contact-btns a { padding: 5px 12px !important; font-size: 11px !important; }

  /* ── Songs grid: 4-col → 2-col ── */
  .songs-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Videos grid ──
     Horizontal embeds span 2 cols normally; on mobile force 1 col.
     iframes are absolutely positioned inside aspect-ratio wrappers —
     the wrapper width drives iframe size, so clamp the wrapper. */
  .videos-grid {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  .video-embed-wrap {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Photos: minmax(160px) needs 2×160+gap = 336px min; safe on 375px
     but use auto-fill so it still works at very narrow screens ── */
  .photo-albums-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 10px !important;
  }

  /* ── Friends ── */
  .friend-card { width: 60px !important; }
  /* Always show dot button on touch devices (no hover) */
  .friend-dot-btn { opacity: 0.7 !important; }

  /* ── Info table ── */
  .box-body table { width: 100%; word-break: break-word; }
  .box-body table td { font-size: 12px; padding: 3px 4px; }

  /* ── Navbar widget min-height ── */
  body:not(.editing) #w-navbar .widget-inner {
    min-height: 44px !important;
    padding: 0 12px !important;
  }

  /* ── Comment textarea: prevent iOS zoom ── */
  #comment-textarea { font-size: 16px !important; }

  /* ── Modals: prevent overflow on 375px screen ── */
  .modal-box {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    padding: 18px !important;
  }
  #inbox-modal {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 80vh !important;
  }
  #spotlight-modal {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* ── Forum — topic titles ────────────────────────────── */
@media (max-width: 640px) {
  .topic-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

/* ── Pagination (browse + forum) ─────────────────────── */
@media (max-width: 640px) {
  .pagination { flex-wrap: wrap !important; gap: 4px !important; justify-content: center !important; }
  .page-btn   { min-width: 34px !important; padding: 6px 8px !important; font-size: 12px !important; }
}

/* ── Admin ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .stats-row { grid-template-columns: repeat(3, 1fr) !important; }
  .tabs { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .tab  { flex-shrink: 0; }
  /* Scope table fix to admin only — profile page has tables too */
  #panel table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 400px) {
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Footer (all pages) ─────────────────────────────── */
/* 9 main pages use inline styles — need !important to override */
@media (max-width: 640px) {
  footer {
    margin-top: 40px !important;
    padding: 16px 12px !important;
  }
  footer a {
    margin: 0 6px !important;
  }
}

/* ── DAW (includes Step Sequencer) ──────────────────── */
@media (max-width: 768px) {
  #transport, #top-bar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 46px;
    padding: 6px 10px !important;
    row-gap: 6px;
  }
  #track-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .t-ctrl { width: 200px !important; min-width: 200px !important; }
  .s-btn { height: 38px !important; }
  .t-row { height: 48px !important; }
  #synth-panel   { width: 95vw !important; max-width: 95vw !important; }
  #synth-backdrop { align-items: flex-start; padding-top: 20px; }
}