/* Final mobile PWA polish for the physical iPhone validation build. */

.bottom-nav {
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  height: 72px !important;
  padding: 7px 10px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(27,27,27,.68) !important;
  -webkit-backdrop-filter: saturate(145%) blur(28px) !important;
  backdrop-filter: saturate(145%) blur(28px) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.22) !important;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}

.nav-item {
  width: 52px !important;
  height: 52px !important;
  justify-self: center;
  border-radius: 20px !important;
  color: rgba(255,255,255,.58) !important;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.nav-item.active:not(.new) {
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}

.nav-item.new {
  width: 58px !important;
  height: 58px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

.nav-label {
  display: none !important;
}

html[data-theme="light"] .bottom-nav {
  border-color: rgba(0,0,0,.10) !important;
  background: rgba(248,248,248,.72) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.13) !important;
}

html[data-theme="light"] .nav-item {
  color: rgba(17,17,17,.48) !important;
}

html[data-theme="light"] .nav-item.active:not(.new) {
  color: #111 !important;
  background: rgba(0,0,0,.07) !important;
}

html[data-theme="light"] .nav-item.new {
  background: #111 !important;
  color: #fff !important;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] .bottom-nav {
    border-color: rgba(0,0,0,.10) !important;
    background: rgba(248,248,248,.72) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.13) !important;
  }
  html[data-theme="system"] .nav-item { color: rgba(17,17,17,.48) !important; }
  html[data-theme="system"] .nav-item.active:not(.new) { color:#111 !important; background:rgba(0,0,0,.07) !important; }
  html[data-theme="system"] .nav-item.new { background:#111 !important; color:#fff !important; }
}

/* The base rule only replaced border-top, leaving the native button border visible in Light mode. */
.settings-row {
  border: 0 !important;
  border-top: 1px solid var(--soft) !important;
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
}

/* Keep the photo action surface above the scroller and remove the negative nav-space margin on focus screens. */
.picker-actions {
  z-index: 120 !important;
  bottom: 0 !important;
  margin: 18px -18px 0 !important;
  padding: 14px 18px max(16px, var(--safe-bottom)) !important;
  pointer-events: auto;
}

.picker-actions .primary[aria-busy="true"] {
  opacity: .72;
}

/* Reduce paint/layout work during direct manipulation. */
.canvas-strip {
  contain: layout paint style;
  transform: translateZ(0);
}

.obj {
  will-change: left, top, width, height, transform;
  backface-visibility: hidden;
}

.obj.image img {
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (min-width: 980px) {
  .bottom-nav {
    left: 22px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: 72px !important;
    height: auto !important;
    transform: translateY(-50%) translateZ(0) !important;
    border-radius: 30px !important;
    padding: 8px !important;
  }
}