/* ==========================================================================
   Modal (centered dialog) — multi-step flows and confirmations
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(2 6 23 / 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base) var(--ease);
  z-index: 95;
}
.modal-backdrop.modal-open { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.95);
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-base) var(--ease), opacity var(--transition-base) var(--ease), visibility 0s linear var(--transition-base);
  z-index: 96;
}
.modal.modal-open {
  opacity: 1;
  visibility: visible;
  /* A small upward settle alongside the scale/fade — enough to feel alive
     without being a "spring" bounce (still a single ease-out, no overshoot). */
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--transition-base) var(--ease), opacity var(--transition-base) var(--ease), visibility 0s linear 0s;
}
.modal-lg { width: min(42rem, calc(100% - 2rem)); }
/* «Мини-Telegram»: крупная модалка на почти весь экран, без внутренних отступов — своя
   двухпанельная раскладка внутри (чат-лист + переписка). */
.modal-tg {
  width: min(1080px, 96vw);
  height: min(760px, 92vh);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
}
/* Модалка профиля «трансформируется» в чаты по кнопке: размер/паддинг анимируются, поэтому
   переключение читается как разворот той же модалки, а не как новое окно. */
#account-profile-modal {
  transition: transform var(--transition-base) var(--ease), opacity var(--transition-base) var(--ease),
              width .3s var(--ease), height .3s var(--ease), padding .3s var(--ease),
              visibility 0s linear var(--transition-base);
}
#account-profile-modal.modal-open {
  transition: transform var(--transition-base) var(--ease), opacity var(--transition-base) var(--ease),
              width .3s var(--ease), height .3s var(--ease), padding .3s var(--ease),
              visibility 0s linear 0s;
}
#account-profile-modal.tg-expanded {
  width: min(1080px, 96vw);
  height: min(760px, 92vh);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
}
/* Scrollbar look (thin, rounded, violet-on-hover) lives in the shared
   .custom-scrollbar rule group near the top of this file. */

/* ==========================================================================
   Account profile modal — skeleton loader + content entrance
   The profile partial is fetched on demand (drawers.js), so between the modal
   opening and the partial arriving we paint a skeleton that mirrors the real
   TG-style layout (avatar circle, name/username lines, segmented tabs, grouped
   field cards). It reuses the shared `.skeleton` shimmer. When the real partial
   lands it replaces the skeleton and rises in, so the swap reads as one motion
   instead of an abrupt pop. */
.apm-skel { animation: apm-fade-in 0.18s var(--ease) both; }
.apm-skel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.apm-skel-ava-wrap { display: flex; flex-direction: column; align-items: center; margin: 10px 0 18px; }
.apm-skel-ava { width: 96px; height: 96px; border-radius: 50%; }
.apm-skel-line { height: 0.75rem; border-radius: 6px; }
.apm-skel-tabs { height: 44px; border-radius: 12px; margin-bottom: 14px; }
.apm-skel-cap { height: 0.7rem; width: 7rem; border-radius: 5px; margin: 16px 6px 9px; }
.apm-skel-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-muted);
}
.apm-skel-row { display: flex; align-items: center; gap: 12px; padding: 15px 13px; }
.apm-skel-row + .apm-skel-row { border-top: 1px solid var(--color-border); }
.apm-skel-row .apm-skel-line { flex: 1; }

.tg-profile.apm-enter { animation: apm-rise-in 0.34s var(--ease) both; }
@keyframes apm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes apm-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .apm-skel, .tg-profile.apm-enter { animation: none; }
}

/* Structure: .modal-header and .modal-actions pin to the top/bottom of the
   modal's own scroll area (the modal itself is still the one scrolling
   element — no extra wrapper needed since both are already always direct
   children of .modal) while everything between them scrolls underneath.
   Long modals — module settings, bulk-apply, TData import — no longer hide
   their close button or their save button behind a scroll. Negative margins
   bleed each bar out to the modal's true edge (cancelling .modal's own
   padding) and the sticky offset is shifted by that same amount so it pins
   flush against the edge instead of leaving a padding-sized gap above it. */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: -1.5rem;
  z-index: 3;
  margin: -1.5rem -1.5rem 0.75rem;
  padding: 1.375rem 1.5rem 1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-muted);
  margin: -0.4rem -0.4rem 0 0;
  transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease);
}
.modal-close-btn:hover { background: var(--color-surface-muted); color: var(--color-text); }

/* Numbered-circle stepper — straight from the reference's own .stepper/.step/.n,
   replacing the old plain progress-dash bar. */
.modal-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0.4rem 0 1.375rem;
}
.modal-step {
  text-align: center;
  color: var(--color-text-faint);
  font-size: 0.7rem;
  font-weight: 700;
}
.modal-step-num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  margin: 0 auto 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: 0.8rem;
  transition: background var(--transition-base) var(--ease), color var(--transition-base) var(--ease);
}
.modal-step.active { color: var(--color-primary); }
.modal-step.active .modal-step-num { background: var(--color-primary); color: var(--color-on-primary); }
.modal-step.done .modal-step-num { background: var(--color-primary); color: var(--color-on-primary); opacity: 0.55; }
.modal-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.modal-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.modal-icon .icon { width: 1.4rem; height: 1.4rem; }
.modal-icon-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.modal-icon-info { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }

.modal-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.375rem; }
.modal-body { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1.25rem; line-height: 1.55; }
.modal-body strong { color: var(--color-text); font-weight: 600; }
.modal-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  position: sticky;
  bottom: -1.5rem;
  z-index: 3;
  margin: 1.5rem -1.5rem -1.5rem;
  padding: 1rem 1.5rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}
.modal-actions .btn { flex: none; }
@media (max-width: 480px) {
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}