/* ═══════════════════════════════════════════════════════════════
   TAB BAR REPLIABLE — la pilule se retracte en pastille ronde en bas
   a gauche quand on descend, facon application Reddit.

   Charge APRES gold.min.css : tout est dans la meme media query que la
   pilule flottante (max-width:1020px) et gagne par ordre de cascade.
   Piloté par static/js/tabbar-collapse.js, qui pose .tb-collapsed sur
   .tabbar et .tb-fab-icon sur l'onglet dont l'icone reste visible.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1020px) {

  .tabbar {
    --tb-fab-size: 56px;
    --tb-fab-left: 14px;
    /* Distance du centre de l'ecran au centre de la pastille. Le JS la
       reecrit en px exacts (clientWidth) : 100vw ment des qu'une barre de
       defilement persistante est affichee. */
    --tb-shift: calc(50vw - var(--tb-fab-left) - var(--tb-fab-size) / 2);
    --tb-ease: cubic-bezier(.22, .61, .36, 1);

    transition:
      width       .34s var(--tb-ease),
      max-width   .34s var(--tb-ease),
      min-height  .34s var(--tb-ease),
      padding     .34s var(--tb-ease),
      border-radius .34s var(--tb-ease),
      transform   .34s var(--tb-ease);
  }

  /* --- Etat replie : pastille ronde ---------------------------------
     Le translateX conserve le -50% et lui SOUSTRAIT un decalage fixe.
     C'est ce qui garde le bord gauche rigoureusement immobile pendant que
     la largeur fond : ecrire translateX(14px - 50vw) donnerait la meme
     position finale mais ferait deriver la barre vers la droite a mi-course. */
  .tabbar.tb-collapsed {
    width: var(--tb-fab-size);
    max-width: var(--tb-fab-size);
    min-height: var(--tb-fab-size);
    padding: 0;
    border-radius: 50%;
    transform: translateX(calc(-50% - var(--tb-shift))) translateZ(0);
    cursor: pointer;
  }

  /* Les onglets non retenus s'effacent avant que la barre ne les rattrape */
  .tabbar.tb-collapsed .tabbar-tab {
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s linear;
  }

  /* L'icone conservee quitte le flux flex et glisse jusqu'au centre de la
     pastille : sans ca elle se teleporterait a gauche des la premiere frame. */
  .tabbar.tb-collapsed .tb-fab-icon {
    position: absolute;
    top: 0;
    left: var(--tb-anchor-x, 0px);
    width: var(--tb-fab-size);
    height: 100%;
    opacity: 1;
    pointer-events: auto;
    color: var(--tabbar-active);
    transition: left .34s var(--tb-ease), opacity .16s linear;
  }

  /* Libelle sorti du flux pour que l'icone tombe au centre optique du rond */
  .tabbar.tb-collapsed .tb-fab-icon .tabbar-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    opacity: 0;
    transition: opacity .12s linear;
  }

  .tabbar.tb-collapsed .tabbar-dot {
    opacity: 0;
  }

  /* Cas Reels : sa boite carree doree n'a pas de sens dans un cercle,
     on ne garde que le glyphe. */
  .tabbar.tb-collapsed .tb-fab-icon .tabbar-reels-box {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .tabbar.tb-collapsed .tb-fab-icon .tabbar-reels-box svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--tabbar-active);
  }
  .tabbar.tb-collapsed.tb-fab-reels .tb-fab-icon .tabbar-reels-box svg {
    fill: var(--tabbar-active);
  }
}

@media (max-width: 1020px) and (prefers-reduced-motion: reduce) {
  .tabbar,
  .tabbar.tb-collapsed .tabbar-tab,
  .tabbar.tb-collapsed .tb-fab-icon,
  .tabbar.tb-collapsed .tb-fab-icon .tabbar-label {
    transition: none;
  }
}