/* SMAU FILE
 * Path: css/smau-appShell.css
 * Owns:
 *   - App screen shell presentation for #screen-app (fullscreen-first)
 *   - System app header (hard-hidden by default + optional opt-in)
 *   - App view container behavior (scroll + stacking + hit-testing) inside #screen-app
 *   - Placeholder styling inside #screen-app
 *   - Generic no-edge-back zone behavior inside #screen-app
 *   - App loader overlays inside #screen-app .app-view (loading + fatal panels)
 * Invariants:
 *   - Mechanics truth is data-state only (open = [data-state="open"]).
 *   - Only .app-view[data-state="open"] inside #screen-app can receive pointer events.
 *   - #screen-app must never create a body-level scroll (contain overscroll in-shell).
 *   - The system .app-header is physically hidden by default (no hit targets, no layout).
 *   - .app-view is the vertical scroll container.
 *   - No selector in this file styles outside #screen-app.
 */

#screen-app {
  --smau-app-bg:
    radial-gradient(circle at top, rgba(79, 140, 255, 0.16), transparent 58%),
    linear-gradient(180deg, #0b0f1f, var(--os-bg, #05060a));
  --smau-app-view-pad-x: 14px;
  --smau-app-view-pad-y: 12px;
  --smau-app-view-pad-bottom: max(12px, env(safe-area-inset-bottom));

  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;

  width: 100%;
  height: 100%;
  align-self: stretch;

  background: var(--smau-app-bg);
  padding: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;
  overscroll-behavior: contain;

  position: absolute;
  inset: 0;

  /* Let vertical scroll + pinch zoom pass; keep horizontal reserved for OS gestures. */
  touch-action: pan-x pan-y pinch-zoom;
}

#screen-app .app-layer {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  /* Keep layer as the flex sizing chain, not a second absolute root. */
  position: relative;
  inset: auto;

  touch-action: pan-x pan-y pinch-zoom;
}

/* --------------------------------------------------------------------------
 * System header (forced off)
 * -------------------------------------------------------------------------- */

#screen-app .app-header {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;

  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
 * App body shell
 * -------------------------------------------------------------------------- */

#screen-app .app-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;

  border-radius: 0;
  background: transparent;
  border: 0;

  overflow: hidden;
  position: relative;
  z-index: 1;

  display: block;
  height: 100%;
}

/* ==========================================================================
   Core app-view container rules
   ========================================================================== */

#screen-app #app-views,
#screen-app .app-views {
  isolation: isolate;
  contain: layout paint;

  overflow: hidden;

  pointer-events: none;
}

#screen-app #app-views {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

#screen-app .app-views {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;
}

#screen-app .app-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* Vertical scroll should work; horizontal is reserved for OS edge-back. */
  touch-action: pan-x pan-y pinch-zoom;

  padding: 0;

  --app-bg: transparent;
  --app-ink: #0b0f1f;

  background: var(--app-bg);
  color: var(--app-ink);

  display: none !important;
  pointer-events: none !important;
  z-index: 0;

  transform: none;
  filter: none;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

#screen-app .app-view[data-theme="dark"] {
  --app-bg: var(--os-bg, #05060a);
  --app-ink: var(--os-ink, rgba(245, 245, 248, 0.92));
}

#screen-app .app-view[data-shell-pad="on"] {
  padding:
    var(--smau-app-view-pad-y, 12px) var(--smau-app-view-pad-x, 14px) var(--smau-app-view-pad-bottom, max(12px, env(safe-area-inset-bottom)));
}

#screen-app .app-view::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#screen-app .app-view[data-state="open"] {
  display: block !important;

  pointer-events: auto !important;
  z-index: 10;

  transform: none;
  filter: none;
}

#screen-app .app-view[data-edge-to-edge="true"] {
  padding: 0;
}

#screen-app .app-view>* {
  min-height: 0;
  min-width: 0;
}

#screen-app .no-edge-back,
#screen-app [data-no-edge-back] {
  /* Explicit opt-out zones may allow horizontal interaction (carousels, maps, etc.) */
  touch-action: pan-x pan-y pinch-zoom;
}

/* --------------------------------------------------------------------------
 * App placeholder
 * -------------------------------------------------------------------------- */

#screen-app .app-placeholder {
  min-height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;

  color: var(--os-muted, rgba(245, 245, 248, 0.62));
  font-size: 12px;
}

#screen-app .app-placeholder strong {
  color: var(--os-ink, rgba(245, 245, 248, 0.92));
  font-size: 13px;
}

/* --------------------------------------------------------------------------
 * App loader overlays
 * -------------------------------------------------------------------------- */

#screen-app .app-view .smau-app-loader-overlay {
  position: absolute;
  inset: 0;

  display: grid;
  align-content: start;
  justify-items: start;

  padding: var(--smau-app-view-pad-y, 12px) var(--smau-app-view-pad-x, 14px);

  background:
    radial-gradient(circle at top, rgba(79, 140, 255, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(5, 6, 10, 0.86), rgba(5, 6, 10, 0.70));

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 1;
  visibility: visible;

  z-index: 20;

  pointer-events: none;

  transition:
    opacity var(--smau-dur-ui, 180ms) var(--smau-ease-out, ease-out),
    visibility 0s linear 0s;
}

#screen-app .app-view[data-state="open"] .smau-app-loader-overlay {
  pointer-events: auto;
}

#screen-app .app-view .smau-app-loader-loading {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;

  padding: 10px 12px;
  border-radius: var(--smau-radius-chip, 14px);

  background: color-mix(in srgb, var(--os-bg, #05060a) 55%, transparent);
  border: 1px solid var(--os-border-strong, rgba(255, 255, 255, 0.12));

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;

  -webkit-user-select: none;
  user-select: none;
}

#screen-app .app-view .smau-app-loader-loading__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--os-ink, rgba(245, 245, 248, 0.92));
  line-height: 1.2;

  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#screen-app .app-view .smau-app-loader-loading__title::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;

  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.75);

  animation: smauAppLoaderSpin 900ms linear infinite;
}

@keyframes smauAppLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-app .app-view .smau-app-loader-loading__title::after {
    animation: none !important;
  }
}

#screen-app .app-view .smau-app-loader-loading__id {
  font-size: 11px;
  color: var(--os-muted, rgba(245, 245, 248, 0.62));
  line-height: 1.2;
}

#screen-app .smau-app-loader-fatal {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 18px;

  background:
    radial-gradient(circle at top, rgba(255, 90, 110, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(5, 6, 10, 0.90), rgba(5, 6, 10, 0.72));

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  pointer-events: auto;

  z-index: 30;
}

#screen-app .smau-app-loader-fatal__body {
  width: min(420px, 100%);
  border-radius: 18px;

  padding: 14px 14px 12px;

  background: color-mix(in srgb, var(--os-bg, #05060a) 62%, transparent);
  border: 1px solid var(--os-border-strong, rgba(255, 255, 255, 0.12));

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

#screen-app .smau-app-loader-fatal__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 8px;
}

#screen-app .smau-app-loader-fatal__msg {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 10px;

  word-break: break-word;
}

#screen-app .smau-app-loader-fatal__hint {
  font-size: 11px;
  line-height: 1.35;
  color: var(--os-muted, rgba(245, 245, 248, 0.62));
}

#screen-app .smau-app-loader-fatal__hint code {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);

  color: rgba(255, 255, 255, 0.86);
}