/* 画面（SCR）の並べ方。部品の見た目は components.css、ここは画面の余白と配置だけ。
 * 数値は Figma の画面フレーム（402×874）。トークンにない余白 20 などは P3 の例外（DEV-033 判断依頼 A） */

/* 上の帯（左に切り替え、右にアイコン）。左上に固定（P3 CMP-001）。
 * 上端：セーフエリアの上端から +20（Figma の機種のセーフエリア 62 で 82）。Figma は 58（-4）だが、実機で「◀ TestFlight」の戻る表示や
 * ステータスバーと詰まるため、24 下げる（Kentaro 決定 2026-10-22。12 → さらに 12。P3 に記載。Figma 側は未更新）。Input・List・Shopping で共通。
 * セーフエリアがない（ブラウザのプレビュー）ときは 82。後ろの式は inset が 0 のときだけ 82 になり、それ以外は負になる */
:root {
  --scr-top-pad: max(calc(env(safe-area-inset-top) + 20px), calc(82px - env(safe-area-inset-top) * 1000));
}

.scr-top-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--scr-top-pad);
  background: var(--color-bg-base);
}

/* 選択バー（TL SelectionBar、Figma SCR-002 List（選択中））：top-bar の下 12、高さ 36、その下 16 からセクション（通常の 20 より 44 下がる）。
 * 上の帯と一緒に固定する（長い一覧をスクロールしても ✓ とゴミ箱が押せる。実装の判断、P2 FN-007 に記載）。12 と 16 のうち、固定したときの下の余白 8 は
 * この枠の下余白にし、セクションの上余白を 20 → 8 にして合計を Figma と同じにする */
.scr-selection-bar {
  position: sticky;
  top: calc(var(--scr-top-pad) + 36px);
  z-index: 1;
  padding: 12px 0 8px;
  background: var(--color-bg-base);
}

.scr-list.has-selection .scr-list-sections {
  padding-top: 8px;
}

.scr-top-bar-actions {
  display: flex;
  gap: 4px;
}

/* SCR-002 List（Figma 436:518） */
.scr-list {
  min-height: 100dvh;
  padding: 0 var(--space-page);
}

.scr-list-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0 calc(env(safe-area-inset-bottom) + var(--space-page));
}

.scr-list-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.scr-list-subheading {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
}

/* 空の状態（DES-007、Figma 450:1285）。画面の真ん中に置く */
.scr-empty {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  transform: translate(-50%, -50%);
}

.scr-empty-mascot {
  width: 72px;
  height: 72px;
  opacity: 0.6;
}

.scr-empty-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
}

.scr-empty-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-default);
  white-space: nowrap; /* 真ん中に置く箱は中身の幅なので、折り返さないようにする（DES-011） */
}

.scr-empty-spacer {
  width: 1px;
  height: var(--space-s);
}

/* テスト版の未実装トースト（DES-009 の位置：左右 16、下から 34） */
.scr-toast-layer {
  position: fixed;
  right: var(--space-page);
  bottom: max(env(safe-area-inset-bottom), 34px);
  left: var(--space-page);
  z-index: 10;
}

/* SCR-001 Input（Figma 429:253、DES-001・002・018・019）。上の帯・会話・入力欄を縦に並べ、会話だけがスクロールする */
/* 画面いっぱいに固定する（100dvh は、起動時などに実際の画面より小さく計算されることがあるかもしれないので使わない。2026-10-22、入力欄が浮く件）。
 * 固定にすると、ページ自体はスクロールせず、会話だけがスクロールする */
.scr-input {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-page);
}

.scr-input-chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  min-height: 0;
  overflow-y: auto;
  padding: 24px 0 var(--space-m); /* 上の帯の下 24（Figma の chat y118） */
}

/* 会話がないとき（SCR-001 の empty-state）。DES-007 と同じく画面の真ん中から上へ 97 の位置 */
.scr-input-empty {
  position: fixed;
  top: calc(50% - 97px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  transform: translateX(-50%);
}

.scr-input-empty-mascot {
  width: 84px;
  height: 84px;
}

.scr-input-empty-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-default);
  white-space: nowrap;
}

/* 入力欄（Figma composer 370×145、下から 34） */
.scr-composer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding-bottom: 34px; /* Figma の下から 34。env(safe-area-inset-bottom) は使わない（実機で大きな値が残ることがあるかもしれないため） */
}

/* キーボードが出ている間（入力中）は、入力欄とキーボードの間を 12 にする（Kentaro 決定 2026-10-22。Figma にキーボードの状態はない）。
 * キーボードが出ると WebView の下端がキーボードの上端になり、セーフエリアの下は 0 になる */
.scr-input:has(.scr-composer-field:focus) .scr-composer {
  padding-bottom: var(--space-m);
}

.scr-composer-chips {
  display: flex;
  gap: var(--space-s);
}

.scr-composer-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: 16px 12px 12px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-l);
  background: var(--color-bg-surface);
}

.scr-composer-field {
  display: block;
  width: 100%;
  height: 21px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-body);
  line-height: var(--line-height-default);
}

.scr-composer-field::placeholder {
  color: var(--color-text-tertiary);
}

.scr-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
}

/* Input / List の切り替え（DEV-034）。仕様に動きの記述がないので、中身を 0.2 秒でフェードインする（実機で Kentaro が判断。QA-034-03）。
 * 上の帯（切り替え）は両画面で同じ位置なので動かさない */
.scr-enter > :not(.scr-top-bar) {
  animation: scr-fade-in 0.2s ease-out;
}

@keyframes scr-fade-in {
  from {
    opacity: 0;
  }
}

/* Input の返答（アバターつきの行）の出入り（P3「モーション」、DEV-067、2026-10-22 Kentaro 決定）。出る 450ms（ease-out）・消える 350ms（ease-in）。
 * 「視差効果を減らす」がオンのときは 120ms（EDG-110）。値はここだけ（実機で見て調整する。js/input.js は読むだけ）。
 * ユーザーの吹き出しにはかけない。画面の切り替え（.scr-enter）は別で、変えない */
:root {
  --reply-fade-in: 450ms;
  --reply-fade-out: 350ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --reply-fade-in: 120ms;
    --reply-fade-out: 120ms;
  }
}

.scr-reply-in {
  animation: scr-reply-in var(--reply-fade-in) ease-out;
}

.scr-reply-out {
  pointer-events: none;
  animation: scr-reply-out var(--reply-fade-out) ease-in forwards;
}

@keyframes scr-reply-in {
  from {
    opacity: 0;
  }
}

@keyframes scr-reply-out {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scr-enter > :not(.scr-top-bar) {
    animation: none;
  }
}

/* SCR-003 Shopping（Figma 440:785）。上の帯は左 12（画面の余白 16 より 4 左）に戻る 36×36・タイトル・件数、間 8 */
.scr-shopping-bar {
  justify-content: flex-start;
  gap: var(--space-s);
  margin-left: -4px;
}

.scr-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.scr-shopping-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
}

.scr-shopping-count {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-default);
}