/* ==========================================================
   SMAU OS — APP SCREEN SHELL
   Fullscreen-first app presentation.
   Header markup may exist for JS hooks, but is OFF by default.
   ========================================================== */

/* ==========================================================
   APP SCREEN ROOT
   ========================================================== */

/* screen-app is both: <section id="screen-app" class="smau-screen screen-app"> */
#screen-app.screen-app,
.screen-app {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;

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

  background:
    radial-gradient(circle at top, rgba(79, 140, 255, 0.16), transparent 58%),
    linear-gradient(180deg, #0b0f1f, #05060a);

  /* Fullscreen: no inset frame */
  padding: 0;
  display: flex;
  flex-direction: column;

  overflow: hidden;
  overscroll-behavior: contain;
  contain: layout paint;
}

/* Layer that holds header + app body */
#screen-app .app-layer,
.app-layer {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ==========================================================
   APP HEADER (HARD-HIDDEN BY DEFAULT)
   ========================================================== */

/*
  The header exists in index.html:

  <header class="app-header">...</header>

  JS updates:
  - #btn-app-back
  - #app-header-title / sub / badge

  But global headers make apps look like webviews. So:
  - Keep DOM for hooks
  - Force-hide visually + physically
*/

#screen-app .app-header,
.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;
}

/*
  EXPLICIT OPT-IN:
  Only show the system header if you add:
  body.smau-force-app-header

  Keep it scoped to #screen-app.is-active so it never leaks into inactive stacks.
*/
body.smau-force-app-header #screen-app.is-active .app-header {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* When header is enabled, style it nicely */
body.smau-force-app-header #screen-app.is-active .app-header {
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px 8px;
  background: linear-gradient(180deg, rgba(5, 6, 10, 0.92), rgba(5, 6, 10, 0.55));
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);

  position: relative;
  z-index: 2;

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

body.smau-force-app-header .app-header-btn {
  width: 34px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(5, 6, 12, 0.65);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.smau-force-app-header .app-header-btn:active {
  transform: scale(0.98);
}

body.smau-force-app-header .app-header-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.smau-force-app-header .app-header-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--os-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.smau-force-app-header .app-header-sub {
  font-size: 11px;
  color: var(--os-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.smau-force-app-header .app-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

body.smau-force-app-header .app-header-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}

body.smau-force-app-header .app-header-badge {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(5, 6, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================
   APP BODY + APP VIEWS
   ========================================================== */

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

  /* Fullscreen-first: no “floating card” */
  border-radius: 0;
  background: transparent;
  border: 0;

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

  contain: layout paint;
}

/* Container for all app views */
#screen-app .app-views,
.app-views {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;

  overflow: hidden;
}

/* Each individual app view */
#screen-app .app-view,
.app-view {
  position: absolute;
  inset: 0;

  /* IMPORTANT: app-view is the scroll container */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* Allow vertical scrolling inside app views */
  touch-action: pan-y;

  /* Default “modern phone” spacing */
  padding: 12px 14px max(12px, env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(6px) scale(0.996);
  filter: saturate(0.98);

  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(0.18, 0.9, 0.2, 1),
    filter 0.22s ease-out,
    visibility 0s linear 0.18s;

  will-change: opacity, transform, filter;

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

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

/* Active app view */
#screen-app .app-view.is-active,
.app-view.is-active {
  opacity: 1;
  visibility: visible;

  /* Ensure active app is above everything else in the shell */
  z-index: 10;

  pointer-events: auto !important;

  transform: translateY(0) scale(1);
  filter: none;

  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(0.18, 0.9, 0.2, 1),
    filter 0.22s ease-out,
    visibility 0s linear 0s;
}

/* True edge-to-edge apps (camera, maps, etc.) */
#screen-app .app-view[data-edge-to-edge="true"],
.app-view[data-edge-to-edge="true"] {
  padding: 0;
}

/* Gesture opt-out zones (horizontal scrollers suppress edge-back) */
.no-edge-back,
[data-no-edge-back] {
  touch-action: pan-x pan-y;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .app-view,
  .app-view.is-active {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================
   PLACEHOLDER CONTENT FOR UNBUILT APPS
   ========================================================== */

.app-placeholder {
  height: 100%;
  min-height: 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 10px;
  text-align: center;
  padding: 0 24px;

  color: var(--os-muted);
  font-size: 12px;
}

.app-placeholder strong {
  color: var(--os-ink);
  font-size: 13px;
}