/* Phone simulator: iPhone-sized frame (402x856, screen 390x844) ported from ../chatmock.
   Desktop: frame scaled to fit via --s (set by js/phone-fit.js). Real phone (<500px): full-bleed. */

.phone-slot {
  --s: 1;
  position: relative;
  flex: none;
  width: calc(402px * var(--s));
  height: calc(856px * var(--s));
}

.phone {
  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  height: 856px;
  padding: 6px;
  border-radius: 60px;
  background: linear-gradient(145deg, #FBFBFC 0%, #DADDE2 55%, #F2F3F5 100%);
  box-shadow:
    0 0 0 1px #CDD1D7,
    0 30px 60px -20px rgba(40, 48, 60, .25),
    0 12px 24px -12px rgba(40, 48, 60, .18);
  transform: scale(var(--s));
  transform-origin: 0 0;
}

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 54px;
  background: #fff;
  /* Safari: keep transformed children clipped to the rounded screen */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

.island {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 124px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #000;
  z-index: 50;
  pointer-events: none;
}

.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 56px;
  padding: 6px 30px 0 40px;
  color: #fff;
  background: var(--certo-navy, #203438);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
}
.status .clock { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.status .sys { display: flex; align-items: center; gap: 6px; }

.scroller {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }

.home {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 136px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: #111;
  z-index: 50;
  pointer-events: none;
}

/* On a real phone: full-bleed, the device supplies its own status bar and home indicator */
@media (max-width: 500px) {
  .phone-slot { width: 100%; height: 100dvh; }
  .phone {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }
  .screen { border-radius: 0; -webkit-mask-image: none; }
  .island, .status, .home { display: none; }
}