/* ========================================================================== Slide-in drawers (agent settings on the right, mobile nav on the left) ========================================================================== */ #drawer-backdrop { position: fixed; inset: 0; background: rgb(2 6 23 / 0.5); opacity: 0; pointer-events: none; transition: opacity var(--transition-base) var(--ease); z-index: 90; } /* Второй селектор — на , а не на самой подложке: подложка лежит внутри #app-nav и пересоздаётся вместе с ним, теряя свой класс, а не пересоздаётся никогда. Класс на самой подложке оставлен: он ничему не мешает, и на нём же держится анимация появления. */ #drawer-backdrop.drawer-open, body.has-drawer-open #drawer-backdrop { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(30rem, 100%); background: var(--color-surface); box-shadow: var(--shadow-xl); transform: translateX(100%); visibility: hidden; transition: transform var(--transition-base) var(--ease), visibility 0s linear var(--transition-base); z-index: 91; overflow-y: auto; overflow-x: hidden; padding: 1.25rem; } .drawer.drawer-open { transform: translateX(0); visibility: visible; transition: transform var(--transition-base) var(--ease), visibility 0s linear 0s; } /* Шторка «Система безопасной активности»: шире обычной, шапка закреплена, тело скроллится. */ .sec-drawer { width: min(34rem, 100%); display: flex; flex-direction: column; padding: 0; } .sec-drawer .ntf-head { flex: none; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--color-border); } .sec-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 1.1rem 1.25rem; } .drawer-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-muted); } .drawer-close-btn:hover { background: var(--color-surface-muted); color: var(--color-text); }