/* The home's side drawer: navigation, recent sessions and the profile, the
   way a mobile chat app keeps them one swipe away. It sits against the
   right edge because the interface reads right to left, slides in from
   there, and follows the finger while it is dragged back out. */

.code-menu-button svg, .home-drawer svg { fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.home-drawer {
  background: var(--mineral-950); border: 0; border-inline-end: 1px solid var(--border-soft); color: var(--limestone-100);
  block-size: 100dvh; max-block-size: none; inline-size: min(82vw, 21rem); max-inline-size: none;
  inset-block: 0; inset-inline: 0 auto; margin: 0; padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
  transform: translateX(var(--sheet-drag-x, 0px));
  transition: transform var(--duration-base) var(--ease-out);
}
.home-drawer[open] { animation: home-drawer-in var(--duration-base) var(--ease-out); display: flex; flex-direction: column; gap: var(--space-3); }
.home-drawer::backdrop { background: rgb(2 8 10 / 62%); }
.home-drawer.is-dragging, .code-sheet.is-dragging { transition: none; user-select: none; }
@keyframes home-drawer-in { from { transform: translateX(100%); } to { transform: none; } }

.home-drawer-head { align-items: center; display: flex; justify-content: space-between; }
.home-drawer-brand { align-items: center; display: inline-flex; font-family: var(--font-display); font-size: var(--text-xl); gap: var(--space-2); }
.home-drawer-head .code-icon-button { background: transparent; border-color: transparent; }

.home-drawer-search { align-items: center; background: var(--mineral-900); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--limestone-300); display: flex; gap: var(--space-2); min-block-size: var(--touch-target); padding-inline: var(--space-4); }
.home-drawer-search input { background: transparent; border: 0; color: var(--limestone-100); flex: 1; font: inherit; min-inline-size: 0; outline: none; }
.home-drawer-search:focus-within { border-color: var(--emerald-400); }

.home-drawer-nav { display: flex; flex-direction: column; }
.home-drawer-link { align-items: center; background: transparent; border: 0; border-radius: var(--radius-md); color: var(--limestone-100); cursor: pointer; display: flex; font: inherit; font-size: var(--text-md); font-weight: 600; gap: var(--space-3); min-block-size: var(--touch-target); padding-inline: var(--space-2); text-align: start; text-decoration: none; }
.home-drawer-link[aria-current="page"] { color: var(--emerald-300); }
.home-drawer-link:hover, .home-drawer-recent:hover { background: var(--mineral-900); }
.home-drawer-link svg { color: var(--limestone-300); flex: none; }
.home-drawer-link[aria-current="page"] svg { color: var(--emerald-300); }

.home-drawer-label { color: var(--limestone-300); font-size: var(--text-sm); font-weight: 700; margin: var(--space-2) 0 0; padding-inline: var(--space-2); }
.home-drawer-recents { display: flex; flex: 1; flex-direction: column; list-style: none; margin: 0; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0; }
.home-drawer-recent { align-items: center; border-radius: var(--radius-md); color: var(--limestone-100); display: flex; gap: var(--space-3); justify-content: space-between; min-block-size: var(--touch-target); padding-inline: var(--space-2); text-decoration: none; }
.home-drawer-recent strong { font-weight: 500; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-drawer-recent .code-status { flex: none; }
.home-drawer-empty { color: var(--limestone-300); flex: 1; font-size: var(--text-sm); margin: 0; padding-inline: var(--space-2); }

.home-drawer-foot { align-items: center; border-block-start: 1px solid var(--border-soft); display: flex; gap: var(--space-3); justify-content: space-between; padding-block-start: var(--space-3); }
.home-drawer-profile { align-items: center; background: transparent; border: 0; border-radius: var(--radius-pill); color: var(--limestone-100); cursor: pointer; display: inline-flex; font: inherit; font-weight: 600; gap: var(--space-2); min-block-size: var(--touch-target); min-inline-size: 0; padding-inline: var(--space-1) var(--space-2); }
.home-drawer-profile bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 8rem; }
.home-drawer-new { border-radius: var(--radius-pill); flex: none; font-weight: 800; min-block-size: var(--touch-target); padding-inline: var(--space-4); }
.home-drawer-link:focus-visible, .home-drawer-recent:focus-visible, .home-drawer-profile:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 2px; }

/* A bottom sheet follows the finger down while it is dragged away. */
.code-sheet[open] { transform: translate(var(--sheet-drag-x, 0px), var(--sheet-drag-y, 0px)); transition: transform var(--duration-base) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .home-drawer[open] { animation: none; }
  .home-drawer, .code-sheet[open] { transition: none; }
}