/* ---------- mobile app shell (field-capture experience) ----------
   The shell fills the viewport and only .mmain scrolls, so the top and
   bottom bars can never move (avoids iOS fixed-position/rubber-band drift). */
.is-mobile body { overflow: hidden; overscroll-behavior: none; background: var(--bg-2); }
.is-mobile body #app { height: 100%; overflow: hidden; }
.is-mobile body { --mobile-dock-gap: 10px; }
@media (display-mode: standalone) {
  .is-mobile body { --mobile-dock-gap: 4px; }
}
.mshell {
  position: fixed; inset: 0; width: 100%; height: auto;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2);
}
.mtopbar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 8px calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left));
  padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.mtopbar .logo { padding: 0; }
.mmain {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 14px calc(16px + env(safe-area-inset-right)) 20px calc(16px + env(safe-area-inset-left));
  max-width: 640px; width: 100%; margin: 0 auto;
  background: var(--bg);
}
.mmain.capture-main {
  overflow: hidden;
}
.mmain.capture-main .cap-screen {
  height: 100%;
  min-height: 100%;
}
/* Bottom dock: one component, single radius/shadow system,
   equal tab tracks either side of the round shutter. */
.mtabbar {
  flex-shrink: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 4px;
  width: min(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right), 480px);
  margin: 10px auto calc(var(--mobile-dock-gap, 10px) + env(safe-area-inset-bottom));
  padding: 6px;
  background: rgba(20, 24, 33, .92); border: 1px solid rgba(255, 255, 255, .07); border-radius: 30px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.mtab {
  position: relative; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; border-radius: 24px;
  color: var(--text-3); font-size: 11px; font-weight: 600; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, background-color .18s ease, transform .12s ease;
}
.mtab .ic { display: grid; place-items: center; }
.mtab .ic svg { width: 22px; height: 22px; }
.mtab:active { transform: scale(.95); }
.mtab.active { color: var(--accent-2); background: rgba(108, 124, 255, .12); }
.mshutter {
  width: 56px; height: 56px; align-self: center; margin: 0 8px;
  display: grid; place-items: center; color: #fff;
  border: none; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 16px rgba(108, 124, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .18s ease, filter .12s ease;
}
.mshutter svg { width: 24px; height: 24px; }
.mshutter-face { display: grid; place-items: center; }
.mshutter-ring { display: none; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; place-items: center; }
.mshutter-ring::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.mshutter.closed { box-shadow: 0 0 0 3px rgba(108, 124, 255, .3), 0 6px 16px rgba(108, 124, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .28); }
.mshutter.opening { animation: shutter-pulse 1.1s ease-in-out infinite; }
.mshutter.opening .mshutter-face { opacity: .55; }
@keyframes shutter-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(108, 124, 255, .3), 0 6px 16px rgba(108, 124, 255, .38); }
  50% { box-shadow: 0 0 0 8px rgba(108, 124, 255, .14), 0 6px 16px rgba(108, 124, 255, .38); }
}
.mshutter.live {
  background: linear-gradient(180deg, rgba(30, 34, 46, .98), rgba(18, 21, 30, .98));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 6px 16px rgba(0, 0, 0, .35);
}
.mshutter.live .mshutter-face { display: none; }
.mshutter.live .mshutter-ring { display: grid; }
.mshutter.muted {
  color: var(--text-2);
  background: linear-gradient(180deg, rgba(56, 63, 82, .98), rgba(36, 42, 56, .98));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
  filter: saturate(.45);
}
.mshutter:active { transform: scale(.92); filter: brightness(.94); }
.mmain .toolbar .search { max-width: none; }
/* 16px inputs prevent iOS auto-zoom on focus, regardless of screen width */
.is-mobile .field input, .is-mobile .field textarea, .is-mobile .field select,
.is-mobile .search, .is-mobile .imgcard select { font-size: 16px; }
.is-mobile #toasts { left: 12px; right: 12px; bottom: calc(136px + env(safe-area-inset-bottom)); align-items: stretch; }