/* Live View — September 2026 reference implementation.
   Final preview-only visual layer; camera and action behaviours remain unchanged. */

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-layout-v3 {
  background: #070806 !important;
  background-image: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-layout-v3 {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f5f5f2 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-topbar {
  position: relative !important;
  z-index: 40 !important;
  flex: 0 0 calc(66px + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(66px + env(safe-area-inset-top, 0px)) !important;
  padding: env(safe-area-inset-top, 0px) 12px 0 !important;
  grid-template-columns: 42px minmax(0,1fr) 42px !important;
  gap: 9px !important;
  border: 0 !important;
  background: #080907 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-close,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-connection {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(255,255,255,.095) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(27,28,25,.96), rgba(15,16,14,.98)) !important;
  color: #a8aaa7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 18px rgba(0,0,0,.18) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-close:active {
  transform: scale(.97) !important;
  background: #232421 !important;
  color: #f4f4f1 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-close svg,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-connection svg {
  width: 25px !important;
  height: 25px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-connection.online {
  border-color: rgba(255,255,255,.095) !important;
  color: #a8aaa7 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-status-pill,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-status-pill:not(.recording) {
  min-width: 88px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 999px !important;
  gap: 8px !important;
  background: linear-gradient(145deg, rgba(24,25,22,.96), rgba(15,16,14,.94)) !important;
  color: #f5f5f2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-status-pill.recording {
  min-width: 145px !important;
  border-color: rgba(255,71,71,.28) !important;
  background: linear-gradient(145deg, rgba(35,23,22,.96), rgba(18,16,14,.96)) !important;
  color: #ff4747 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-status-pill strong {
  color: inherit !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: .11em !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-status-dot,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-status-pill:not(.recording) .live-v3-status-dot {
  width: 8px !important;
  height: 8px !important;
  flex-basis: 8px !important;
  background: #ff4747 !important;
  box-shadow: 0 0 7px rgba(255,71,71,.22) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-feed {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #11120f !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-feed::after {
  height: 20% !important;
  background: linear-gradient(180deg, transparent 0%, rgba(7,8,6,.05) 48%, rgba(7,8,6,.30) 100%) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-camera-frame .camera-photo {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  filter: none !important;
  transform: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-camera-tabs {
  top: 18px !important;
  bottom: auto !important;
  left: 50% !important;
  width: 258px !important;
  height: 45px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, rgba(28,29,26,.94), rgba(15,16,14,.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-camera-tabs button {
  position: relative !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  background: transparent !important;
  color: #999b98 !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 470 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-camera-tabs button:not(:last-child)::before {
  top: 12px !important;
  bottom: 12px !important;
  background: rgba(255,255,255,.12) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-camera-tabs button.active {
  color: #b9f33d !important;
  background: transparent !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-camera-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 7px !important;
  width: 12px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #b9f33d !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0 6px rgba(185,243,61,.18) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-quality-notice {
  border-color: rgba(211,164,77,.34) !important;
  background: rgba(18,19,16,.91) !important;
  color: #d9ae5d !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-state-overlay {
  background: rgba(7,8,6,.48) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-state-overlay button {
  border-color: rgba(185,243,61,.30) !important;
  background: rgba(185,243,61,.10) !important;
  color: #c8f66c !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-spinner {
  border-color: rgba(185,243,61,.16) !important;
  border-top-color: #b9f33d !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-action-panel {
  position: relative !important;
  z-index: 30 !important;
  flex: 0 0 132px !important;
  min-height: 132px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  background: #0b0c09 !important;
  background-image: linear-gradient(180deg, #0d0e0b 0%, #090a08 100%) !important;
  box-shadow: 0 -8px 22px rgba(0,0,0,.14) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-action-grid {
  height: 100% !important;
  gap: 10px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-action-card {
  height: 100% !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  gap: 7px !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(128deg, rgba(255,255,255,.015), transparent 48%),
    linear-gradient(145deg, #1b1c19 0%, #151614 100%) !important;
  color: #f5f5f2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.15) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-action-card:hover:not(:disabled) {
  border-color: rgba(185,243,61,.22) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-action-card strong {
  color: #f3f3f0 !important;
  font-size: 13px !important;
  font-weight: 570 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-action-icon.screenshot {
  width: 32px !important;
  height: 32px !important;
  color: #a8aaa7 !important;
  filter: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-action-icon.screenshot svg {
  width: 30px !important;
  height: 30px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-record-dot {
  width: 14px !important;
  height: 14px !important;
  flex-basis: 14px !important;
  background: #ff4747 !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-action-card.record.active {
  border-color: rgba(255,71,71,.32) !important;
  background: linear-gradient(145deg, #251918 0%, #171412 100%) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-toast {
  border-color: rgba(185,243,61,.25) !important;
  background: rgba(20,21,18,.96) !important;
  color: #c8f66c !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active > .app-scroll-region > .app-nav-spacer {
  background: #070806 !important;
}

@media (max-width: 390px) {
  body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-action-panel {
    margin-bottom: 0 !important;
  }
}