/* UX1 — Telegram shell, safe areas, accessibility and shared states. */
:root {
  --tma-safe-top: env(safe-area-inset-top, 0px);
  --tma-safe-right: env(safe-area-inset-right, 0px);
  --tma-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tma-safe-left: env(safe-area-inset-left, 0px);
  --tma-content-top: 0px;
  --tma-content-bottom: 0px;
  --tma-viewport-height: 100dvh;
  --tma-viewport-stable-height: 100dvh;
  --button-text: var(--tg-theme-button-text-color, #fff);
  --destructive: var(--tg-theme-destructive-text-color, #d94b43);
}

html { color-scheme: light dark; }
body {
  min-height: var(--tma-viewport-stable-height, var(--tg-viewport-stable-height, 100dvh));
  padding-right: max(var(--tma-safe-right), env(safe-area-inset-right, 0px));
  padding-bottom: calc(64px + max(var(--tma-safe-bottom), env(safe-area-inset-bottom, 0px)));
  padding-left: max(var(--tma-safe-left), env(safe-area-inset-left, 0px));
}
#topbar { padding-top: calc(10px + max(var(--tma-content-top), var(--tma-safe-top))); padding-right:calc(16px + var(--tma-safe-right));padding-left:calc(16px + var(--tma-safe-left)); }
main { min-height:calc(var(--tma-viewport-stable-height) - 64px);padding-right:calc(16px + var(--tma-safe-right));padding-bottom:calc(104px + max(var(--tma-content-bottom),var(--tma-safe-bottom)));padding-left:calc(16px + var(--tma-safe-left)); }
#tabbar { padding-bottom: max(var(--tma-content-bottom), var(--tma-safe-bottom)); }
.modal-sheet { max-height:calc(var(--tma-viewport-stable-height,var(--tg-viewport-stable-height,100dvh)) - max(var(--tma-content-top),var(--tma-safe-top)));margin-right:var(--tma-safe-right);margin-left:var(--tma-safe-left); }
.booking-dock,
.filter-sheet footer,
.editor-actions { padding-bottom: calc(10px + max(var(--tma-content-bottom), var(--tma-safe-bottom))); }

/* All frequent controls meet the 44px internal TMA target. */
.btn, #tabbar button, .seg button, .popup-anchor-nav button,
.filter-radio-row label, .payment-choice-pills label { min-height: 44px; }
.btn.small { min-height: 44px; padding-block: 10px; }
.modal-close, .booking-route, .filter-sheet header button { width:44px; height:44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 75%, white);
  outline-offset: 2px;
}

/* Native Telegram MainButton replaces only the mirrored final CTA. */
body.tma-native-main .tma-main-mirrored { visibility:hidden!important; pointer-events:none!important; }
body.tma-native-main main{padding-bottom:calc(128px + max(var(--tma-content-bottom),var(--tma-safe-bottom)))}

.app-progress { position:fixed; z-index:160; inset:0 0 auto; height:3px; opacity:0; pointer-events:none; transition:opacity .15s; }
.app-progress i { display:block; width:36%; height:100%; border-radius:999px; background:var(--accent); transform:translateX(-110%); }
.app-progress.active { opacity:1; }
.app-progress.active i { animation:app-progress 1.05s ease-in-out infinite; }
@keyframes app-progress { 50% { transform:translateX(185%); } 100% { transform:translateX(390%); } }

.app-network-state { position:fixed; z-index:155; top:calc(8px + max(var(--tma-content-top), var(--tma-safe-top))); right:12px; left:12px; display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:9px; max-width:616px; margin:auto; padding:10px 11px; border:1px solid rgba(224,91,75,.25); border-radius:15px; color:var(--text); background:var(--card); box-shadow:0 10px 34px rgba(25,37,43,.18); }
.app-network-state > span { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:#fff; background:var(--bad); font-weight:900; }
.app-network-state b,.app-network-state small { display:block; }
.app-network-state small { color:var(--hint); font-size:11px; }
.app-network-state button { min-height:40px; border:0; border-radius:10px; padding:0 12px; color:var(--button-text); background:var(--accent); font:inherit; font-size:12px; font-weight:800; }

.route-skeleton { display:grid; gap:12px; padding-top:12px; }
.route-skeleton > i { display:block; width:48%; height:28px; border-radius:9px; }
.route-skeleton article { display:grid; grid-template-columns:96px 1fr; gap:12px; min-height:118px; border-radius:17px; padding:12px; background:var(--card); }
.route-skeleton article::before { content:''; border-radius:13px; background:var(--bg); }
.route-skeleton article span { display:block; height:13px; margin:8px 0; border-radius:7px; background:var(--bg); }
.route-skeleton article span:nth-child(2) { width:72%; }
.route-skeleton i,.route-skeleton article::before,.route-skeleton article span { background-image:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 45%,transparent 70%); background-color:var(--bg); background-size:220% 100%; animation:skeleton-wave 1.3s linear infinite; }
@keyframes skeleton-wave { to { background-position-x:-220%; } }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
@media(max-width:430px){#topbar{padding-right:calc(8px + var(--tma-safe-right));padding-left:calc(8px + var(--tma-safe-left))}main{padding-right:calc(8px + var(--tma-safe-right));padding-left:calc(8px + var(--tma-safe-left))}}
@media (prefers-color-scheme: dark) {
  .conversation-message { background:color-mix(in srgb, var(--card) 88%, white 12%); }
  .conversation-message.mine { background:color-mix(in srgb, var(--accent) 24%, var(--card)); }
  .pilot-banner { color:#f4d98a; background:#403817; border-color:#665b28; }
}