:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body { height: 100%; }
body { -webkit-text-size-adjust: 100%; }

/* lock scrolling when sidebar open */
body.fb-lock {
  overflow: hidden;
  touch-action: none;
}

/* ===== Mobile Topbar: nicer, slightly blurred, readable ===== */
.fb-topbar {
  padding-top: var(--safe-top);

  /* slight blur + better contrast */
  background: rgba(9, 9, 11, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(63, 63, 70, 0.55);
}

/* give the header content a bit more breathing room on small screens */
@media (max-width: 420px) {
  .fb-topbar .mx-auto {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
}

/* If your subtitle looks cramped, hide it on very small widths */
@media (max-width: 360px) {
  .fb-topbar .text-\[11px\] {
    display: none !important;
  }
}

/* sidebar safe-area + better mobile scroll */
.fb-sidebar {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  overscroll-behavior: contain;
}

/* main padding bottom for gesture bars */
.fb-main {
  padding-bottom: calc(1.25rem + var(--safe-bottom));
}

/* iOS input zoom prevention */
input, select, textarea, button {
  font-size: 16px;
}

/* optional: nicer scrollbar desktop */
@media (min-width: 1024px) {
  .fb-sidebar ::-webkit-scrollbar { width: 10px; }
  .fb-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
  }
  .fb-sidebar ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.14);
  }
}