@layer components {
  /* Bottom tab bar -- mobile primary navigation. Fixed to the viewport bottom
     by default so standalone pages (e.g., the projects index) keep the
     controls visible at the bottom of the screen even when the page content
     is taller than the viewport. The app-shell variant overrides this to
     fill the grid's tabs track in normal flow. */
  .tab-bar {
    --tab-bar-bg: var(--color-canvas);

    align-items: stretch;
    background-color: var(--tab-bar-bg);
    border-block-start: var(--border);
    display: flex;
    block-size: calc(var(--tab-bar-height) + var(--safe-inset-bottom));
    justify-content: space-around;
    padding-bottom: var(--safe-inset-bottom);
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-tab-bar);
  }

  @media (min-width: 800px) {
    .tab-bar {
      display: none;
    }
  }

  /* Shell variant: the grid area already reserves the tab-bar + safe-area
     track, so the bar fills that area in normal flow instead of floating.
     The track is auto-sized so it collapses when the tab bar is hidden under
     a short visible viewport. */
  .app-tabs.tab-bar {
    position: static;
    box-sizing: border-box;
    block-size: calc(var(--tab-bar-height) + var(--safe-inset-bottom));
  }

  /* Collapse the mobile tab bar only inside the chat view when the visible
     viewport is short so the chat composer can grow without eliminating the
     message list entirely. The grid track auto-sizes, so this also frees up the
     track's height. Other app-shell pages (editor, forms, lists) keep the tab
     bar because they have no composer contention. */
  @container app-layout (max-width: 799px) and (max-height: 38rem) {
    .app-layout:has(.chat) .app-tabs.tab-bar {
      display: none;
    }
  }

  .tab-bar__item {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: var(--text-xs);
    gap: 0.15rem;
    justify-content: center;
    text-decoration: none;
    transition: color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
  }

  .tab-bar__item:hover,
  .tab-bar__item--active {
    color: var(--color-link);
  }

  .tab-bar__icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tab-bar__label {
    font-weight: 500;
    line-height: 1;
  }

  /* Flash indicator -- pulsing dot on the Bible tab when new records
     arrive while the Story Bible drawer is closed. Cleared when the
     author opens the drawer. */
  @keyframes tab-bar-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  .tab-bar__item--flash {
    position: relative;
  }

  .tab-bar__item--flash::after {
    animation: tab-bar-flash 1.5s ease-in-out infinite;
    background-color: var(--color-accent);
    block-size: 6px;
    border-radius: 50%;
    content: "";
    inline-size: 6px;
    inset-block-start: 4px;
    inset-inline-end: calc(50% - 12px);
    position: absolute;
  }

  @media (prefers-reduced-motion: reduce) {
    .tab-bar__item--flash::after {
      animation: none;
    }
  }
}