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;
  /* TM611: style.css's .app-shell sets `margin: 0 auto` to center the
   * 720px-max-width shell on the desktop webapp page. Here .app-shell is a
   * flex item of .phone-screen's COLUMN layout, so those left/right auto
   * margins are CROSS-AXIS auto margins — which, per the flexbox spec,
   * switch the item from "stretch to container width" to "size to content
   * and center the leftover space in the margins." With no free space
   * (content wider than the phone frame), that made the item balloon to
   * its content's full unbreakable width instead of being clamped to
   * 100vw/390px, which is what silently broke long-name truncation here.
   * Resetting margin to 0 restores normal stretch so header-agent-name's
   * CSS ellipsis can actually take effect. */
  margin: 0;
}
.phone-screen .app-footer { display: none; }

@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%;
  }
}