/* Device Frame Presentation Shell */
body {
  margin: 0;
  padding: 20px 0;
  min-height: 100vh;
  background: #0F172A;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  overflow-x: hidden;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* Authentic iPhone Chassis Mockup */
.device-wrapper {
  position: relative;
  width: 390px;
  height: 844px;
  max-height: 94vh;
  background: #000000;
  border-radius: 50px;
  box-shadow: 
    0 0 0 10px #1E293B,
    0 0 0 12px #334155,
    0 25px 60px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Fix subpixel corner clipping */
}

/* iPhone Hardware Notch */
.notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 28px;
  background-color: #000000;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* Notch Earpiece Speaker & Front Camera */
.notch-speaker {
  width: 50px;
  height: 4px;
  background-color: #1E293B;
  border-radius: 2px;
  margin-right: 12px;
}

.notch-camera {
  width: 10px;
  height: 10px;
  background-color: #0F172A;
  border-radius: 50%;
  border: 1px solid #1E293B;
}

/* Status Bar flanking the Notch */
.status-bar {
  height: 44px;
  width: 100%;
  padding: 10px 24px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  z-index: 250;
  user-select: none;
  background-color: var(--color-bg-app);
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* Seamless Status Bar when Drawer Menu is Open */
.device-wrapper.drawer-open .status-bar {
  background-color: var(--color-primary-teal);
  color: #FFFFFF;
}

.device-wrapper.drawer-open .status-bar svg {
  color: #FFFFFF;
}

/* Zen SOS Mode (Mother App) */
.device-wrapper.zen-sos-mode .status-bar {
  background-color: #E52E2E;
  color: #FFFFFF;
}

.device-wrapper.zen-sos-mode .status-bar svg {
  color: #FFFFFF;
}

/* Midwife Listening Mode: Full Green Viewport including Top Status Bar */
.device-wrapper.midwife-listening-mode .status-bar {
  background-color: var(--color-primary-teal) !important;
  color: #FFFFFF !important;
}

.device-wrapper.midwife-listening-mode .status-bar svg {
  color: #FFFFFF !important;
}

/* Midwife On-Call Active State: Top area returns to Pure White */
.device-wrapper.midwife-call-active,
.device-wrapper.midwife-call-active .status-bar {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

.device-wrapper.midwife-call-active .status-bar svg {
  color: #0F172A !important;
}

.device-wrapper.midwife-call-active .app-screen {
  background-color: #FFFFFF !important;
}

/* Mother App Video Mode: Top part of the screen remains Pure White */
.device-wrapper:has(#video-screen-overlay.active) .status-bar {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

.device-wrapper:has(#video-screen-overlay.active) .status-bar svg {
  color: #0F172A !important;
}

/* Midwife App Video Mode */
.device-wrapper:has(#midwife-video-overlay.active) .status-bar {
  background-color: transparent !important;
  color: #FFFFFF !important;
}

.device-wrapper:has(#midwife-video-overlay.active) .status-bar svg {
  color: #FFFFFF !important;
}

.status-time {
  letter-spacing: -0.2px;
  padding-left: 6px;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
}

/* Internal Screen Viewport - Perfectly Clipped Corners */
.app-screen {
  position: relative;
  width: 100%;
  flex: 1;
  background-color: var(--color-bg-app);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 50px 50px;
  transition: background-color 0.35s ease;
}

.device-wrapper.zen-sos-mode .app-screen {
  background-color: #E52E2E;
}

.device-wrapper.midwife-listening-mode .app-screen {
  background-color: var(--color-primary-teal) !important;
}

/* Header & Pagination Fade Out in Zen Mode */
.app-header {
  transition: opacity 0.3s ease;
}

.device-wrapper.zen-sos-mode .app-header {
  opacity: 0;
  pointer-events: none;
}

.pagination-container {
  transition: opacity 0.3s ease;
}

.device-wrapper.zen-sos-mode .pagination-container {
  opacity: 0;
  pointer-events: none;
}

/* Disable swipe gesture cursor and lock viewport in Zen Mode */
.device-wrapper.zen-sos-mode .screens-viewport {
  cursor: default;
}

/* Home Indicator Bar */
.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background-color: #111827;
  border-radius: 3px;
  z-index: 300;
  opacity: 0.7;
  transition: background-color 0.35s ease;
  pointer-events: none;
}

.device-wrapper.drawer-open .home-indicator,
.device-wrapper.zen-sos-mode .home-indicator,
.device-wrapper.midwife-listening-mode .home-indicator {
  background-color: #FFFFFF !important;
  opacity: 0.6;
}

/* Presentation tag */
.presentation-tag {
  position: fixed;
  bottom: 16px;
  left: 20px;
  background: rgba(15, 23, 42, 0.9);
  color: #94A3B8;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
}

.presentation-tag .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10B981;
}

/* Mobile responsive full viewport */
@media (max-width: 500px) {
  body {
    background: var(--color-bg-app);
    padding: 0;
  }
  .device-wrapper {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
  .app-screen {
    border-radius: 0;
  }
  .notch {
    display: none;
  }
  .presentation-tag {
    display: none;
  }
}