/* ── 輸入列：貼在對話容器底部（來回對話畫面通用）──
       輸入列是 #s-input.active/#s-record.active 這個 flex column 的最後一個子項，
       flex-shrink:0 讓它維持自身內容高度，訊息區 flex:1 0 auto 把剩餘空間都讓給自己、
       短對話時輸入列自然貼在可視區域底部。
       position:sticky;bottom:0（04d Emily 回饋）：現在捲動的是整個 screen，長對話捲動時
       如果沒有這個，輸入列會照 flow 順序停在訊息最下面，得捲到底才看得到；sticky 讓它捲動
       時永遠貼著 scroll port 底緣，跟舊版 position:fixed 的可見效果一致。z-index 蓋過從
       底下捲上來的訊息，不然文字會透出來。
       視覺上維持跟舊版 position:fixed 一樣的滿版白底：body 左右有 var(--body-pad-x) 的
       padding，這裡用等值負 margin 頂開、外觀撐滿（手機寬度遠小於 body 的 max-width:--content-w，
       視覺上跟真正滿版無差異；桌機寬螢幕下的覆寫見下方 html.chat-fullscreen .input-bar
       ── 04d Emily 回饋 #6：body 在這兩頁改 100vw 撐滿、padding 歸零後，這裡的負 margin
       沒有 body padding 可抵消，會讓輸入列兩側各溢出 20px；桌機寬螢幕改成不靠負 margin，
       讓輸入列跟著撐滿 100vw、靠 .input-bar-col 自己的 max-width+margin:auto 置中，算出來
       跟 h1／.info-card／#chat-history 同一個 --content-w 欄位置，是同一個道理的另一種寫法）。 */
    .input-bar {
      flex-shrink: 0; background: var(--bg);
      position: sticky; bottom: 0; z-index: 1;
      margin: 0 calc(-1 * var(--body-pad-x));
      /* 底距 1.25rem → 1.5rem（2026-08-29）：這 4px **不是**舒適底距，是錯誤字的容身空間。
         錯誤字改成浮在輸入框正下方（見下方 .input-bar-col > .error），它要 20px 行高 ＋ 4px
         呼吸 ＝ 24px；原本的 20px 差 4px，紅字會被 scroll port 下緣切掉半行。
         ⚠️ 這條**不牴觸**下面 standalone 那段「鍵盤開著時多加底距會多一條白縫」的警告——
         那警告針對的是 +20px 等級的加法，且理由是舒適度；這裡是 +4px、且不加就會截字。
         🔧 桌機（2rem）與 standalone（2.5rem）的覆寫值都比 24px 大，兩處不用動也不准跟著改。 */
      padding: 0.75rem var(--body-pad-x) calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
    html.chat-fullscreen .input-bar { margin-left: 0; margin-right: 0; }
    /* ── 加到主畫面（standalone）的輸入列底距（04e）────────────────────────────────
       症狀：同一頁在 Safari 裡位置剛好，加到主畫面後輸入框明顯偏低。
       根因不是我們的 CSS 變了，是**底下少了一塊東西**：Safari 模式有底部工具列佔住視口
       下緣，視覺上替版面收了尾；standalone 沒有瀏覽器 chrome，視口一路延伸到安全區邊界，
       同樣的 1.25rem 底距就顯得貼底。ChatGPT／Notion AI 的手機版在這個位置都留得更多。
       ⚠️ 為什麼要 :not(.chat-short)——chat-short ＝ visualViewport 高 < 480px，手機開鍵盤
       是唯一常見成因（見 syncChatShort）。鍵盤開著時輸入列正貼著鍵盤上緣，這時候多加底距
       會在輸入框與鍵盤之間憑空多一條白縫，那是另一個 bug。所以底距只在鍵盤沒開時給。
       ⚠️ env(safe-area-inset-bottom) 在沒有 viewport-fit=cover 時是 0（本檔的 viewport meta
       正是如此，坑紀錄也記過一次把 34px 誤判成 safe-area 的事）。這裡沿用既有寫法把它留著
       當 0 項，**不要為了這條去加 viewport-fit=cover**——那會讓內容鑽到 home indicator 底下，
       是範圍大得多的改動。
       🔧 要調鬆緊就只動 2.5rem 這一個數字（現況 ＝ 瀏覽器模式的 1.5rem ＋ 16px；
          2026-08-29 基礎值 1.25→1.5rem 之後這個差額變小，2.5rem 本身沒動過）。 */
    html.is-standalone:not(.chat-short) .input-bar {
      padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
    }
    /* 桌機同理（04e，founder 走查回報「離底部有點近」）：桌機瀏覽器下緣也沒有東西替版面收尾
       ——分頁列／網址列都在**上面**，輸入列底下就是視窗邊緣。斷點沿用本檔既有的 480px 分界。
       ⚠️ 數值刻意**不跟手機 standalone 同值**：2.5rem 在桌機經 founder 實機走查判為過多，
       定案 2rem（手機 standalone 維持 2.5rem，那邊走查過沒問題）。兩個情境的舒適底距不同，
       別為了「看起來一致」把它們合成同一個數字或同一條規則。
       「手機瀏覽器」則不另外加——那裡真的有一條 Safari 工具列頂著；它吃的是基礎值
       （2026-08-29 起 1.5rem，那 4px 是錯誤字的位子，不是舒適底距）。
       :not(.chat-short) 的理由跟上一條相同：桌機把視窗縮到很矮時 chat-short 也會觸發
       （syncChatShort 掛在 window resize 上），那時候空間稀缺，底距該收掉。
       🔧 桌機要調鬆緊改這裡的 2rem；手機 standalone 改上面那條，兩者刻意分開，可以各調。 */
    @media (min-width: 481px) {
      html:not(.chat-short) .input-bar {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
      }
    }
    /* 04d Emily 回饋 #4：focus 前後 padding-bottom 曾不同值（1.25rem vs 1rem），
       focus 瞬間高度變化造成輸入框跳動。改成兩態同值，:focus-within 不再覆寫。 */
    /* max-width = --content-w − 2×1.25rem（body 內距），讓輸入框寬度與 body 內文欄完全對齊。
       ── 送出鈕壓到捲軸的修正（桌機實測）：送出鈕原本是 absolute 疊在 textarea 框內，
          而原生捲軸永遠貼在 textarea 內緣右側、且佔滿整條高度（實測 15px），兩者必撞——
          鈕的垂直位置怎麼調都沒用（改貼底也一樣，捲軸整條都在）。實測 1280 寬：捲軸佔
          x 944–959，鈕的 44px 熱區佔 912.8–956.8，重疊 12.8px：捲軸被蓋住，拖曳捲軸的
          手勢還會被鈕吃掉。解法同 ChatGPT／Claude：把鈕移出可捲區域，改成外殼的右欄。
          這層從「定位容器」升級成「輸入框外殼」——邊框／圓角／白底搬到這層來畫，
          textarea 退成無邊框的純文字區，捲軸因此只出現在 textarea 自己的右緣，
          鈕在它右邊、不再重疊。
          （max-width 原本也掛在這一層，2026-08-29 搬到外面的 .input-bar-col，值沒變、
          外框位置與改版前一致——見下一段。） */
    /* ── 欄位層：欄寬置中 ＋ 錯誤字的定位參考（2026-08-29）──────────────────────
       max-width/margin:auto 原本掛在 .input-bar-inner，2026-08-29 原封不動搬到這一層：
       算出來的欄位與改動前完全同一條（值沒變），差別只在多了一個「高度＝輸入框高度」的
       定位參考，讓錯誤字能貼著輸入框下緣浮動。position:relative 就是為了那個 top:100%。 */
    .input-bar-col {
      max-width: calc(var(--content-w) - 2.5rem); margin: 0 auto;
      position: relative;
    }
    /* 錯誤字：脫離版面流，浮在輸入框正下方 4px 的既有底部留白裡。
       ⚠️ 為什麼不留在流裡：留在流裡時它一出現就把整條輸入列撐高 28px、輸入框往上跳一截
       （founder 2026-08-29 指出這會破壞版型）。absolute 之後出錯與否版面高度完全相同。
       left:0 ＝ 輸入框**外框**的左邊界（不是 placeholder 文字的左緣，那條還要再往內 0.625rem）。
       margin-top 4px 蓋掉 .error 通用的 0.5rem：上面那筆 24px 的帳（20px 行高 ＋ 4px）要對得上，
       改大就會超出底距被切字，改動前先回去看 .input-bar 的 padding-bottom 註解。
       right:0 讓長訊息在欄寬內折行，不會撐出欄位。 */
    .input-bar-col > .error {
      position: absolute; top: 100%; left: 0; right: 0;
      margin-top: 4px;
    }
    .input-bar-inner {
      display: flex; align-items: flex-end; gap: 0.25rem;
      border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--bg);
      padding: 0.25rem;
    }
    /* line-height 明寫 1.5（24px）：textarea 的 UA 樣式是 line-height:normal（實測 19.6px），
       會蓋掉 body 的 1.6，結果輸入中的行距比送出後的對話泡泡（25.6px）緊、量高度也得靠實測。
       明寫之後行高固定 24px，下面的高度換算全部是準的，跟對話泡泡的疏密也接近。
       min-height 2.75rem 刻意跟送出鈕的 44px 等高：單行時兩個 flex item 一樣高，
       align-items:flex-end 的結果看起來仍是垂直置中（維持改版前的觀感）；長高後鈕自然沉到
       右下角。padding-block 讓單行剛好填滿 44px，公式見下方（04e 把字級 16→17px 之後，
       原本寫死的 10px 已經不對，改成 calc 從字級推算）。
       右 padding 從 3.25rem（原本用來讓位給疊上來的鈕）收成 0.5rem，只留文字與捲軸的呼吸；
       文字可用寬度因此多約 44px。max-height 20rem（320px = 12.5 行）：原本 8.5rem 只看得到 6 行，
       對照 ChatGPT（11 行）／Claude（17 行）的 100% 截圖明顯太淺，長回覆得在小窗裡捲。
       這只是 CSS 天花板，實際上限仍由 fitTextarea 的「可視高 35%」動態夾（手機開鍵盤時
       可視高變小、輸入框跟著變矮，不會吃掉整個畫面），所以放寬天花板不會讓手機爆版。
       scrollbar-width:thin 讓捲軸細一點（15px → 11px；不支援的引擎忽略，退回原生寬度，不影響版面），
       scrollbar-color 把軌道設成透明、只留淡灰滑塊：捲軸現在落在文字區與送出鈕之間，
       整條實心軌道看起來會像一條分隔線，只留滑塊才像 ChatGPT／Claude 那種輕捲軸。 */
    .input-bar-inner textarea {
      display: block; margin-bottom: 0; resize: none;
      flex: 1 1 auto; min-width: 0;
      border: none; border-radius: 0; background: transparent;
      line-height: 1.5;
      /* 上下 padding ＝（44px 鈕高 − 行盒高）/ 2，讓單行時輸入框與送出鈕仍精準等高 44px。
         行盒 ＝ font-size 1.0625rem × line-height 1.5 ＝ 25.5px；改字級時這條算術自動跟上，
         不要換回寫死的 0.625rem。左右 padding 不變（右側只留文字與捲軸的呼吸）。 */
      font-size: 1.0625rem;
      padding: calc((2.75rem - 1.5 * 1.0625rem) / 2) 0.5rem calc((2.75rem - 1.5 * 1.0625rem) / 2) 0.625rem;
      min-height: 2.75rem; max-height: 20rem; overflow-y: hidden;
      scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
    }
    /* 送出鈕排在外殼的右欄、貼底對齊（不再 absolute 疊在 textarea 上，見上方 .input-bar-inner
       註解）；44×44 透明熱區（Apple HIG），視覺圓由內層 .send-icon-visual 畫，避免看不見的
       ::after 延伸熱區（難除錯、可能疊到 textarea 文字區）*/
    .send-icon-btn {
      flex: 0 0 auto;
      width: 2.75rem; height: 2.75rem; border-radius: 50%;
      background: transparent; color: var(--on-dark); border: none; padding: 0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    /* 空白/送出中 disabled → 反灰圖示仍顯示，但不可點、hover 不出現 not-allowed(🚫) 游標（cursor:default）；
       44px 外框透明不參與反灰，反灰只作用在 32px 視覺圓（見下方 disabled 覆寫），避免疊兩層 opacity */
    .send-icon-btn, .send-icon-btn:hover { background: transparent; }
    .send-icon-btn:disabled { opacity: 1; cursor: default; }
    .send-icon-btn:hover:not(:disabled) .send-icon-visual { background: #4a443d; }
    .send-icon-btn:disabled .send-icon-visual { opacity: 0.35; }
    .send-icon-visual {
      width: 2rem; height: 2rem; border-radius: 50%;
      background: var(--text); color: var(--on-dark);
      display: flex; align-items: center; justify-content: center;
    }
    .send-icon-btn svg {
      width: 1rem; height: 1rem; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    /* 桌機把視覺圓縮小（32px → 30px，箭頭 16px → 15px）。手機維持 32px：手機上這顆是唯一
       的主要操作、指腹點的，縮了會變小氣；桌機是滑鼠點、且輸入框寬到 768px，同樣 32px 的圓
       在寬框裡看起來偏大（對照 ChatGPT 桌機截圖）。28/14 試過覺得太小，改成 30/15。斷點沿用
       本檔既有的 480px 分界，只改視覺圓，44×44 熱區兩邊都不動——縮的是看得見的圓，不是點得到的範圍。 */
    @media (min-width: 481px) {
      .send-icon-visual { width: 1.875rem; height: 1.875rem; }
      .send-icon-btn svg { width: 0.9375rem; height: 0.9375rem; }
    }