/* ── Bottom bar i subnav-modal: ocults per defecte (mode compacte/tablet ≤ 980 px) ── */
.bottom-bar,
.subnav-modal {
  display: none;
}

/* ── Modal subnav / panell / backdrop (mode compacte/tablet ≤ 980 px) ── */
@media (max-width: 980px) {
  .subnav-modal {
    display: block;
    position: fixed;
    inset: 0;
    /* Retalla el panell tancat (translateY) durant overscroll/rubber-band i canvis
       de viewport visual en scroll ràpid mòbil. */
    overflow: hidden;
    /* Per sota del player (270); damunt bottom-bar nominal (260). Amb `body.subnav-open`,
       la bottom-bar puja a 285. `pointer-events`: vegeu sota. */
    z-index: 265;
    pointer-events: none;
  }
  .subnav-modal.open {
    /* El root no captura taps: la franja de la bottom-bar (fora backdrop/panell) continua sent clicable. */
    pointer-events: none;
  }
  .subnav-modal.open .subnav-backdrop,
  .subnav-modal.open .subnav-panel {
    pointer-events: auto;
  }
  .subnav-backdrop {
    position: absolute;
    inset: 0;
    bottom: calc(
      max(var(--bottom-bar-h, 0px), 72px) + env(safe-area-inset-bottom)
    );
    background: var(--ui-scrim);
    border: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .subnav-modal.open .subnav-backdrop {
    opacity: 1;
  }
  .subnav-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--bottom-bar-h, 0px) + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl) 22px 0 0;
    padding-bottom: 0;
    transform: translateY(calc(100% + var(--bottom-bar-h, 0px)));
    /* Tancat estable: sense transició (evita que canvis de --bottom-bar-h /
       --global-player-h o del viewport animin el panell cap a la vista durant
       scroll ràpid) i sense pintar (evita el sliver del botó «Tancar»). */
    transition: none;
    visibility: hidden;
    max-height: min(62vh, calc(100vh - var(--bottom-bar-h, 0px) - 120px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -24px 50px rgba(var(--shadow-rgb), var(--opacity-20));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .subnav-modal.open .subnav-panel,
  .subnav-modal.is-closing .subnav-panel {
    visibility: visible;
    transition: transform 0.3s ease;
  }
  .subnav-modal.open .subnav-panel {
    transform: translateY(0);
  }
  .subnav-panel-body {
    padding: var(--space-2) 14px calc(var(--space-3) + env(safe-area-inset-bottom)) 14px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }
}

/* ── Bottom bar completa (mode estret/mòbil ≤ 520 px) — vegeu ARCHITECTURE.md §1.1 ── */
@media (max-width: 520px) {
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Per sota del player (270) perquè l’ombra del player es llegeixi damunt la barra. */
    z-index: 260;
    display: flex;
    justify-content: space-around;
    gap: var(--space-1);
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: var(--chip-bg);
    border-top: 1px solid var(--border-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .bottom-bar-item {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 8px 4px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-xl);
    color: var(--muted);
    cursor: pointer;
    min-height: 52px;
  }
  .bottom-bar-item:focus-visible {
    outline: none;
    box-shadow: var(--focus);
  }
  /* Hover alineat amb .nav-item:not(.active) > .nav-trigger:hover (megamenú) */
  .bottom-bar-item:hover {
    background: var(--color-primary-solid-70);
    color: var(--card);
  }
  .bottom-bar-item[data-module-state="inactive"]:hover {
    background: var(--color-primary-solid-70);
    color: var(--card);
  }
  /* Contenidor fix: el traç omple 22×22 amb preserveAspectRatio="none" al svg (bottom bar). */
  .bottom-bar-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bottom-bar-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: none;
    fill: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .bottom-bar-label {
    font-family: var(--font-ui);
    font-size: clamp(9px, 2.8vw, 11px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Actiu: mateix tractament que .nav-item.active > .nav-link al megamenú */
  .bottom-bar-item.is-active {
    background: var(--color-primary);
    color: var(--card);
    box-shadow: none;
  }
  .bottom-bar-item.is-active .bottom-bar-icon svg {
    stroke-width: 2.6;
  }
  /* Submenú obert: mateix tractament que .nav-trigger[data-state="open"] al megamenú */
  .bottom-bar-item.is-open {
    background: var(--color-primary-solid-70);
    color: var(--card);
  }
  .bottom-bar-item.is-active .bottom-bar-label {
    font-weight: 800;
  }
  /* L’estat «obert» domina sobre «actiu» (com al trigger amb panell desplegat) */
  .bottom-bar-item.is-active:hover:not(.is-open) {
    background: var(--color-primary);
    color: var(--card);
  }

  /* Subnav obert (modal z 265, player z 270): pugem la barra només ara perquè els botons
     quedin per davant del full i del player; sense aquest boost el player té z superior al modal. */
  body.subnav-open .bottom-bar {
    z-index: 285;
  }
}

/* ── Bottom bar amagat a escriptori (≥ 981 px) ── */
@media (min-width: 981px) {
  .bottom-bar {
    display: none;
  }
}