/* Phone-first helpers for the public website design demo */

/* Device switcher (subtle, non-blocking) */
#suna-device-switch {
  position: fixed;
  z-index: 99999;
  inset-inline-start: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(15, 19, 28, 0.88);
  color: #e8eefc;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 7px 12px;
  font: 600 11.5px/1.2 "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
#suna-device-switch a {
  color: #9ec5ff;
  text-decoration: none;
}
#suna-device-switch a:hover {
  text-decoration: underline;
}
#suna-device-switch span {
  opacity: 0.7;
  font-weight: 500;
}

/* Mobile design frames: fill real phone screens (not a 430px artboard) */
html.is-phone body {
  overflow-x: hidden;
}

@media (max-width: 820px) {
  /* Stretch Claude mobile artboards to full device width */
  body > x-dc > div[style*="max-width:430px"],
  body > div#suna-cms-root,
  [data-dc-root] > div[style*="max-width:430px"] {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
  }

  /* Generic safety for desktop pages opened on phones (live/search/etc.) */
  html.is-phone body {
    -webkit-text-size-adjust: 100%;
  }

  html.is-phone main,
  html.is-phone header > div,
  html.is-phone footer > div {
    max-width: 100% !important;
    padding-inline: 14px !important;
  }

  html.is-phone [style*="grid-template-columns:1.45fr"] ,
  html.is-phone [style*="grid-template-columns: 1.45fr"] {
    grid-template-columns: 1fr !important;
  }

  html.is-phone [style*="grid-template-columns:2fr"] ,
  html.is-phone [style*="grid-template-columns: 2fr"] {
    grid-template-columns: 1fr !important;
  }

  html.is-phone [style*="font-size:38px"] {
    font-size: 26px !important;
  }
  html.is-phone [style*="font-size:30px"] {
    font-size: 22px !important;
  }

  /* Bottom switcher sits above sticky mobile tab bar */
  html.is-phone #suna-device-switch {
    bottom: 72px;
    inset-inline-start: 12px;
    font-size: 11px;
    opacity: 0.92;
  }
}

/* Hide switcher when printing */
@media print {
  #suna-device-switch {
    display: none !important;
  }
}

/* Full-bleed for mobile artboard regardless of mount depth */
@media (max-width: 820px) {
  html.is-phone div[style*="max-width:430px"],
  html.is-phone div[style*="max-width: 430px"] {
    max-width: 100% !important;
    width: 100% !important;
  }
  html.is-phone div[style*="min-height:844px"],
  html.is-phone div[style*="min-height: 844px"] {
    min-height: 100dvh !important;
  }
}