/* layouts/spread.css — /LOG、/LOOK 雙 pane 殼（取代 layouts/home.css）
   依賴：tokens.css、chrome.css、chat.css、look-feed-embed.css、body.home
   結構：.swipe-wrap > .spread > [ .chat-pane | .feed-pane ]
   桌機 ≥1024：chat-pane | feed-pane 對開 50/50，兩者常駐可見。
   手機 <1024：feed-pane 為滿屏 base；chat-pane 預設藏，chat-awake 才 overlay 覆上。 */

/* ── 容器置中（沿用 home.css 1200px）── */
.home .swipe-wrap  { max-width: 1200px; margin: 0 auto; width: 100%; }
.home .input-stack { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }
/* 頁眉對齊對開容器：同 1200px 置中，不放大到瀏覽器全寬（mobile <1200 自然滿寬）*/
.home .kq-header   { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }

/* 單一 input-panel：中和 chrome.css 的 width:200% / translateX(-50%)（雙格幾何已不存在）*/
.home .input-panels { width: 100%; transform: none; }
.home .input-panel  { width: 100%; }

/* ── .spread：pane 容器 ── */
.home .spread {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;   /* 手機單欄 */
  min-height: 0;
}
/* pane 共用：覆蓋 .swipe-page 的 width:50%；手機兩 pane 同格疊層 */
.home .spread > .chat-pane,
.home .spread > .feed-pane {
  width: 100%;
  grid-area: 1 / 1;
  min-width: 0;
}

/* 手機：feed 為 base，chat 預設藏；chat-awake 才覆上（不透明蓋住底層 feed）*/
.home .spread > .chat-pane { display: none; }
.home .spread.chat-awake > .chat-pane {
  display: flex;
  background: var(--paper);
  z-index: 2;
}

/* chat overlay 關閉鈕（手機限定，釘 chat-pane 右上；桌機常駐對開不需）*/
.home #chatBack {
  position: absolute;
  top: 8px;
  right: 16px;
  z-index: 10;
}

/* ── 桌機 ≥1024：對開 ── */
@media (min-width: 1024px) {
  html:has(body.home) { display: flex; align-items: center; }
  body.home { max-height: var(--app-max-h); width: 100%; }

  /* mode-stripe：absolute 橫跨 header 底（沿用 home.css）*/
  .home .kq-header { position: relative; }
  .home .kq-header .mode-stripe { position: absolute; bottom: 0; left: 0; right: 0; }

  /* 兩欄並排 50/50，兩 pane 常駐 */
  .home .spread { grid-template-columns: 1fr 1fr; }
  .home .spread > .chat-pane,
  .home .spread > .feed-pane { grid-area: auto; }
  .home .spread > .chat-pane { display: flex; }
  .home .spread > .feed-pane { border-left: 1px solid var(--seam); }
  .home #chatBack { display: none; }

  /* chat-pane 桌機：column + typing 排底（取代 home.css 的 order 修正）*/
  .home .spread > .chat-pane { flex-direction: column; }
  .home .spread > .chat-pane > .grid-overlay { order: 0; }
  .home .spread > .chat-pane > .thread       { order: 1; margin-top: 0; }
  .home .spread > .chat-pane > .typing       { order: 2; }

  /* input bar 對齊左側 chat 欄（50%）*/
  .home .input-panels { width: 50%; }
  .home .input-panel  { width: 100%; }
}