@layer components {
  :root { --quota-banner-height: 40px; }

  .quota-banner {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
    height: var(--quota-banner-height); padding: 0 16px; font-size: 13px; color: var(--foreground);
    background: var(--jx-wait-soft); border-bottom: 1px solid var(--jx-wait);
  }

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

  @media (max-width: 767px) {
    .quota-banner { height: auto; min-height: var(--quota-banner-height); padding: 8px 16px; }
  }

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