@layer components {
  /* Drawer -- off-canvas on mobile, persistent on desktop */
  .drawer {
    --drawer-bg: var(--color-canvas);

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

  /* Mobile: drawers are fixed overlays anchored to the layout viewport. */
  @media (max-width: 799px) {
    .drawer {
      position: fixed;
      top: 0;
      bottom: 0;
      inline-size: min(80vw, 22rem);
      z-index: var(--z-drawer);
      box-shadow: var(--shadow-lg);
      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;
    }
  }

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

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

    /* Collapsed state on desktop */
    .drawer--collapsed {
      display: none;
    }
  }

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

  @media (max-width: 799px) {
    .drawer-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: oklch(0% 0 0 / 0.4);
      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;
    }
  }

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

  .drawer__title {
    font-size: var(--text-normal);
    font-weight: 600;
  }

  /* Drawer content */
  .drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--block-space-half) var(--inline-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;
    }
  }
}