/* ============================================================
   Lekto V3 — Drawer global de registros (chat "registros-first").
   Overlay que entra da direita p/ esquerda, escurecendo o resto.
   Reutiliza .av-rail__list e .av-composer (de css/avaliacao.css).
   Depende só de tokens --lkt-* / aliases.
   ============================================================ */
.reg-drawer { position: fixed; inset: 0; z-index: 180; }
.reg-drawer[hidden] { display: none; }

/* escurece o restante da tela — véu do contrato DS:Modal */
.reg-drawer__scrim { position: fixed; inset: 0;
  background: var(--theme-modal-overlay-bg);
  backdrop-filter: blur(var(--theme-modal-overlay-blur)); opacity: 0; transition: opacity .28s var(--motion-ease); }
.reg-drawer.is-open .reg-drawer__scrim { opacity: 1; }

/* painel colado à direita, desliza da direita para a esquerda.
   DS:Modal — cabeçalho e compositor presos nas pontas do painel; quem rola é
   o feed no meio. O painel inteiro rolar deixava a barra de input solta logo
   abaixo do último registro, com faixa branca sobrando embaixo. */
.reg-drawer__panel { position: absolute; top: 0; right: 0; height: 100dvh; width: min(420px, 92vw);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; box-shadow: var(--theme-modal-shadow);
  transform: translateX(100%); transition: transform .34s var(--motion-ease); will-change: transform; }
.reg-drawer.is-open .reg-drawer__panel { transform: none; }

/* O feed rolar e o compositor ficar preso no rodapé são regra do componente
   (.av-rail__list em css/avaliacao.css) — aqui só se diz quem, neste painel,
   não deve encolher junto com ele. */
.reg-drawer__head, .reg-drawer .av-composer { flex: none; }

.reg-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 12px; }
.reg-drawer__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--theme-text-heading); }
.reg-drawer__close { width: 38px; height: 38px; border-radius: var(--border-radius-sm); border: 0; background: var(--theme-surface-muted); color: var(--theme-text-muted); cursor: pointer;
  display: grid; place-items: center; transition: background var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.reg-drawer__close:hover { background: var(--color-surface-mist); transform: rotate(90deg); }
.reg-drawer__close svg { width: 16px; height: 16px; }
.reg-drawer__close:focus-visible { outline: 3px solid var(--color-accent-pure); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .reg-drawer__scrim, .reg-drawer__panel { transition: none; }
  .reg-drawer__close { transition: none; }
  .reg-drawer__close:hover { transform: none; }
}