/* ─── Floating bottom nav (Telegram iOS 17+ / liquid glass) ───────────────── */

.bottomnav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(var(--safe-bottom), 12px);
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}
.bottomnav__pill,
.bottomnav__profile {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.05);
  border: 0.5px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.05);
}
html[data-theme="dark"] .bottomnav__pill,
html[data-theme="dark"] .bottomnav__profile {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.bottomnav__pill {
  display: flex;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.bottomnav__pill--compact {
  flex: 1 1 auto;
  min-width: 0;
}
.bottomnav__pill--compact .bottomnav__tab {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.bottomnav__pill--compact .bottomnav__label {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.bottomnav__tab {
  flex: 0 0 auto;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 999px;
  transition: background 0.18s, color 0.18s;
}
.bottomnav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottomnav__icon svg { width: 26px; height: 26px; }
/* Animated TON DNS icon (lottie injects its own <svg>). The box matches the 26px static
   glyphs so the tab/label geometry is IDENTICAL to the other tabs — only the artwork is
   enlarged, via transform (overflow spills harmlessly into the tab's side padding, never
   the layout). Its shapes are forced to currentColor so it tracks the tab tint exactly
   like the others: white when idle, blue (var(--link)) when active. */
.dns-lottie { width: 26px; height: 26px; line-height: 0; }
.dns-lottie svg { width: 100% !important; height: 100% !important; transform: scale(1.25); }
.dns-lottie svg path,
.dns-lottie svg g { fill: currentColor !important; }
.subdomain-tab-lottie { width: 26px; height: 26px; line-height: 0; }
.subdomain-tab-lottie svg { width: 100% !important; height: 100% !important; }
.subdomain-tab-lottie svg path,
.subdomain-tab-lottie svg g { fill: currentColor !important; }
.bottomnav__label { line-height: 1; }
.bottomnav__tab--active {
  color: var(--link);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] .bottomnav__tab--active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.bottomnav__profile {
  flex: 0 0 auto;
  width: 60px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  overflow: hidden;
}
.bottomnav__profile--active {
  color: var(--link);
  /* Ring shows for everyone — the :has(.bottomnav__avatar) gate used to skip it
     for photo-less users (initials fallback), who then had no active indicator. */
  box-shadow: 0 0 0 2px var(--link), 0 12px 36px rgba(0, 0, 0, 0.15);
}
.bottomnav__avatar { width: 100%; height: 100%; min-height: 52px; object-fit: cover; display: block; }
.bottomnav__initial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-text);
}

/* First-connection guide: Telegram sheet intro followed by an
   iOS-style popover anchored to real navigation and action controls. */
.wizard-intro-actions {
  display: grid;
  gap: 10px;
}
.wizard-intro-actions--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wizard-complete-actions {
  display: grid;
  gap: 10px;
  width: min(100%, 320px);
  margin: 0 auto;
}
.wizard-complete-actions .tg-btn { width: 100%; }
.wizard-guide-lottie {
  width: 152px;
  height: 152px;
}
.wizard-guide-lottie--large {
  width: 176px;
  height: 176px;
}
.wizard-tour::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 209;
  pointer-events: none;
  animation: wizard-blur-out 0.18s ease-out forwards;
}
@keyframes wizard-blur-out {
  from { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  to { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
}
.wizard-tour__blocker {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: transparent;
}
.wizard-tour__spotlight {
  position: fixed;
  z-index: 211;
  pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--link) 75%, white);
  border-radius: 999px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.48), 0 0 0 4px color-mix(in srgb, var(--link) 18%, transparent);
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.wizard-tour__popover {
  position: fixed;
  left: 12px;
  right: 12px;
  z-index: 212;
  padding: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--section-bg) 96%, transparent);
  border: 0.5px solid var(--separator);
  border-radius: 20px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  animation: wizard-popover-in 0.2s ease;
}
.wizard-tour__popover::after {
  content: '';
  position: absolute;
  left: var(--wizard-arrow-left);
  width: 14px;
  height: 14px;
  background: var(--section-bg);
  transform: rotate(45deg);
}
.wizard-tour__popover--above::after {
  bottom: -7px;
  border-right: 0.5px solid var(--separator);
  border-bottom: 0.5px solid var(--separator);
}
.wizard-tour__popover--below::after {
  top: -7px;
  border-left: 0.5px solid var(--separator);
  border-top: 0.5px solid var(--separator);
}
@keyframes wizard-popover-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.wizard-tour__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 38px;
  margin: -6px 0 6px;
}
.wizard-tour__progress {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.wizard-tour__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 22%, transparent);
}
.wizard-tour__dot--active {
  width: 18px;
  background: var(--link);
}
.wizard-tour__popover h2 {
  margin: 0;
  text-align: center;
  font-size: 18px;
  line-height: 23px;
  font-weight: 700;
  letter-spacing: -0.35px;
}
.wizard-tour__popover p {
  margin: 5px 0 14px;
  text-align: center;
  color: var(--subtitle);
  font-size: 14px;
  line-height: 19px;
}
.wizard-tour__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wizard-tour__skip,
.wizard-tour__back,
.wizard-tour__next {
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 590;
}
.wizard-tour__skip { justify-self: end; color: var(--hint); }
.wizard-tour__back { color: var(--hint); }
.wizard-tour__next { margin-left: auto; color: var(--accent-text); background: var(--accent) !important; }
.wizard-tour__skip:active,
.wizard-tour__back:active,
.wizard-tour__next:active { opacity: 0.72; transform: scale(0.97); }

/* Hide the nav while a sheet is up (it shares z-space and sits below the sheet).
   BottomSheet ref-counts `tg-sheet-open` on <html>, so this works regardless of
   which subtree opened the sheet. */
html.tg-sheet-open .bottomnav { display: none; }
html.tg-sheet-open,
html.tg-sheet-open body,
html.tg-sheet-open .screen {
  overflow: hidden;
}