/* 앱셸 — 뷰포트 고정 프레임 · 내부 스크롤 콘텐츠 · 하단 고정 슬롯 · 배경 슬롯(app_bg 주입).
   design-spec §8. 스크롤 스킴 = 내부 스크롤 패널(문서 스크롤 아님): 콘텐츠 영역만
   overflow-y, 하단 슬롯은 flex 하단 고정(absolute/flex — sticky+문서스크롤 등가 주장 아님).
   데스크톱 480×768(10:16) contain·확대·가운데(바깥=앱 배경) · 모바일 화면 채움. */

.app-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--paper-300);
}

.app-frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 10 / 16;
  height: min(calc(100dvh - var(--space-11)), calc(100vw * 16 / 10));
  overflow: hidden;
  border-radius: var(--app-radius);
  background: var(--bg-app);
  box-shadow: var(--shadow-app-frame);
}

/* ── 배경 슬롯 컨테이너 — 각 화면이 {% block app_bg %}로 영상 슬롯(background_media)을 주입.
   비오버라이드 화면은 빈 슬롯 → 프레임 background(var(--bg-app))만 노출(fallback).
   영상 컴포넌트 스타일(.background-media*)은 components.css 소관(design-spec §3.2). ── */
.app-frame__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── 본문: 콘텐츠(내부 스크롤) + 하단 고정 슬롯 ── */
.app-frame__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-frame__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* 하단 고정 슬롯 — 콘텐츠가 내부 스크롤하는 동안 프레임 하단에 붙어 자리 유지(무력화 금지).
   이 3화면엔 내비 없음(빈 슬롯 예약). */
.app-frame__nav {
  flex: 0 0 auto;
}

/* 목록 본문은 유리 내비 뒤로 지나간다. 내비 슬롯만 띄워 하위 화면/창의 body 기준을 보존한다. */
.app-frame__body:has(> .app-frame__content :is([data-showcase-mount], [data-settings-page])) > .app-frame__nav > [data-home-navigation] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 상담의 실제 입력줄이 있는 본문만 내비 슬롯을 띄운다. 빈 슬롯은 눌림을 가로채지 않는다. */
.app-frame__body:has(> .app-frame__content [data-conversation-mount] > .conversation > .conversation-composer) > .app-frame__nav > [data-home-navigation] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.app-frame__body:has(> .app-frame__content [data-conversation-mount] > .conversation > .conversation-composer) > .app-frame__nav > [data-home-navigation] > .home-bottom-nav {
  pointer-events: auto;
}

/* ── 모바일: 프레임이 화면을 채움(radius/그림자 제거) ── */
@media (max-width: 480px) {
  .app-frame {
    aspect-ratio: auto;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}