@layer components {
  :root { --support-banner-height: 48px; }

  .support-banner {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
    height: var(--support-banner-height); padding: 0 16px; font-size: 13px; white-space: nowrap;
    background: var(--jx-wait-soft); border-bottom: 1px solid var(--jx-wait); color: var(--foreground);
  }
  /* Fixed-width digits: the end time never shifts the rest of the line. */
  .support-banner time { font-variant-numeric: tabular-nums; }
  .support-banner-scope { color: var(--muted-foreground); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* The shell's full-height columns shrink by the banner so nothing slides under the fold. */
  .support-banner ~ .app-shell {
    min-height: calc(100vh - var(--support-banner-height));
    min-height: calc(100dvh - var(--support-banner-height));
  }
  .support-banner ~ .app-shell :is(.app-sidebar, .app-panel) {
    top: var(--support-banner-height);
    height: calc(100vh - var(--support-banner-height) - var(--panel-offset, 0px));
    height: calc(100dvh - var(--support-banner-height) - var(--panel-offset, 0px));
  }
  .support-banner ~ .app-shell .panel-resize {
    top: calc(var(--support-banner-height) + var(--conversation-header-height));
  }
  .support-banner ~ .app-shell .app-main--flush {
    height: calc(100vh - var(--support-banner-height));
    height: calc(100dvh - var(--support-banner-height));
  }

  @media (max-width: 767px) {
    .support-banner { flex-wrap: wrap; height: auto; padding: 8px 16px; gap: 4px 12px; white-space: normal; }
    .support-banner-scope { order: 3; flex-basis: 100%; }
  }

  /* Mobile shell: the sidebar is a screen that scrolls with the page, whatever the banner above it. */
  @media (max-width: 1099px) {
    .support-banner ~ .app-shell .app-sidebar { height: auto; }
  }
}