/*
 * Purple · Host shell layout
 *
 * The host owns:
 *  · the .phone frame (desktop only — mobile is fullscreen)
 *  · iframe positioning + visibility (.frame.active)
 *  · tab-bar (3 tabs: Pull / Главна / Налаштування)
 *  · host-wide toast
 *
 * Iframes own their own scrolling + content layout. The shell never
 * scrolls the document body — that would break iOS rubber-band inside
 * Telegram Mini App.
 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  height: 100%;
  background: var(--page-bg);
  font-family: var(--f);
  color: var(--t1);
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  transition: background .35s;
}

.stage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: none;
  background: radial-gradient(ellipse 520px 720px at 50% 50%, rgba(191,153,247,.06) 0%, transparent 70%);
}

[data-theme="light"] .stage {
  background: none;
}

.phone {
  width: 380px;
  height: 780px;
  max-height: calc(100vh - 48px);
  background: var(--bg);
  border-radius: 46px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 0 0 4px rgba(255,255,255,.025),
    0 0 60px -10px rgba(191,153,247,.08);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

[data-theme="light"] .phone {
  box-shadow: 0 40px 100px -20px rgba(124,58,237,.18);
  border-color: transparent;
}

@media (max-width: 520px) {
  .stage {
    padding: 0;
  }
  .phone {
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .phone .notch {
    display: none;
  }
}

.notch {
  display: none;   /* design landed on no-notch for now */
}

.frames {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  visibility: hidden;
}

.frame.active {
  visibility: visible;
}

/* Onboarding is a takeover screen — covers the tab-bar too. */
#frame-onboarding {
  z-index: 70;
  border-radius: 46px;
}
.phone[data-onboarding="1"] .tab-bar {
  display: none !important;
}

.tab-bar {
  position: absolute;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 4px;
  background: var(--s-elev);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 0.5px solid var(--sep);
  border-radius: 28px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.14);
  transform: translateY(0);
  transition: transform .35s var(--ease), opacity .25s;
}

[data-theme="light"] .tab-bar {
  box-shadow: 0 12px 32px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
}

.tab-bar.hidden {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--t3);
  font-family: var(--f);
  transition: color .15s, transform .12s;
  position: relative;
}

.tab:active {
  transform: scale(.92);
}

.tab.on {
  color: var(--p);
}

.tab svg {
  width: 22px;
  height: 22px;
}

.tab-l {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.host-toast {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 10px 16px;
  border-radius: 99px;
  background: var(--s-elev);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 0.5px solid var(--sep);
  color: var(--t1);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  z-index: 80;
  transition: all .25s;
  max-width: 280px;
  text-align: center;
}

.host-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dev-info {
  position: fixed;
  bottom: 14px;
  left: 14px;
  font-size: 10px;
  color: rgba(255,255,255,.32);
  font-family: ui-monospace, 'SF Mono', monospace;
  letter-spacing: .02em;
  cursor: pointer;
  z-index: 1;
}

@media (max-width: 520px) {
  .dev-info {
    display: none;
  }
}