/* Desktop phone simulation styles */

.phone-sim {
  display: none; /* hidden on small screens */
}

@media (min-width: 900px) {
  body {
    display: grid;
    place-items: center;
    min-height: 100dvh;
  }

  .page-root { display: none; }

  .phone-sim { display: block; }

  .phone {
    position: relative;
    height: min(90cqh, var(--phone-target-height));
    aspect-ratio: 390 / 844; /* maintain device proportions */
    border-radius: var(--phone-radius);
    background: var(--bezel);
    box-shadow: var(--shadow-lg) inset;
    padding: var(--phone-padding);
  }

  .phone-inner {
    width: 100%;
    height: 100%;
    border-radius: var(--phone-inner-radius);
    overflow: hidden;
    background: var(--phone-inner);
    display: flex;
    flex-direction: column;
  }

  /* Simple notch */
  .notch {
    position: absolute;
    top: var(--notch-top);
    left: 50%;
    transform: translateX(-50%);
    width: var(--notch-width);
    height: var(--notch-height);
    background: var(--bezel);
    border-bottom-left-radius: var(--notch-radius);
    border-bottom-right-radius: var(--notch-radius);
    z-index: 2;
  }

  .phone-screen {
    position: relative;
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--paper-surface);
    background-size: 160% 160%, 140% 140%, 200% 180%, 100% 100%, auto, auto, auto;
    background-blend-mode: multiply, multiply, multiply, normal, normal, normal, normal;
    display: block;
    width: 100%;
    container-type: size;
  }
}