@layer components {
  /* The conversation's sheet under 1100 px: tabs as a segmented control over an opaque band (they stay on top while
     the tab scrolls), members sized for a finger, and a vacant pole first in the list since it awaits a decision. */
  @media (max-width: 1099px) {
    /* Four tabs do not fit at 320 px: the row scrolls inside itself, and the muted band (its width set by the tabs
       controller) scrolls with it. */
    .sheet .panel-tabs {
      display: flex; gap: 2px; isolation: isolate; overflow-x: auto; overscroll-behavior-x: contain;
      scrollbar-width: none; padding: 9px calc(var(--gutter) + 3px) 13px; border-bottom: 0;
      background: var(--background);
    }
    .sheet .panel-tabs::-webkit-scrollbar { display: none; }
    .sheet .panel-tabs::before {
      content: ""; position: absolute; top: 6px; bottom: 10px; left: var(--gutter); z-index: -1;
      width: calc(var(--tabs-width, 100%) - 2 * var(--gutter)); border-radius: 11px; background: var(--muted);
    }
    .sheet .panel-tab {
      flex: 1 0 auto; height: 34px; margin: 0; padding: 0 12px; white-space: nowrap; border: 0; border-radius: 8px;
      font-size: var(--text-body); color: var(--muted-foreground);
    }
    .sheet .panel-tab[aria-selected="true"] {
      background: var(--background); color: var(--foreground); font-weight: 600; box-shadow: var(--shadow-sm);
    }
    /* This layer wins over the panel's focus ring in layout.css: the keyboard's tab needs it back. */
    .sheet .panel-tab:focus-visible { box-shadow: 0 0 0 3px var(--jx-accent); }
    .sheet .member-panel, .sheet .member-panel .sheet { font-size: var(--text-body); }
    .sheet .member-panel-bar { padding-inline: var(--gutter); }
    .sheet .member-panel-body { padding-inline: calc(var(--gutter) - 10px); }
    .sheet .member-search { height: var(--tap); gap: 8px; padding: 0 12px; }
    .sheet .member-search input { font-size: 1rem; }
    .sheet .member-panel-bar .button--sm, .sheet .member-vacant .button--sm { min-height: var(--tap); }
    .sheet .member-row { min-height: 52px; }
    .sheet .member-sheet { padding-inline: var(--gutter); font-size: var(--text-body); }
    .sheet .member-sheet .button, .sheet .member-add-screen .button { min-height: var(--tap); }
    .sheet .member-add-screen { padding-inline: var(--gutter); font-size: var(--text-body); }
    .sheet .member-add-search { height: var(--tap); }
    .sheet .member-add-screen { min-height: calc(92dvh - 72px); }
  }
  /* The Documents tab's count, as in the sheet's mock-up; the desktop's tabs never show it. */
  .panel-tab .conversation-count { display: none; }
  @media (max-width: 1099px) {
    .sheet .panel-tab .conversation-count {
      display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
      margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--jx-accent);
      color: var(--jx-accent-fg); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
    }
  }
}