/* Alert Details — September 2026 reference implementation.
   Final preview-only layer; preserves the existing interactive media and data model. */

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-screen {
  background: #070806 !important;
  background-image:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.016), transparent 32%),
    linear-gradient(180deg, #090a08 0%, #070806 100%) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-screen-header {
  min-height: calc(66px + env(safe-area-inset-top, 0px)) !important;
  flex-basis: calc(66px + env(safe-area-inset-top, 0px)) !important;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 4px !important;
  grid-template-columns: 42px minmax(0,1fr) 42px !important;
  background: #080907 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-screen-header h1 {
  color: #f5f5f3 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-screen-header .app-screen-header-side,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-screen-header .app-screen-header-action,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-screen-header .app-screen-header-spacer {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-screen-header .app-screen-header-action {
  padding: 8px !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.event-detail-shell-active > .app-screen-header .app-screen-header-action svg {
  width: 25px !important;
  height: 25px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-screen {
  width: 100% !important;
  min-height: 100% !important;
  padding: 0 0 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f4f4f1 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-media {
  width: calc(100% - 24px) !important;
  height: 258px !important;
  min-height: 258px !important;
  margin: 0 12px 8px !important;
  padding: 0 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-camera {
  width: 100% !important;
  height: 258px !important;
  min-height: 258px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 17px !important;
  background: #10110f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 10px 26px rgba(0,0,0,.18) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-camera .photo-camera-scene {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-camera .camera-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 112% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-camera::after {
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 25%, transparent 66%, rgba(0,0,0,.18) 100%) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-camera .camera-overlay,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-camera .camera-labels {
  color: #f6f6f3 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-hero-play {
  width: 50px !important;
  height: 50px !important;
  border: 1px solid #b9f33d !important;
  border-radius: 50% !important;
  background: rgba(10,11,9,.80) !important;
  color: #fff !important;
  box-shadow: 0 7px 20px rgba(0,0,0,.28) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-hero-play svg {
  width: 23px !important;
  height: 23px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-media-tools {
  right: 15px !important;
  bottom: 12px !important;
  display: flex !important;
  gap: 10px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-media-tools button {
  width: 42px !important;
  height: 42px !important;
  padding: 9px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 11px !important;
  background: rgba(20,21,18,.88) !important;
  color: #f6f6f3 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(8px) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-media-tools button svg {
  width: 24px !important;
  height: 24px !important;
  color: #f6f6f3 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-assessment {
  position: relative !important;
  width: calc(100% - 24px) !important;
  min-height: 0 !important;
  margin: 0 12px 24px !important;
  padding: 15px 12px 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(128deg, rgba(255,255,255,.018), transparent 48%),
    linear-gradient(145deg, #1b1c19 0%, #151614 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022), 0 12px 28px rgba(0,0,0,.16) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-assessment::before {
  content: none !important;
  display: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-assessment-copy {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-incident-heading {
  min-height: 47px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-incident-heading h2 {
  margin: 0 !important;
  color: #f5f5f2 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-weight: 620 !important;
  letter-spacing: -.025em !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-severity {
  margin: 0 !important;
  color: #a8aaa7 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 690 !important;
  letter-spacing: .15em !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-metadata {
  width: 100% !important;
  margin: 4px 0 0 !important;
  display: grid !important;
  gap: 0 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-meta-row {
  min-height: 34px !important;
  padding: 0 2px !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-meta-label,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-meta-value {
  color: #a4a6a3 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 420 !important;
  white-space: nowrap !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-meta-value {
  color: #f1f1ee !important;
  font-size: 12.5px !important;
  font-weight: 520 !important;
  text-align: right !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-map-indicator {
  position: relative !important;
  width: 100% !important;
  height: 92px !important;
  min-height: 92px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  background: #121310 !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-map-indicator img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .78 !important;
  filter: grayscale(1) brightness(.27) contrast(1.18) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-map-pin {
  filter: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-description {
  margin: 24px 2px 0 !important;
  padding: 0 !important;
  color: #aaaCA9 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 410 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-incident-actions,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-acknowledge {
  display: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-scroll-region > .app-nav-spacer {
  min-height: 96px !important;
  background: #070806 !important;
}

@media (max-width: 370px) {
  body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-media,
  body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-assessment {
    width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-media,
  body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-camera {
    height: 246px !important;
    min-height: 246px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-meta-label {
    font-size: 11.5px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .version4-meta-value {
    font-size: 12px !important;
  }
}