/* ============================================================
   NEXORA · Mobile Shared (0–767px)
   Phone-first: bottom dock, single column, full-bleed cards,
   safe-area, 44px tap targets, reduced motion friendly.
   Loaded only on mobile via device.js / media="max-width:767px"
   ============================================================ */

/* Safe-area for notched phones */
:root {
  --mobile-pad: max(0.85rem, env(safe-area-inset-left));
  --mobile-pad-right: max(0.85rem, env(safe-area-inset-right));
  --mobile-bottom: max(0.85rem, env(safe-area-inset-bottom));
}

/* App shell becomes bottom bar — no sidebar rail */
@media (max-width: 767px) {
  html {
    scrollbar-gutter: auto;
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Zero the sidebar slot so calcs don't leave phantom offset */
  :root {
    --sb-slot: 0px;
    --sb-w: 0px;
  }

  /* Content fills viewport, symmetric safe margins, no right clipping */
  .app-content {
    margin-left: var(--mobile-pad) !important;
    margin-right: var(--mobile-pad-right) !important;
    margin-bottom: calc(70px + var(--mobile-bottom) + var(--tb-top)) !important;
    max-width: calc(100vw - (var(--mobile-pad) + var(--mobile-pad-right))) !important;
    width: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  #app-topdock {
    left: var(--mobile-pad) !important;
    right: var(--mobile-pad-right) !important;
    max-width: none !important;
  }

  /* Cards full-bleed, softer radius for thumb, zero overflow */
  .card {
    border-radius: 16px !important;
    padding: 1.1rem !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  .side-dock { display: flex !important; } /* the existing sidebar is transformed into the mobile bottom navigation in sidebar.css */

  /* Grids collapse to 1 column and respect container width */
  .home-grid, .account-grid, .settings-grid, .u-cards-2, .u-cards-3,
  .audience-grid, .discovery-results, .rooms-layout, .ai-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Tap targets 44px */
  .btn, .side-link, .td-icon-btn, .theme-toggle {
    min-height: 44px;
  }

  .btn {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Popups are viewport-anchored below the top dock on phones. */
  .ai-dock {
    left: 0 !important; right: 0 !important; width: auto !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 78vh;
  }
  .td-pop, .td-results {
    position: fixed !important;
    top: calc(var(--tb-top) + var(--tb-h) + 0.55rem) !important;
    left: var(--mobile-pad) !important;
    right: var(--mobile-pad-right) !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Home screen & move panel safeguards */
  .move-panel {
    padding: 1.1rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .move-grid, .move-main, .move-side {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .row-item {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .row-body {
    min-width: 0 !important;
  }

  /* Hero stacks */
  .hero-inner { grid-template-columns: 1fr !important; }
  .hero-stage { min-height: 420px !important; overflow: hidden !important; }

  /* Hero floating cards — clamp widths to prevent overflow */
  .float-move { width: min(236px, calc(100% - 1rem)) !important; left: 0 !important; }
  .float-proof { right: 0 !important; max-width: calc(100% - 1rem); }
  .float-match { right: 0 !important; max-width: calc(100% - 1rem); }

  /* Top dock: hide screen chip on small phones for more search room */
  .td-screen { display: none; }

  /* Section heads: prevent long titles from overflowing */
  .section-head { word-break: break-word; }

  /* Playground grid single column */
  .playground-grid { grid-template-columns: 1fr !important; }

  /* Skills hero — stack on mobile */
  .id-hero { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
  .id-person { flex-direction: column; text-align: center; }
  .id-totals { padding-inline: 0; justify-content: center; }
}

/* Smooth viewport height fix for mobile browsers (100dvh) */
@supports (height: 100dvh) {
  @media (max-width: 767px) {
    .ai-dock { height: 78dvh; }
  }
}