html, body {
  margin: 0;
  padding: 0;
  background: #d7dbe4;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On real phones the decorative frame chrome clips content and blocks touches.
   Drop the frame entirely on narrow viewports so the app fills the screen. */
@media (max-width: 440px) {
  html, body {
    background: #f5f6fa;
    display: block;
    min-height: 100vh;
  }

  .phone-frame {
    width: 100%;
    height: auto;
    max-height: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: block;
  }

  .phone-notch {
    display: none;
  }

  .phone-screen {
    border-radius: 0;
    overflow-y: visible;
    height: auto;
  }

  .frame-caption {
    display: none;
  }
}

.phone-frame {
  width: 390px;
  max-width: 96vw;
  height: 844px;
  max-height: 92vh;
  background: #111319;
  border-radius: 46px;
  padding: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.phone-notch {
  height: 26px;
  margin: 0 auto 6px;
  width: 120px;
  background: #111319;
  border-radius: 0 0 16px 16px;
  position: relative;
}

.phone-notch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 46px;
  height: 6px;
  border-radius: 3px;
  background: #333846;
}

.phone-screen {
  flex: 1;
  background: #f5f6fa;
  border-radius: 30px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.phone-screen main {
  grid-template-columns: 1fr;
  padding: 0.75rem;
}

.frame-caption {
  color: #4b5163;
  text-align: center;
  font: 14px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin-top: 10px;
}

/*
 * On a real phone (narrow viewport, or a coarse/no-hover touch pointer even
 * at a slightly wider width) this page must show ONLY the app content,
 * edge-to-edge in the viewport — no desktop phone-bezel chrome, no notch,
 * no side/below caption text, and no horizontal scroll. The desktop
 * phone-frame preview above stays as-is for wide (laptop/reviewer) viewports.
 */
@media (max-width: 480px), (hover: none) and (pointer: coarse) {
  html, body {
    display: block;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    background: #f5f6fa;
  }

  .phone-frame {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    max-height: none;
    background: #f5f6fa;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* No bezel, no notch, no caption on a real phone — just the app. */
  .phone-notch,
  .frame-caption {
    display: none;
  }

  .phone-screen {
    border-radius: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    overflow-x: hidden;
  }

  .phone-screen main {
    grid-template-columns: 1fr;
  }
}

.phone-screen {
  background: #0b0c10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-screen .app-shell {
  min-height: 0;
  height: 100%;
  flex: 1;
  max-width: none;
}
.phone-screen .app-footer { display: none; }
.phone-screen .app-shell {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100%;
  overflow: hidden;
}
.phone-screen .composer { padding-bottom: 0.55rem; }
.phone-screen .mic-button { min-height: 44px; width: 100%; }

@media (max-width: 440px) {
  html, body { background: #0b0c10; }
}
@media (max-width: 480px), (hover: none) and (pointer: coarse) {
  html, body { background: #0b0c10; }
  .phone-frame { background: #0b0c10; }
  .phone-screen .app-shell {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
  }
}