/* ============================================================
   Wallet Mini App — iOS design system on Telegram themeParams
   Source of truth: --tg-theme-* vars (live), iOS palette fallbacks
   ============================================================ */

:root {
  /* ---- iOS palette fallbacks (light) — used outside Telegram ---- */
  --ios-bg-grouped: #efeff4;          /* Telegram iOS light secondary_bg */
  --ios-bg-card: #ffffff;
  --ios-label: #000000;
  --ios-label-2: rgba(60, 60, 67, 0.6);
  --ios-label-3: rgba(60, 60, 67, 0.3);
  --ios-separator: rgba(60, 60, 67, 0.29);
  --ios-tint: #0088ff; /* Telegram iOS light accent (defaultDayAccentColor) */
  --ios-section-header: #6d6d72;
  --ios-destructive: #ff3b30;
  --ios-bottom-bar: #f2f2f2;

  /* ---- semantic tokens: Telegram first, iOS fallback ---- */
  --bg: var(--tg-theme-secondary-bg-color, var(--ios-bg-grouped));
  --bg-section: var(--tg-theme-section-bg-color, var(--ios-bg-card));
  --label: var(--tg-theme-text-color, var(--ios-label));
  --label-2: var(--tg-theme-subtitle-text-color, var(--ios-label-2));
  --label-3: var(--ios-label-3);
  --hint: var(--tg-theme-hint-color, var(--ios-label-2));
  --separator: var(--tg-theme-section-separator-color, var(--ios-separator));
  --section-header: var(--tg-theme-section-header-text-color, var(--ios-section-header));
  --tint: var(--tg-theme-accent-text-color, var(--ios-tint));
  --link: var(--tg-theme-link-color, var(--ios-tint));
  --btn: var(--tg-theme-button-color, var(--ios-tint));
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --destructive: var(--tg-theme-destructive-text-color, var(--ios-destructive));
  --bottom-bar-bg: var(--tg-theme-bottom-bar-bg-color, var(--ios-bottom-bar));

  /* ---- fixed iOS system colors (not themed by Telegram) ---- */
  --green: #34c759;
  --green-vivid: #29c482;         /* актив «Доллары» в Telegram Wallet: снято пипеткой с рефа */
  --pink: #ff2d55;
  --red: #ff3b30;
  --orange: #ff9500;
  --yellow: #ffcc00;
  --indigo: #5856d6;
  --purple: #af52de;
  --teal: #5ac8fa;
  --gray: #8e8e93;
  --gray3: #c7c7cc;               /* chevrons */
  --cell-press: #d1d1d6;          /* systemGray4: native selected-cell fill */
  --fill-press: rgba(120, 120, 128, 0.16); /* secondarySystemFill: switch off track */
  --fill-3: rgba(118, 118, 128, 0.12);     /* segmented bg, input fills */
  --knob-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
  --hairline: 0.33px;
  /* Разделитель списка - не волосяная линия: на скриншоте настроек iOS (375pt)
     он дает 71 единицу «чернил» при пике всего +31 над фоном, что сходится
     только с линией в 1pt приглушенного цвета, а не с тонкой яркой.
     Обводки (док, тост) остаются на --hairline */
  --separator-h: 1px;

  /* ---- metrics (iOS 26: 16/26/34 radius scale, concentric) ---- */
  --radius-small: 16px;     /* tiles, nested media */
  --radius-card: 26px;      /* grouped containers / cards */
  --radius-large: 34px;     /* menus, oversized surfaces */
  --radius-button: 16px;
  --radius-capsule: 25px;
  --inset-x: 16px;
  --cell-h: 52px; /* iOS 26 rows are taller */
  --tabbar-h: 62px;
  --tabbar-inset: 16px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* нижняя кнопка действия: отступ от физического низа (safe area + 4, но не
     меньше 38) и высота; нужны и панели, и контенту, который над ней липнет */
  --main-bar-bottom: max(38px, calc(var(--safe-bottom) + 4px));
  --main-btn-h: 52px;
  /* JS overrides both from Telegram's safeAreaInset / contentSafeAreaInset;
     in fullsize/fullscreen mode the webview extends under the status bar
     and Telegram's floating controls — every top-level surface pads by
     their sum (--top-inset). Zero in the regular header mode. */
  --safe-top: env(safe-area-inset-top, 0px);
  --content-safe-top: 0px;
  /* -24px: hug the Telegram controls tighter (clamped for regular mode) */
  --top-inset: max(0px, calc(var(--safe-top) + var(--content-safe-top) - 24px));

  /* ---- motion (measured iOS curves) ---- */
  --ease-out-ios: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  /* iOS sheet curve: moderate attack, long zero-velocity landing —
     the same family the interactive swipe settles on */
  --ease-push: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-push: 0.5s;

  color-scheme: light;
}

html[data-theme='dark'] {
  --ios-bg-grouped: #000000;         /* Telegram iOS dark: pure black */
  --ios-bg-card: #1c1c1d;            /* Telegram iOS dark section bg */
  --ios-label: #ffffff;
  --ios-label-2: rgba(235, 235, 245, 0.6);
  --ios-label-3: rgba(235, 235, 245, 0.3);
  --ios-separator: rgba(84, 84, 88, 0.6);
  --ios-tint: #3e88f7;
  --ios-section-header: #8d8e93;
  --ios-destructive: #eb5545;
  --ios-bottom-bar: #1d1d1d;

  --green: #30d158;
  --pink: #ff375f;
  --red: #ff453a;
  --orange: #ff9f0a;
  --yellow: #ffd60a;
  --indigo: #5e5ce6;
  --purple: #bf5af2;
  --teal: #64d2ff;
  --gray3: #5b5b60;
  --cell-press: #3a3a3c; /* systemGray4 dark */
  --fill-press: rgba(120, 120, 128, 0.32);
  --fill-3: rgba(118, 118, 128, 0.24);

  color-scheme: dark;
}

/* 0.33px hairlines only resolve on 3x displays; use 0.5px on 1x/2x so they don't vanish */
@media (max-resolution: 2.5dppx) {
  :root {
    --hairline: 0.5px;
  }
}

/* ============ reset & base ============ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg); /* one continuous background to the physical bottom edge */
  /* документ не скроллится никогда — скроллятся только внутренние контейнеры
     (.tab-view / .screen); иначе programmatic scrollIntoView и резиновый
     скролл iOS сдвигают весь апп вместе с заголовками */
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 22px;
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

input,
textarea {
  user-select: text;
  -webkit-user-select: text;
  font: inherit;
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ============ app shell ============ */

#app {
  position: fixed;
  inset: 0;
  height: var(--tg-viewport-stable-height, 100dvh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: height 0.25s var(--ease-out-ios);
}

/* Tab views live side by side; only the active one is visible.
   Each keeps its own scroll position (iOS behavior). */
.tabs-host {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.tab-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 64px);
  visibility: hidden;
}

.tab-view.active {
  visibility: visible;
}

/* iOS 26 scroll-edge effect: progressive blur+fade under the floating dock */
.tabs-host::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom) + 64px);
  background: linear-gradient(
    to top,
    var(--bg) 40%,
    color-mix(in srgb, var(--bg) 65%, transparent) 70%,
    transparent
  );
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent);
  mask-image: linear-gradient(to top, #000 60%, transparent);
  pointer-events: none;
  z-index: 10; /* under pushed screens (30) and the dock (40) */
  opacity: 1;
  transition: opacity var(--dur-push) ease;
}

/* hide the fade while a pushed screen covers the tabs */
.tabs-host.under-screen::after {
  opacity: 0;
}

/* ============ navigation bar (large title, iOS) ============ */

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: var(--top-inset);
  height: calc(44px + var(--top-inset));
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background 0.2s ease;
}

/* no top chrome at all: no blur slab, no gradient, no scroll title (user request) */
.nav-bar::before,
.nav-bar::after {
  content: none;
}

.nav-bar .nav-title {
  position: relative;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}


/* inline title appears on scroll only on pushed screens — tabs keep just the blur fade */
.screen.collapsed .nav-bar .nav-title {
  opacity: 1;
  transform: translateY(0);
}

.tab-view .nav-bar .nav-title {
  display: none;
}

.large-title {
  padding: 3px var(--inset-x) 8px;
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
}

/* compact mode hugs the Telegram header: the collapse bar in tab views is
   shorter than the 44px of pushed-screen nav bars, and the large title
   rises into its transparent zone */
.tab-view .nav-bar {
  height: calc(30px + var(--top-inset));
}

.tab-view .large-title {
  margin-top: -12px;
}

/* Pushed screens use inline (centered small) titles only */
.screen .nav-bar .nav-title {
  opacity: 1;
  transform: none;
}

/* Scroll edge effect как в iOS 26: контент, уезжающий под заголовок,
   размывается и растворяется, вместо сплошной плашки с линией.
   HIG: «Instead of applying a solid or semi-opaque background color beneath
   controls, use a scroll edge effect to visually elevate controls above
   content». Тот же рецепт, что у дока снизу (.tabs-host::after). */
.screen .nav-bar::before {
  content: '';
  position: absolute;
  inset: 0 0 -22px;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    var(--bg) 45%,
    color-mix(in srgb, var(--bg) 60%, transparent) 75%,
    transparent
  );
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.screen.collapsed .nav-bar::before {
  opacity: 1;
}

/* ============ pushed screens (UINavigationController feel) ============ */

.screens-host {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  /* own stacking context: the sticky nav-bar (z-index 20) of a LOWER screen
     must not paint over the opaque background of the screen above it */
  z-index: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--bg);
  pointer-events: auto;
  padding-bottom: calc(var(--safe-bottom) + 24px);
  transform: translate3d(100%, 0, 0);
}

.screen.entering {
  animation: screen-in var(--dur-push) var(--ease-push) forwards;
}

.screen.entered {
  transform: translate3d(0, 0, 0);
}

.screen.leaving {
  animation: screen-out var(--dur-push) var(--ease-push) forwards;
}

@keyframes screen-in {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes screen-out {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

/* underlying content parallax while a screen is pushed */
.tabs-host.under-screen > .tab-view.active {
  animation: under-in var(--dur-push) var(--ease-push) forwards;
}

/* while (and after) an edge swipe drives the parallax by hand, keep the
   keyframe animation off so it can't replay or fight the inline transform */
.tabs-host.dragging.under-screen > .tab-view.active {
  animation: none;
}

@keyframes under-in {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-30%, 0, 0); }
}

.tabs-host.under-screen-out > .tab-view.active {
  animation: under-out var(--dur-push) var(--ease-push) forwards;
}

@keyframes under-out {
  from { transform: translate3d(-30%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* ============ fade presentation (task flows) ============
   Deposit, withdraw, issue etc. open with the same feel as switching
   tabs in the dock: a quick fade with a gentle zoom, in place. */

.screen.fade {
  transform: none;
  opacity: 0;
}

.screen.fade.entered {
  transform: none;
  opacity: 1;
}

.screen.fade.entering {
  animation: screen-fade-in 0.24s var(--ease-out-ios) forwards;
}

.screen.fade.leaving {
  animation: screen-fade-out 0.2s ease forwards;
}

@keyframes screen-fade-in {
  from {
    opacity: 0.3;
    transform: scale(0.988);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes screen-fade-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0; /* all the way out — ending at 0.2 left a visible snap on removal */
    transform: scale(0.988);
  }
}

/* dim on the covered layer */
.screen-dim {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-push) var(--ease-push);
}

.screen-dim.on {
  opacity: 1;
}

/* ============ tab bar (iOS 26 floating dock) ============ */

/* compact centered pill — an even oval, not a full-width slab */
.tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  bottom: calc(var(--safe-bottom) + 14px);
  z-index: 40;
  height: var(--tabbar-h);
  padding: 5px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-radius: calc(var(--tabbar-h) / 2);
  background: color-mix(in srgb, var(--bottom-bar-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 0 0 var(--hairline) var(--separator);
  transition: transform var(--dur-push) var(--ease-push), opacity var(--dur-push) ease;
}

html[data-theme='dark'] .tab-bar {
  background: color-mix(in srgb, var(--bottom-bar-bg) 78%, transparent);
}

.tab-bar.hidden-under-screen {
  transform: translate3d(0, calc(100% + var(--safe-bottom) + 16px), 0);
  opacity: 0;
}

/* fade flows move at tab-switch speed — the dock keeps up */
.tab-bar.hide-fast {
  transition-duration: 0.22s, 0.22s;
}

/* opaque fallback where backdrop-filter is unavailable (some Android WebViews) */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .tab-bar {
    background: color-mix(in srgb, var(--bottom-bar-bg) 97%, transparent);
  }
}

.tab-item {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--gray);
  transition: color 0.2s ease;
}

.tab-item.active {
  color: var(--tint);
}

/* liquid pill that glides between tabs */
.tab-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: 76px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  transition: transform 0.32s cubic-bezier(0.3, 1.2, 0.4, 1);
  pointer-events: none;
}

/* gentle page transition on tab change */
@keyframes tab-in {
  from {
    opacity: 0.3;
    transform: scale(0.988);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tab-view.tab-enter {
  animation: tab-in 0.24s var(--ease-out-ios);
}

.tab-item .tab-ic {
  display: flex;
}

.tab-item svg {
  width: 25px;
  height: 25px;
  display: block;
}

/* ---- animated tab glyphs (SF-style, native motion per icon) ---- */

/* Кошелёк: springy wiggle */
.tab-item.active .tab-ic-home svg {
  animation: ic-wallet 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes ic-wallet {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.12) rotate(-7deg); }
  70% { transform: scale(1.04) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Карты: передняя карта выезжает из стопки */
.tab-item.active .tab-ic-cards .i-front {
  transform-box: fill-box;
  transform-origin: center;
  animation: ic-card-slide 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes ic-card-slide {
  0% { transform: translate(0, 0); }
  40% { transform: translate(3px, 3px); }
  100% { transform: translate(0, 0); }
}

/* История: часы «тикают» */
.tab-item.active .tab-ic-history svg {
  animation: ic-clock 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes ic-clock {
  0% { transform: rotate(0); }
  30% { transform: rotate(-14deg); }
  65% { transform: rotate(8deg); }
  100% { transform: rotate(0); }
}

/* Настройки: подкрут в едином ритме с остальными глифами */
.tab-item.active .tab-ic-settings svg {
  animation: ic-gear 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes ic-gear {
  0% { transform: rotate(0); }
  35% { transform: rotate(32deg); }
  70% { transform: rotate(-6deg); }
  100% { transform: rotate(0); }
}

.tab-item .tab-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  letter-spacing: 0.06px;
}

/* ============ DOM fallbacks (browser preview only) ============ */

/* ============ нижняя кнопка действия (вместо нативной MainButton) ============
   Геометрия снята с Telegram Wallet: капсула 52pt, радиус 22, боковой отступ
   на 4pt шире контентного, 27pt от физического низа (безопасная зона 34 минус
   7). Панель живёт внутри #app и едет вместе с ним за клавиатурой. Под кнопкой
   тот же scroll-edge (размытие + растворение), что и под доком. */
#dom-main-bar {
  /* как у системных экранов iOS 26 (Books, Fitness, Redeem): капсула 52pt,
     ~38pt от физического низа (safe area + 4), боковые отступы ~10% ширины */
  --bar-bottom: var(--main-bar-bottom);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60; /* над экранами (30) и доком (40) */
  padding: 40px 38px var(--bar-bottom);
  pointer-events: none;
  transform: translate3d(0, 24px, 0);
  opacity: 0;
  /* visibility, а не только opacity: прозрачная панель всё равно ловила тапы
     (она лежит над доком) и открывала экран прошлой кнопки. Снимаем её из
     hit-testing после анимации ухода, поэтому задержка равна длительности */
  visibility: hidden;
  transition: transform 0.28s var(--ease-out-ios), opacity 0.22s ease, visibility 0s linear 0.28s;
}

#dom-main-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    var(--bg) 42%,
    color-mix(in srgb, var(--bg) 65%, transparent) 70%,
    transparent
  );
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent);
  mask-image: linear-gradient(to top, #000 60%, transparent);
}

#dom-main-bar.visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.28s var(--ease-out-ios), opacity 0.22s ease, visibility 0s;
}

/* кликабельна только показанная кнопка */
#dom-main-bar.visible #dom-main-button {
  pointer-events: auto;
}

/* клавиатура открыта: безопасной зоны под ней нет, прижимаемся к ней */
html.kbd-open #dom-main-bar {
  --bar-bottom: 8px;
  padding-top: 16px;
}

#dom-main-button {
  width: 100%;
  height: 52px;
  border-radius: 26px; /* полная капсула, как у системных кнопок iOS 26 */
  /* «стеклянный» акцент (.glassProminent) по референсу Apple: тело с едва
     заметным перепадом (4%), а свет сверху - слоем .glass в режиме Overlay:
     на насыщенном синем он не белит, а уводит верх в голубизну. Белого
     ребра у Apple нет. Всё из цвета самой кнопки - работает с любой темой. */
  background: linear-gradient(180deg, oklch(from var(--btn) calc(l + 0.012) c h) 0%, oklch(from var(--btn) calc(l - 0.012) c h) 100%);
  isolation: isolate;
  /* режем по капсуле сами: в Safari overflow:hidden + border-radius не
     обрезает анимированный (композитный) слой блика - он вылезал квадратом */
  clip-path: inset(0 round 26px);
  color: var(--btn-text);
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s var(--ease-out-ios), filter 0.18s ease, opacity 0.2s ease;
}

#dom-main-button:active,
#dom-main-button.is-pressed {
  transform: scale(0.975);
  filter: brightness(0.86);
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

#dom-main-button:disabled {
  opacity: 0.5;
  transform: none;
  filter: none;
}

/* свет по референсу Apple: тело плоское, а по верхней и нижней кромке идёт
   тонкая светлая полоска, огибающая капсулу и сходящая на нет к торцам.
   Inset-тени со смещением только по вертикали ложатся ровно так; режим
   Overlay - чтобы на синем полоска уходила в голубой, а не в белый. */
#dom-main-button .glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0.67px 0 rgba(255, 255, 255, 0.32),
    inset 0 -0.67px 0 rgba(255, 255, 255, 0.26);
  mix-blend-mode: overlay;
  pointer-events: none;
}

#dom-main-button .lbl {
  position: relative;
  z-index: 1;
}

#dom-main-button.loading .lbl {
  opacity: 0.6;
}

#dom-main-button.loading::after {
  content: '';
  width: 18px;
  height: 18px;
  flex: none;
  border: 2.5px solid color-mix(in srgb, var(--btn-text) 35%, transparent);
  border-top-color: var(--btn-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* блик, как has_shine_effect у нативной кнопки: редкая мягкая полоса света
   слева направо; лежит под текстом, обрезается clip-path кнопки */
#dom-main-button.shine::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
  animation: btn-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btn-shine {
  0%, 62% { transform: translateX(0); }
  100% { transform: translateX(360%); }
}

/* контент не заезжает под кнопку и её scroll-edge */
html.has-dom-main-button .screen,
html.has-dom-main-button .tab-view {
  padding-bottom: calc(var(--main-bar-bottom) + var(--main-btn-h) + 14px);
}

#dom-back-button {
  position: fixed;
  top: 4px;
  left: 4px;
  z-index: 110;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tint);
  background: color-mix(in srgb, var(--bg-section) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 50%;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============ scrollbars off (webview feel) ============ */

.tab-view::-webkit-scrollbar,
.screen::-webkit-scrollbar {
  display: none;
}