/* Beeply MiniApp viewport v0.10.1.2.1.
   Loaded after compiled CSS. The native host owns system bars; our app owns
   only its actual WebView, with Telegram fullscreen insets supplied by Bridge. */
html[data-beeply-miniapp] {
  color-scheme: light;
  background: #f6f7f9;
  --beeply-miniapp-top: 0px;
  --beeply-miniapp-bottom: 0px;
  --safe-top: 0px;
  --safe-bottom: var(--beeply-miniapp-bottom);
}
html[data-beeply-miniapp] body,
html[data-beeply-miniapp] #app { background: #f6f7f9; color: #111827; min-height: 100dvh; }
html[data-beeply-miniapp] .app-shell {
  box-sizing: border-box;
  min-height: 100dvh;
  padding-top: var(--beeply-miniapp-top);
}
html[data-beeply-miniapp] .app-shell > header {
  top: var(--beeply-miniapp-top);
  padding-top: 0;
  border-radius: 0;
  flex-shrink: 0;
}
html[data-beeply-miniapp] .app-shell-chat {
  position: fixed;
  inset: var(--beeply-miniapp-top) 0 0 0;
  width: 100%;
  height: auto;
  min-height: 0;
  padding-top: 0;
}
html[data-beeply-miniapp] .app-shell-chat > header { top: 0; padding-top: 0; }
html[data-beeply-miniapp] .app-route-main { padding-top: 8px; }
html[data-beeply-miniapp] .app-route-main-chat { padding: 0; }
/* No second fake bottom safe area in MAX. In fullscreen Telegram only real
   native insets are reserved (not 10px + insets twice). */
html[data-beeply-miniapp] .glass-nav.safe-bottom {
  position: fixed;
  bottom: 0 !important;
  padding-bottom: var(--beeply-miniapp-bottom) !important;
  box-sizing: border-box;
}
html[data-beeply-miniapp] .chat-composer {
  padding-bottom: max(8px, var(--beeply-miniapp-bottom));
}
html[data-beeply-miniapp="max"] .glass-nav.safe-bottom { padding-bottom: 0 !important; }
html[data-beeply-miniapp="max"] .mobile-sheet { padding-bottom: 16px; }
@media (min-width: 800px) {
  html[data-beeply-miniapp] .app-route-main-chat { padding: 0; }
  html[data-beeply-miniapp] .chat-screen { border-radius: 0; border: 0; box-shadow: none; }
}
/* Login/register are already inside a scrolling WebView: avoid full-screen
   vertical centering and large empty space above the form. */
html[data-beeply-miniapp] .app-route-main [class*="min-h-[calc(100dvh-100px)]"] {
  min-height: 0;
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 28px;
}
html[data-beeply-miniapp] .app-route-main [class*="min-h-[calc(100dvh-100px)]"] > div {
  max-width: 440px;
}
html[data-beeply-miniapp] .app-route-main .page-title { font-size: 1.45rem; }
html[data-beeply-miniapp] .app-route-main .page-subtitle { line-height: 1.45; }
html[data-beeply-miniapp] .app-route-main .app-section { overflow-wrap: anywhere; }
/* Web Push is a separate browser/PWA delivery channel: it cannot be enabled
   from Telegram/MAX's embedded browser. Never label it as a connected MiniApp. */
html[data-beeply-miniapp] .beeply-miniapp-hide-push { display: none !important; }
/* Inline binding/diagnostic action, rendered only on Channels page. */
.beeply-miniapp-inline {
  margin: 12px 16px 18px;
  padding: 15px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #eff6ff;
  color: #1e3a8a;
  font: 500 13px/1.5 Inter, system-ui, sans-serif;
}
.beeply-miniapp-inline--error { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.beeply-miniapp-inline strong { display:block; margin:0 0 4px; font-size:14px; }
.beeply-miniapp-inline p { margin:0 0 12px; }
.beeply-miniapp-inline button {
  min-height: 42px;
  padding: 10px 16px;
  border:0;
  border-radius: 11px;
  font: 700 13px/1.2 Inter, system-ui, sans-serif;
  background: #155dfc;
  color: #fff;
}
.beeply-miniapp-inline button:disabled { opacity: .5; }
.beeply-miniapp-inline [role="alert"] { display:block; margin:8px 0 0; }
@media (min-width: 800px) {
  .beeply-miniapp-inline { margin-left: 0; margin-right: 0; }
}


/* v0.10.1.2.2: Opaque Telegram fullscreen top scrim. Native toolbar
   overlays the WebView; do not let scrolled page content appear behind it. */
html[data-beeply-miniapp="telegram"][data-beeply-telegram-fullscreen="yes"] body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--beeply-miniapp-top);
  background: #ffffff;
  pointer-events: none;
  z-index: 49;
}
html[data-beeply-miniapp="telegram"] .app-shell > header {
  background: #fff !important;
  z-index: 50;
}
/* MAX may request a dark native theme. The Beeply owner UI is currently
   designed as a light theme, including its modal sheets and forms. */
html[data-beeply-miniapp="max"] {
  color-scheme: only light !important;
  background: #f6f7f9 !important;
}
html[data-beeply-miniapp="max"] body,
html[data-beeply-miniapp="max"] #app,
html[data-beeply-miniapp="max"] .app-shell { background: #f6f7f9 !important; color: #111827 !important; }
html[data-beeply-miniapp="max"] .mobile-sheet {
  color-scheme: only light !important;
  background: #ffffff !important;
  color: #111827 !important;
}
html[data-beeply-miniapp="max"] .mobile-sheet input,
html[data-beeply-miniapp="max"] .mobile-sheet textarea { color-scheme: only light; }