/* mobile.css — SPACE BET mobile-specific styles (loaded after styles.css) */

/* Stage: center the device, scale to fit viewport */
html, body { height: 100%; }
body {
  background: #e9eaee;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}
[data-theme="dark"] body { background: #0b0b0d; }

/* Full-bleed mode (no iPhone bezel): app fills the viewport, capped to a
   phone-width column on wide screens, using device safe-area insets. */
html.bare-mobile, html.bare-mobile body { height: 100%; background: var(--tb-bg-alt); }
html.bare-mobile body { display: block; margin: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
html.bare-mobile #root { display: block; height: 100vh; height: 100dvh; }
html.bare-mobile .tb-app {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
}

#root { display: flex; align-items: center; justify-content: center; }

.tb-stage {
  transform-origin: center center;
  transition: transform .18s cubic-bezier(.2,0,0,1);
}

/* The app fills the device content area */
.tb-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--tb-bg-alt);
  overflow: hidden;
  font-family: var(--w-font-sans);
  color: var(--tb-text);
}

/* Scrollable content region */
.tb-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.tb-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tb-scroll { scrollbar-width: none; }

/* hide horizontal scrollbars on chip rails */
.tb-hscroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tb-hscroll::-webkit-scrollbar { display: none; height: 0; }

/* Tap feedback */
.tb-press { transition: transform .12s cubic-bezier(.2,0,0,1), background .12s, opacity .12s; -webkit-tap-highlight-color: transparent; }
.tb-press:active { transform: scale(0.97); opacity: 0.9; }
.tb-press-sm:active { transform: scale(0.985); }

/* Sheet / overlay */
@keyframes tb-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes tb-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tb-screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tb-screen-in { animation: tb-screen-in .26s cubic-bezier(.2,0,0,1) both; }
.tb-overlay { animation: tb-overlay-in .2s ease both; }
.tb-sheet { animation: tb-sheet-up .32s cubic-bezier(.2,0,0,1) both; }

/* count badge pulse */
@keyframes tb-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.tb-pop { animation: tb-pop .28s cubic-bezier(.2,0,0,1); }

/* shimmer line */
.tb-divider { height: 8px; background: var(--tb-bg-alt); }
[data-theme="dark"] .tb-divider { background: #0e0e10; }

/* icon helpers in dark already handled by styles.css .tb-icon */