@layer components {
  /* Drawer -- off-canvas below 1100px, a grid column from 1100px */
  .drawer {
    --drawer-bg: var(--color-canvas);

    background-color: var(--drawer-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    min-height: 0;
  }

  /* Below 1100px: drawers are fixed overlays anchored to the layout viewport. */
  @media (max-width: 1099px) {
    .drawer {
      position: fixed;
      top: 0;
      bottom: 0;
      inline-size: min(80vw, 22rem);
      z-index: var(--z-drawer);
      transition: transform var(--transition-slow);
      padding-top: calc(var(--nav-height) + var(--safe-inset-top));
      padding-bottom: calc(var(--tab-bar-height) + var(--safe-inset-bottom));
    }

    .drawer--left {
      left: 0;
      transform: translateX(-100%);
      border-inline-end: var(--border);
    }

    .drawer--right {
      right: 0;
      transform: translateX(100%);
      border-inline-start: var(--border);
    }

    .drawer--left.drawer--open {
      transform: translateX(0);
    }

    .drawer--right.drawer--open {
      transform: translateX(0);
    }

    /* When the chat viewport fallback is active, the shell is constrained to
       the visible area. Make the drawer and overlay absolute to that shell
       so they cannot reach behind the on-screen keyboard. */
    .app-layout--chat-viewport .drawer {
      position: absolute;
    }
  }

  /* Tablet: drawers slide over the page below the top bar, whose panel
     buttons open and close them, and there is no tab bar to clear. */
  @media (min-width: 800px) and (max-width: 1099px) {
    .drawer {
      top: calc(var(--nav-height) + var(--safe-inset-top));
      padding-top: 0;
      padding-bottom: var(--safe-inset-bottom);
    }
  }

  /* Desktop: drawers are inline grid children */
  @media (min-width: 1100px) {
    .drawer {
      border-inline-end: var(--border);
    }

    .drawer--right {
      border-inline-end: none;
      border-inline-start: var(--border);
    }

    .app-layout--left-collapsed .drawer--left,
    .app-layout--right-collapsed .drawer--right {
      display: none;
    }
  }

  /* Drawer overlay (backdrop below 1100px) */
  .drawer-overlay {
    display: none;
  }

  @media (max-width: 1099px) {
    .drawer-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: var(--overlay);
      z-index: var(--z-drawer-overlay);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-slow);
    }

    .drawer-overlay--visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* Constrain the mobile backdrop to the chat viewport fallback shell. */
    .app-layout--chat-viewport .drawer-overlay {
      position: absolute;
    }
  }

  /* Tablet: the backdrop leaves the top bar uncovered, so its panel buttons
     stay in reach. */
  @media (min-width: 800px) and (max-width: 1099px) {
    .drawer-overlay {
      top: calc(var(--nav-height) + var(--safe-inset-top));
    }
  }

  /* Drawer header */
  .drawer__header {
    align-items: center;
    border-block-end: var(--border);
    block-size: 3rem;
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding-inline: var(--inline-space-double) var(--inline-space);
    flex-shrink: 0;
  }

  .drawer__title {
    font-family: var(--font-prose);
    font-size: var(--text-normal);
    font-weight: 500;
  }

  /* Drawer content */
  .drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--block-space-half) var(--inline-space-double) var(--block-space);
  }

  /* Drawer drag handle (mobile, visible touch target) */
  .drawer__handle {
    display: none;
  }

  @media (max-width: 799px) {
    .drawer__handle {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      inline-size: 1.5rem;
      block-size: 3rem;
      background: var(--color-surface);
      border-radius: var(--radius);
      z-index: 1;
    }

    .drawer--left .drawer__handle {
      right: -1.5rem;
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    .drawer--right .drawer__handle {
      left: -1.5rem;
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }
}