/* ============================================================
   topdevphone — SDK host chrome (external apps in sandboxed iframes)

   Only styles the phone-side wrapper: header, stage, the iframe itself and
   the loading/error states. Everything inside the iframe is the external
   app's own document and cannot be styled from here (opaque origin) — the
   host mirrors the CSS variables below into it over the message bridge
   instead, so apps inherit the same tokens.

   All colours come from base.css variables, so dark and light themes both
   work with no extra rules.
   ============================================================ */

.sdk-header {
  border-bottom: 1px solid var(--separator);
  padding-bottom: 10px;
}
.sdk-header .ah-title {
  font-size: 17px;
  font-weight: 700;
}

.sdk-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
}

/* The app surface itself: fills the view, transparent, no border. */
.sdk-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  background: transparent;
  color-scheme: normal;
}
.sdk-frame[hidden] { display: none; }

/* ---------- loading / error states ---------- */
.sdk-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 32px;
  text-align: center;
  background: var(--bg-primary);
  color: var(--text-primary);
}
.sdk-state[hidden] { display: none; }

.sdk-state-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.sdk-state-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 260px;
}

.sdk-state-icon .ic {
  width: 40px;
  height: 40px;
  color: var(--text-tertiary);
  opacity: 0.65;
}

.sdk-state-error .sdk-state-icon .ic { color: var(--accent-red); opacity: 0.8; }

.sdk-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--separator);
  border-top-color: var(--accent-blue);
  animation: sdkSpin 0.8s linear infinite;
}
@keyframes sdkSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sdk-spinner { animation-duration: 2.4s; }
}

/* ---------- home-screen tile artwork for apps that ship an iconUrl ---------- */
.app-tile .tile-icon .sdk-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}