/* log-capture.css — 開場固定擷取面（強制選鞋 + 點即存評分）
   載入順序：tokens → chrome → rating → chat → … → log-capture
   scope：#log-capture（常駐 header，非全屏 swap）；收合態 body.capture-collapsed
*/

/* 左緣對齊頁眉 KILOQ wordmark（.masthead padding-left 12px），右 gutter */
#log-capture {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* 與 .cap-block 同值 → 五項（標/輸入/標/按鈕/線）等距 */
  padding: 16px var(--gutter) 24px 12px;
}

.cap-block {
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* 同 #log-capture gap → 區塊內外間距一致 */
  position: relative;
}

/* [hidden] 優先於各區塊的 display:flex（否則空的候選框/選中列會渲染成殘留線）*/
#log-capture [hidden] { display: none; }

/* 區段標：與對話內容同字級（--u-0）+ 粗體，非 eyebrow 小字 */
.cap-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--u-0);
  line-height: var(--lh-u);
  color: var(--ink);
}

/* ── 選鞋 input（UI 字，sans；底線態） ── */
.cap-search {
  font-family: var(--sans);
  font-size: var(--u-0);
  line-height: 24px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-3);
  padding: 4px 0;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
}
.cap-search:focus { border-bottom-color: var(--ink); }
.cap-search::placeholder { color: var(--ink-3); }

/* ── typeahead 候選 ── */
.cap-cands {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.cap-cand {
  font-family: var(--sans);
  font-size: var(--u-0);
  line-height: 24px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
}
.cap-cand:hover,
.cap-cand.cap-cand--active { background: var(--paper-2); }

.cap-add { color: var(--signal); font-weight: 700; }

/* ── ＋新增：品類必選 ── */
.cap-addnew { display: flex; flex-direction: column; }

.cap-catbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 12px;
}

.cap-cat-prompt {
  font-family: var(--sans);
  font-size: var(--t--1);
  line-height: 24px;
  color: var(--ink-2);
}

.cap-cat-row { display: flex; flex-wrap: wrap; gap: 8px; }

.cap-cat {
  font-family: var(--sans);
  font-size: var(--t--1);
  line-height: 24px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-xs);
  padding: 4px 12px;
  cursor: pointer;
}
.cap-cat:hover { border-color: var(--ink); }

/* ── 選中/新增後的待確認徽章（鞋名由 input 顯示，此列僅承載 pending 徽章）── */
.cap-selected {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cap-pending {
  font-family: var(--mono);
  font-size: var(--t--2);
  line-height: var(--lh--2);
  letter-spacing: .08em;
  color: var(--ink-3);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-xs);
  padding: 1px 6px;
}

/* ── 提示（guest / 未選鞋） ── */
.cap-nudge {
  font-family: var(--sans);
  font-size: var(--t--1);
  line-height: 24px;
  color: var(--signal);
}

/* ＋新增 guest gate 提示緊貼按鈕下方 */
.cap-addnew-nudge { padding: 4px 12px 8px; }

/* 評分滑出的給分說明：黑體 + teal（覆寫 rating.css 的 serif/ink 預設，僅限擷取面） */
#log-capture .kq-rate-word {
  font-family: var(--sans);
  color: var(--teal-ink);
}

/* ── 分隔線（滿意度下方；同鞋名輸入底線：1px var(--ink-3)，flex stretch 撐同寬）── */
.cap-divider {
  border-bottom: 1px solid var(--ink-3);
  margin-bottom: 8px;          /* 與下方「嗨！」對話拉開距離 */
}
body.capture-collapsed .cap-divider { display: none; }

/* ── 收合窄帶（對話開始後） ── */
.cap-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cap-strip-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t--1);
  line-height: 24px;
  color: var(--ink);
}

/* 「修改」文字鈕（mono 小字細框，比照 review-edit-btn；§1.4 不用 icon） */
.cap-strip-edit {
  font-family: var(--mono);
  font-size: var(--t--2);
  line-height: var(--lh--2);
  letter-spacing: .06em;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-xs);
  padding: 2px 8px;
  cursor: pointer;
}
.cap-strip-edit:hover { border-color: var(--ink); color: var(--ink); }

/* 收合態下擷取面壓縮 padding，不佔聊天高度 */
body.capture-collapsed #log-capture { gap: 0; padding-top: 8px; padding-bottom: 8px; }

/* ════════════════════════════════════════
   手機（<1024）：擷取面釘頂，對話自身捲動貼底
   覆蓋 chrome.css 的 .swipe-page column-reverse（原為 iOS 鍵盤貼底錨定）：
   chat-pane 改正常 column → #log-capture 釘頂不捲、.thread 接手捲動，
   並以 :first-child margin-top:auto 貼底錨定（等效原 column-reverse 最新貼底）。
   輸入框在 .input-stack（swipe-wrap 外、body 底層），永不被擷取面蓋到。
   wr-active（寫作室）不套用，維持原流。scrollThread() 同步改捲 .thread。
   ════════════════════════════════════════ */
@media (max-width: 1023px) {
  body.home:not(.wr-active) .spread.chat-awake > .chat-pane {
    flex-direction: column;
    overflow: hidden;
    padding-top: 0;            /* 靠頂：取消 .swipe-page 的 3×gutter 上留白 */
  }
  body.home:not(.wr-active) .spread.chat-awake > .chat-pane > #log-capture {
    order: 1;
    flex-shrink: 0;
    padding-top: 8px;          /* 「先選一雙」與右上 × 關閉鈕（top:8px）同高 */
    background: var(--paper);
  }
  body.home:not(.wr-active) .spread.chat-awake > .chat-pane > .thread {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 0;              /* 取消 chrome.css column-reverse 的 margin-top:auto */
    display: flex;
    flex-direction: column;
  }
  /* 對話短於一屏時貼底（最新貼近輸入框），滿屏時正常由上捲到底 */
  body.home:not(.wr-active) .spread.chat-awake > .chat-pane > .thread > :first-child {
    margin-top: auto;
  }
  body.home:not(.wr-active) .spread.chat-awake > .chat-pane > .typing {
    order: 3;
    flex-shrink: 0;
  }
}