/* ==========================================================================
   v63 — Mini App на компьютере (узкое окно Telegram Desktop), кнопки мини-аппа
   в шапке, «Открыть в браузере» первым в «Настройках», устойчивость к смене
   размера окна, график курса обмена. Грузится после v62.css; приём :root:not(#v).
   ========================================================================== */

/* 1. Кнопки мини-аппа в шапке: «Открыть в браузере» и (на ПК) «Развернуть» */
:root:not(#v) .hdr-tg{display:contents}
:root:not(#v) .hdr-tg__btn{width:40px;height:40px;min-width:40px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  color:var(--text);background:var(--lq-fill);box-shadow:var(--lq-rim)}
:root:not(#v) .hdr-tg__btn:hover{background:color-mix(in srgb,var(--text) 8%,var(--lq-fill))}
:root:not(#v) .hdr-tg__btn .i{width:18px;height:18px}

/* 2. «Настройки» (⋮): первая — «Открыть в браузере», ниже «Развернуть окно» */
:root:not(#v) .set-browser{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;margin:0 0 10px;min-height:50px}
:root:not(#v) .set-browser .i{width:18px;height:18px;flex:none}

/* 3. Телефон и узкое окно: нижние стикеры героя — над панелью вкладок, не под ней */
@media (max-width:760px){
  html.has-tabbar:not(#v) .sticker--3{bottom:calc(96px + env(safe-area-inset-bottom))}
  html.has-tabbar:not(#v) .sticker--4{bottom:calc(104px + env(safe-area-inset-bottom))}
  /* мини-апп: нижний отступ Telegram (жест «домой», панель клиента) */
  html.telegram-mini-app:not(#v) .tabbar{bottom:calc(8px + max(env(safe-area-inset-bottom), var(--tg-bottom, 0px)))}
}

/* 4. Telegram на компьютере: окно мини-аппа ~380–480px, управление мышью.
      Вёрстка — как на телефоне (вкладки снизу), но под мышь: тонкая прокрутка,
      наведение на вкладках, без «пальцевых» увеличенных отступов. */
html.tg-desktop:not(#v){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--tone,var(--text)) 22%,transparent) transparent}
html.tg-desktop:not(#v) ::-webkit-scrollbar{width:8px;height:8px}
html.tg-desktop:not(#v) ::-webkit-scrollbar-thumb{border-radius:8px;background:color-mix(in srgb,var(--tone,var(--text)) 20%,transparent)}
html.tg-desktop:not(#v) ::-webkit-scrollbar-track{background:transparent}
@media (max-width:760px){
  html.tg-desktop:not(#v) .tabbar__item:hover{color:var(--text)}
  html.tg-desktop:not(#v) .tabbar__item:hover .tabbar__ic{background:color-mix(in srgb,var(--tone,var(--text)) 7%,transparent)}
  html.tg-desktop:not(#v) .tabbar{left:50%;right:auto;width:min(460px,calc(100% - 20px));translate:-50% 0}
  html.tg-desktop.nav-open:not(#v) .tabbar{translate:-50% 120px}
  html.tg-desktop:not(#v) .btn{min-height:44px}
  html.tg-desktop:not(#v) .ghr__title--page,html.tg-desktop:not(#v) .ghr__title{font-size:clamp(40px,13vw,64px)}
}
/* развёрнутое окно Telegram Desktop — обычная вёрстка сайта, кнопка «свернуть» в шапке */
html.tg-desktop.tg-fullscreen:not(#v) body{padding-top:var(--tg-top,0px)}

/* 5. Курс обмена: график под калькулятором */
:root:not(#v) .xch-chart{margin:8px 0 clamp(36px,6vw,64px)}

/* 6. Графики-«пульс» в узком окне: подписи осей читаемые (SVG сжимается, текст в нём — тоже),
      три вкладки — две в ряд и третья на всю ширину, без пустой клетки */
@media (max-width:760px){
  :root:not(#v) .pulse__y,:root:not(#v) .pulse__x{font-size:14px}
  :root:not(#v) .pulse__tabs[style*="--n:3"] .pulse__tab:last-child{grid-column:1 / -1;border-right:0}
}
@media (max-width:560px){
  :root:not(#v) .pulse__y,:root:not(#v) .pulse__x{font-size:18px}
}