@layer components {
  /* The mobile shell's floating bar: a capsule of tabs and a search disc; the desktop has its sidebar instead. */
  .tab-bar { display: none; }

  @media (max-width: 1099px) {
    .tab-bar {
      position: fixed; z-index: 5; bottom: var(--tab-bar-bottom); left: 0; right: 0; margin-inline: auto;
      width: min(400px, calc(100% - 32px - var(--safe-left) - var(--safe-right)));
      display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    }
    /* Left-handed: the disc moves to the left edge and the capsule stays against it. */
    :root[data-hand="left"] .tab-bar { flex-direction: row-reverse; }
    /* A thread keeps the whole height for itself and its composer. */
    body:has(:is(.app-main--flush, .app-main--stack)) .tab-bar { display: none; }
  }

  /* Tablets: the same bar, at the bottom right and 24 px from the edges. */
  @media (min-width: 768px) and (max-width: 1099px) {
    .tab-bar {
      left: auto; right: calc(24px + var(--safe-right)); margin-inline: 0;
      width: min(400px, calc(100% - 48px - var(--safe-left) - var(--safe-right)));
    }
    :root[data-hand="left"] .tab-bar { left: calc(24px + var(--safe-left)); right: auto; }
  }

  .tab-bar-capsule, .tab-bar-search {
    box-sizing: border-box; border: 1px solid var(--border); border-radius: 999px;
    background: var(--popover); box-shadow: var(--shadow-float);
  }
  /* Explicit sizes, so that the shrink animates: the capsule fills what the disc (60 px) and the gap leave. */
  .tab-bar-capsule { flex: none; width: 100%; min-width: 0; height: 62px; padding: 4px; display: flex; gap: 2px; }
  .tab-bar:has(.tab-bar-search) .tab-bar-capsule { width: calc(100% - 68px); }
  .tab-bar-search {
    flex: none; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
    color: var(--foreground); text-decoration: none;
  }
  .tab-bar-search > svg { width: 22px; height: 22px; }
  .tab-bar-search[aria-current="page"] { background: var(--jx-accent-soft); color: var(--jx-accent); }

  .tab-bar-link {
    position: relative; flex: 1 1 0; min-width: 44px; padding: 6px 8px 4px; border-radius: 999px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted-foreground); line-height: 1.2; text-decoration: none;
  }
  .tab-bar-link[aria-current="page"] { background: var(--jx-accent-soft); color: var(--jx-accent); }
  .tab-bar-link > svg { width: 22px; height: 22px; flex: none; }
  .tab-bar-link .release-dot { top: 7px; left: calc(50% + 6px); }
  .tab-bar-label { max-width: 100%; white-space: nowrap; font-size: 11px; font-weight: 500; } /* mobile-design */
  .tab-bar-link .nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); }

  /* Scrolled down: 146 x 54 capsule of 44 px tabs and a 52 px disc, same bottom edge, no movement, no bounce. */
  .tab-bar-capsule, .tab-bar-search { transition: width 300ms var(--ease-out), height 300ms var(--ease-out); }
  .tab-bar--compact .tab-bar-capsule, .tab-bar--compact:has(.tab-bar-search) .tab-bar-capsule { width: 146px; height: 54px; }
  .tab-bar--compact .tab-bar-search { width: 52px; height: 52px; }
  /* 3 x 44 + 2 x 2 gap + 2 x 4 padding + 2 border = 146: the tabs are exactly 44 x 44. */
  .tab-bar--compact .tab-bar-link { box-sizing: border-box; flex: none; width: 44px; height: 44px; padding: 0; align-self: center; }

  /* Labels fade out over the first 120 ms, then leave the layout; back, they fade in over the last 150 ms. */
  .tab-bar-label { transition: opacity 150ms var(--ease-out) 150ms, visibility 0s, position 0s allow-discrete; }
  .tab-bar--compact .tab-bar-label {
    position: absolute; visibility: hidden; opacity: 0;
    transition: opacity 120ms var(--ease-out), visibility 0s 120ms, position 0s 120ms allow-discrete;
  }

  /* Out of the document flow and out of the way of the first screen: its sight means the top of the page. */
  .tab-bar-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

  @media (prefers-reduced-motion: reduce) {
    .tab-bar-capsule, .tab-bar-search, .tab-bar-label, .tab-bar--compact .tab-bar-label { transition: none; }
  }
}