/* /account/agent — mobile side panel (Conversations + Documents)
 *
 * Below 64rem the desktop rail is hidden, so the same two lists live in a panel
 * that slides in from the right over a scrim. The toggle sits top-right: in the
 * conversation topbar when a thread is open, in its own bar on the empty state.
 * Dismissed by tapping the scrim, Escape, or swiping the panel back right (see
 * sidepanel_controller.js).
 *
 * Everything here is mobile-only — toggle, scrim and panel are display:none at
 * ≥64rem, where the rail is always on screen.
 */

/* ---- Toggle ---- */
.agent-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--spacing-32);
  height: var(--spacing-32);
  /* Clear of the thread's overlay scrollbar, which otherwise paints over the
     icon's right edge. Same inset in the empty state's bar, so the toggle
     lands in the same spot either way. */
  margin-right: var(--spacing-8);
  padding: 0;
  border: 0;
  border-radius: var(--corner-radius-xs);
  background: transparent;
  color: var(--symbol-default);
  cursor: pointer;
}
.agent-panel-toggle:hover { color: var(--text-primary); background-color: var(--background-hover); }
.agent-panel-toggle-icon { width: 1.25rem; height: 1.25rem; }

/* Empty state has no topbar to hang the toggle off — this is its row. */
.agent-panel-bar {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding-bottom: var(--spacing-8);
}

/* ---- Scrim + panel ---- */
/* Kept in flow (display:block) so opacity + visibility can animate; pointer- and
   AT-hidden while closed. */
.agent-panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: var(--background-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.agent-page.agent-panel-open .agent-panel-scrim { opacity: 1; visibility: visible; }

.agent-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 85%; /* Note: near-full-width; the scrim edge keeps the page behind visible */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--spacing-16);
  padding-bottom: max(var(--spacing-16), env(safe-area-inset-bottom));
  padding-right: max(var(--spacing-16), env(safe-area-inset-right));
  background-color: var(--background-base);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  -webkit-overflow-scrolling: touch;

  &:focus { outline: none; }
}
.agent-page.agent-panel-open .agent-panel { transform: translateX(0); }

/* While a finger is on it the panel tracks the drag — no transition, or every
   move would lag a frame behind. */
.agent-panel.is-dragging { transition: none; }

/* Desktop: the rail is the only home for these lists. */
@media (min-width: 64rem) {
  .agent-panel-toggle,
  .agent-panel-bar,
  .agent-panel-scrim,
  .agent-panel { display: none; }
}

/* Background scroll lock while the panel is open (toggled by the controller). */
body.agent-panel-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .agent-panel,
  .agent-panel-scrim { transition: none; }
}