/* ============================================================
   overlays.css — шторки (core/sheet.js: телефон — снизу с жестом, планшет — снизу по центру,
   десктоп — модальное окно) и тосты (core/toast.js).
   ============================================================ */

/* ---------- Шторка (bottom sheet) ----------
   Телефон: снизу на всю ширину, тянется вниз за ручку/шапку (или тело, прокрученное к началу).
   Планшет: снизу, по центру, не шире --sheet-max. Десктоп: модальное окно по центру. */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; }
.sheet-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 100%, rgba(4, 3, 10, 0.55), rgba(4, 3, 10, 0.72));
  opacity: 0;
  transition: opacity 280ms var(--ease);
}
.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: calc(var(--app-h) - var(--sat) - 32px); /* не заезжает под шапку Telegram в полноэкранном режиме */
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(139, 92, 246, 0.12), transparent 70%),
    var(--bg-2);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), var(--inner-hi);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-out);
  outline: none;
}
.sheet-wrap.open .sheet-backdrop { opacity: 1; }
.sheet-wrap.open .sheet { transform: none; transition-duration: 420ms; }
.sheet.is-dragging { transition: none !important; }
.sheet__handle { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); margin: 10px auto 4px; flex: 0 0 auto; }
.sheet__title { padding: 8px 20px 4px; font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: 1.2; }
.sheet__body {
  padding: 8px 20px calc(20px + var(--sab));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Прокрутка к полю не оставляет его под полосой «домой» */
  scroll-padding-bottom: calc(var(--sab) + 20px);
}
.sheet__close { display: none; }
.sheet__menu .list-row { background: transparent; border: 0; border-radius: 12px; min-height: 50px; box-shadow: none; }
.sheet__menu .list-row:active { background: var(--card); }
.sheet__menu .list-row.is-danger { color: var(--red); }
@media (hover: hover) and (pointer: fine) { .sheet__menu .list-row:hover { background: var(--card); } }

@media (min-width: 600px) {
  .sheet { max-width: var(--sheet-max); margin-inline: auto; border: 1px solid var(--line-2); border-bottom: 0; }
}
@media (min-width: 1024px) {
  .sheet-wrap { display: flex; align-items: center; justify-content: center; padding: 32px; }
  .sheet {
    position: relative;
    left: auto; right: auto; bottom: auto;
    width: 100%;
    max-height: min(calc(var(--app-h) - 64px), 860px);
    border-radius: var(--r-xl);
    border: 1px solid var(--line-2);
    box-shadow: var(--elev-3), var(--inner-hi);
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: transform 240ms var(--ease-out), opacity 200ms var(--ease);
  }
  .sheet-wrap.open .sheet { opacity: 1; transform: none; transition-duration: 320ms, 220ms; }
  .sheet__handle { visibility: hidden; height: 0; margin: 8px auto 0; }
  .sheet__title { padding: 18px 64px 4px 24px; }
  .sheet__body { padding: 10px 24px 24px; }
}

/* Крестик в углу — везде, где есть мышь (жест вниз только для тача): десктоп, узкое окно Telegram Desktop */
.sheet__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.sheet__close .icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .sheet__close { display: inline-flex; }
  .sheet__close:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }
  .sheet__title { padding-right: 60px; }
}

/* ---------- Тосты ---------- */
#toasts {
  position: fixed;
  left: 0; right: 0;
  /* --toast-space: место под навигацией или нижней панелью .dock (core/viewport.js считает сам;
     экран со своим низом без .dock — например, композер чата — может выставить его вручную) */
  bottom: calc(var(--toast-space, var(--nav-h)) + var(--sab) + 16px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  pointer-events: none;
}
.has-rail #toasts { left: var(--rail-w); bottom: calc(var(--toast-space, 0px) + var(--sab) + 28px); }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(100%, 440px);
  min-height: 46px;
  padding: 10px 16px 10px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: #fff;
  background: rgba(30, 27, 48, 0.9);
  border: 1px solid var(--line-2);
  box-shadow: var(--elev-2), var(--inner-hi);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity var(--t), transform 320ms var(--ease-spring);
  pointer-events: auto;
  cursor: default;
}
.toast.is-visible { opacity: 1; transform: none; }
.toast.is-leaving { opacity: 0; transform: translateY(6px) scale(0.98); transition-duration: 200ms; }
.toast__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
  background: rgba(139, 92, 246, 0.35);
}
.toast__icon .icon { width: 14px; height: 14px; }
.toast__text { min-width: 0; overflow-wrap: anywhere; }
.toast--error { border-color: rgba(255, 77, 94, 0.5); background: rgba(70, 20, 30, 0.92); }
.toast--error .toast__icon { background: var(--red); }
.toast--success { border-color: rgba(45, 212, 160, 0.45); }
.toast--success .toast__icon { background: var(--green); color: #06251b; }