/* chrome.css — 全站 chrome 元件（純元件，無版面假設）
   依賴：tokens.css
   包含：html/body layout、mode-stripe、masthead、
         page-dots、app-btn、mode-label、mode-switch-btn、
         swipe-wrap、swipe-hint、input-stack、kenlu-credit、
         keyboard-open、底部 sheet（bottom-sheet 全部）
   不包含：
     - 對話元件（→ chat.css）
     - 桌機版面假設（→ css/layouts/home.css）
   原則：chrome.css 的任何規則不假設頁面是幾欄、圓點要不要顯示。
         這些由各頁面的 layout CSS 決定。*/

  body {
    background: var(--paper); color: var(--ink);
    font-family: var(--sans); font-size: var(--u-0); line-height: var(--lh-u);
    -webkit-font-smoothing: antialiased; line-break: strict;
    transition: background .35s, color .35s;
  }
  /* app-shell：固定視窗高、不捲動、column flex 的 app 樣式頁面
     index.html / v2/index.html 需要；shoe.html / profile.html 不需要 */
  html:has(body.app-shell), body.app-shell { height: 100%; height: 100dvh; overflow: hidden; }
  body.app-shell { display: flex; flex-direction: column; }

  /* 手機：position: absolute 防止 iOS 鍵盤推移
     iOS Safari 只推移 position: static 的文件流。
     absolute 的元素不受推移影響，配合 visualViewport
     動態設高度，鍵盤開啟時 body 自然縮小。 */
  @media (max-width: 1023px) {
    html:has(body.app-shell) {
      position: relative;  /* absolute 的 containing block */
    }
    body.app-shell {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 100%;  /* 覆蓋 100dvh，改用相對 html 的 100% */
    }
    /* v6: 對話錨定底部，最新訊息貼輸入框。DOM 順序：.typing 在 .thread 前。
       .typing（1st child）→ 視覺最下方；.thread（2nd child）→ 往上堆。
       scrollTop=0 即最新訊息，iOS 推移切的是頂部舊內容，非當下對話。 */
    .swipe-page:not(.page-lab) {
      display: flex;
      flex-direction: column-reverse;
    }
    /* 內容不滿一屏時，貼齊底部，避免頂部可捲動的空白。
       column-reverse 下 margin-top:auto 作用在 flex 末端（視覺上方），把 .thread 往視覺底部推。 */
    .swipe-page:not(.page-lab) > .thread {
      margin-top: auto;
    }
  }

  /* ── 頂部色條（模式指示，3px） ── */
  .mode-stripe {
    height: 3px; flex-shrink: 0;
    background: var(--teal-ink);
    transition: background .4s;
  }
  .at-log .mode-stripe { background: var(--signal); }

  /* ── 頁眉 ── */
  .masthead {
    display: flex; justify-content: flex-start; align-items: center;
    gap: 16px; padding: 14px 20px 12px 12px; flex-shrink: 0;
    transition: margin-top .25s ease, opacity .2s ease;
  }
  .logo { text-decoration: none; flex-shrink: 0; }

  .masthead-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

  /* ── inline-edit 元件（kqInlineEdit.attach，規格見 KILOQ_inline_edit_spec_v1.md）── */
  /* 點擊可編輯提示 */
  .kq-editable { cursor: text; }
  .kq-editable:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
  /* edit row：flex 橫排；加上 caller 的 rowClass 讓 input font:inherit 吃到正確字體 */
  .kq-edit-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  /* input：font:inherit 繼承 .kq-edit-row 的字體（由 rowClass 決定）*/
  .kq-inline-input {
    font: inherit; color: inherit; letter-spacing: inherit;
    background: transparent; border: none;
    border-bottom: 1px solid var(--ink-3);
    outline: none; padding: 0; min-width: 60px;
  }
  .kq-inline-input:focus { border-bottom-color: var(--teal-border); }
  /* 儲存按鈕 */
  .kq-save-btn {
    font-family: var(--mono); font-size: var(--t--2); letter-spacing: .04em;
    background: none; border: 1px solid var(--ink-3); color: var(--ink-3);
    padding: 3px 10px; cursor: pointer; border-radius: var(--r-xs); flex-shrink: 0;
    transition: border-color .15s, color .15s;
  }
  .kq-save-btn:hover { border-color: var(--teal-border); color: var(--teal-ink); }
  /* 錯誤提示文字 */
  .kq-edit-hint {
    font-family: var(--mono); font-size: var(--t--2); color: var(--signal);
    width: 100%;
  }

  /* ── 品牌字詞行內標記（問候句中「KILOQ」；Barlow 700，不套滿 800 wordmark，守 §13 稀有才有力）── */
  .kq-brand-word { font-family: var(--logo); font-weight: 700; text-transform: uppercase; }

  /* ── 登入後頁眉 /by/{username} 連結 ── */
  .kq-userlink {
    font-family: var(--logo); font-weight: 800;
    font-size: var(--k-1); letter-spacing: -.02em;
    color: var(--ink); text-decoration: none;
    transition: color .18s; flex-shrink: 0;
  }
  .kq-userlink:hover { color: var(--signal); }

  /* ── 頁眉 LOGIN / LOGOUT 鈕（規格見 §14.12）── */
  .kq-loginbtn {
    font-family: var(--mono); font-weight: 500; font-size: var(--t--1);
    letter-spacing: .12em; text-transform: uppercase;
    background: none; border: 1px solid var(--ink-3); color: var(--ink-3);
    border-radius: var(--r-xs); cursor: pointer; padding: 5px 10px;
    transition: border-color .18s, color .18s; flex-shrink: 0;
  }
  .kq-loginbtn:hover { border-color: var(--signal); color: var(--ink); }

  /* ── 登入燈箱 shell（.kq-overlay + .kq-panel）── */
  .kq-overlay {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    visibility: hidden; opacity: 0;
    transition: opacity .25s, visibility .25s;
  }
  .kq-overlay.open { visibility: visible; opacity: 1; }
  .kq-overlay .scrim { position: absolute; inset: 0; background: var(--scrim); }
  .kq-panel {
    position: relative; z-index: 1;
    background: var(--bubble); border: 1px solid var(--ink-3); border-radius: var(--r-sm);
    padding: 40px 40px 44px; width: min(400px, calc(100% - 32px));
    transform: translateY(12px); opacity: 0;
    transition: transform .25s, opacity .25s;
  }
  .kq-overlay.open .kq-panel { transform: translateY(0); opacity: 1; }
  .kq-panel__close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; cursor: pointer; padding: 4px;
    font-family: var(--mono); font-size: var(--u-0); color: var(--ink-3); line-height: 1;
    transition: color .15s;
  }
  .kq-panel__close:hover { color: var(--ink); }
  /* bottom sheet（≤560px）*/
  @media (max-width: 560px) {
    .kq-overlay { align-items: flex-end; }
    .kq-panel {
      width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0;
      padding-bottom: calc(44px + env(safe-area-inset-bottom));
      transform: translateY(24px); opacity: 1;
    }
    .kq-overlay.open .kq-panel { transform: translateY(0); }
  }

  /* ── auth form 內容（.kq-authform）── */
  .kq-authform__mark {
    font-family: var(--logo); font-weight: 800; font-size: var(--k-2);
    color: var(--ink); line-height: 1; margin-bottom: 6px;
  }
  .kq-authform__welcome {
    font-family: var(--mono); font-weight: 400; font-size: var(--k-1);
    color: var(--ink-2); letter-spacing: .04em; line-height: var(--lh-1);
  }
  .kq-authform__rule {
    height: var(--rule); background: var(--signal);
    border-radius: var(--r-0); margin: 40px 0 22px;
  }
  .kq-authform__row { display: flex; align-items: center; gap: 12px; }
  .kq-authform__input {
    flex: 1; background: none; border: none; outline: none; min-width: 0;
    font-family: var(--sans); font-size: var(--u-0); color: var(--ink);
    line-height: var(--lh-u); padding: 6px 0;
  }
  .kq-authform__input::placeholder { color: var(--ink-3); }
  .kq-authform__input.is-code { letter-spacing: .3em; font-family: var(--mono); }
  .kq-authform .kq-submit { flex-shrink: 0; }
  .kq-authform__helper {
    margin-top: 16px;
    font-family: var(--mono); font-size: var(--t--1); color: var(--ink-2);
    line-height: var(--lh--1); min-height: calc(2 * var(--lh--1));
  }
  .kq-authform__helper a { color: var(--signal); text-decoration: underline; cursor: pointer; }
  .page-dots { display: flex; gap: 6px; align-items: center; }
  .page-dots .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-3);
    transition: background .3s, transform .3s;
  }
  .page-dots .dot.on { background: var(--teal-ink); transform: scale(1.3); }
  .at-log .page-dots .dot.on { background: var(--signal); }

  .app-btn {
    font-family: var(--mono); font-size: var(--t--2);
    letter-spacing: 1px; text-transform: uppercase;
    background: transparent; border: none;
    color: var(--ink-3); cursor: pointer;
  }

  /* ── 模式標籤條 ── */
  .mode-label {
    padding: 6px 20px 10px; flex-shrink: 0;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
  }
  .mode-label-left { display: flex; flex-direction: column; gap: 1px; }
  .mode-name {
    font-family: var(--mono); font-size: var(--k-1);
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--teal-ink); transition: color .4s;
  }
  .at-log .mode-name { color: var(--signal); }
  .mode-switch-btn {
    font-family: var(--mono); font-size: var(--t--2);
    letter-spacing: 1px; text-transform: uppercase;
    border: 1px solid var(--teal-ink); color: var(--teal-ink);
    padding: 5px 10px; border-radius: 2px;
    transition: border-color .4s, color .4s, transform .15s;
    user-select: none;
  }
  .at-log .mode-switch-btn { border-color: var(--signal); color: var(--signal); }
  .mode-switch-btn:active { transform: scale(.95); }

  /* ── Swipe 容器 ── */
  .swipe-wrap { flex: 1; overflow: hidden; position: relative; }
  .swipe-track {
    display: flex; height: 100%;
    width: 200%;
    transform: translateX(-50%);
    /* 手機：無動畫，直接切換（避免切換時 input-stack 錯位）
       桌機：home.css 以 row-reverse 顯示，transition 無意義亦不加 */
    will-change: transform;
  }
  .at-log .swipe-track { transform: translateX(0); }

  .swipe-page {
    width: 50%; height: 100%;
    overflow-y: auto; padding: calc(var(--gutter) * 3) 0;
    position: relative; transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-bottom: calc(var(--gutter) * 3);
  }
  .swipe-page::-webkit-scrollbar { display: none; }

  /* ── Panel 邊框閃動（開場接力轉場用） ── */
  @keyframes panel-flash {
    0%   { box-shadow: inset 0 0 0 0px transparent; }
    18%  { box-shadow: inset 0 0 0 2px var(--panel-flash-color); }
    100% { box-shadow: inset 0 0 0 0px transparent; }
  }
  .page-log.panel-flash  {
    --panel-flash-color: var(--signal);
    animation: panel-flash 550ms ease-out forwards;
  }
  .page-look.panel-flash {
    --panel-flash-color: var(--teal-ink);
    animation: panel-flash 550ms ease-out forwards;
  }

  /* Swipe 提示 */
  .swipe-hint {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    font-family: var(--mono); font-size: var(--t--2); letter-spacing: 1px;
    color: var(--ink-3); text-transform: uppercase; white-space: nowrap;
    pointer-events: none; transition: opacity .5s;
  }
  .swipe-hint.hidden { opacity: 0; }

  /* ── 輸入區 ── */
  .input-stack { flex-shrink: 0; position: relative; overflow: hidden; }
  .input-panels {
    display: flex; width: 200%;
    transform: translateX(-50%);
    /* transition 移除：與 swipe-track 同步，手機無動畫直接切換 */
  }
  .at-log .input-panels { transform: translateX(0); }

  .input-panel {
    width: 50%;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  }
  .input-panel.log-input { border-top: 2px solid var(--signal); }
  .input-panel.look-input { border-top: 2px solid var(--teal-ink); }

  .input-row { display: flex; gap: 8px; align-items: flex-end; }

  /* 連按兩下 Enter 送出 提示（手機鍵盤開啟時才顯示）*/
  .enter-hint {
    margin: 0; padding: 2px 0 0;
    font-size: 10px; line-height: 1.4;
    color: var(--ink-3);
    text-align: right;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
  }
  .keyboard-open .enter-hint { opacity: 1; }

  .ta {
    flex: 1; background: transparent; border: none; resize: none;
    font-family: var(--sans); font-size: var(--u-0); line-height: var(--lh-u);
    color: var(--ink); padding: 6px 0; max-height: 88px;
    -webkit-appearance: none;
  }
  .ta::placeholder { color: var(--ink-3); }
  .ta:focus { outline: none; }

  /* ── kq-submit：全站統一提交鈕（規格見 KILOQ-design-spec-v3.md §14.11）── */
  .kq-submit {
    border: none; border-radius: var(--r-0); cursor: pointer; flex-shrink: 0;
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--signal); color: var(--paper);   /* 預設 signal；LOOK/LAB 覆寫 */
    transition: opacity .15s ease;
  }
  .look-input .kq-submit,
  .lab-input  .kq-submit { background: var(--teal-ink); }
  .kq-submit:disabled { opacity: .25; cursor: not-allowed; }
  .kq-submit:not(:disabled):hover { opacity: .85; }

  /* ── Keyboard-open mode badge（手機鍵盤彈起時顯示 KILOQ · 模式） ── */
  .kb-badge { display: none; }
  .keyboard-open .kb-badge {
    display: block;
    font-family: var(--mono); font-size: var(--t--2);
    letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 6px;
  }
  .look-input .kb-badge { color: var(--teal-ink); }
  .log-input .kb-badge { color: var(--signal); }

  /* ── BottomSheet ── */
  #bottom-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500; opacity: 0; pointer-events: none;
    transition: opacity 300ms cubic-bezier(.22, 1, .36, 1);
  }
  #bottom-sheet-backdrop.open { opacity: 1; pointer-events: all; }
  #bottom-sheet {
    position: fixed; bottom: 0; left: 50%;
    width: 100%; max-width: 1200px;
    height: 75vh; max-height: 100vh;
    background: var(--paper);
    border-top: 1px solid var(--paper-2);
    z-index: 501; transform: translateX(-50%) translateY(100%);
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
    overflow: hidden; display: flex; flex-direction: column;
  }
  #bottom-sheet.open { transform: translateX(-50%) translateY(0); }
  #bottom-sheet-handle {
    width: 36px; height: 4px;
    background: var(--ink-3); border-radius: 2px;
    margin: 12px auto 0; flex-shrink: 0;
  }
  #bottom-sheet-handle-area { flex-shrink: 0; }
  .sheet-handle-row {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 8px 16px 0;
  }
  #bottom-sheet-close {
    background: none; border: none; color: var(--ink-3);
    font-size: 20px; cursor: pointer; padding: 4px 8px; line-height: 1;
  }
  #bottom-sheet-header { padding: 16px 20px 12px; flex-shrink: 0; }
  #bottom-sheet-meta {
    font-family: var(--mono); font-size: var(--t--2);
    color: var(--ink-3); margin-bottom: 4px; letter-spacing: .5px;
  }
  #bottom-sheet-title {
    font-family: var(--logo); font-weight: 700;
    font-size: var(--u-0); color: var(--ink); margin-bottom: 8px;
  }
  .sheet-lang-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
  .sheet-lang-btn {
    font-family: var(--mono); font-size: var(--t--2);
    padding: 4px 12px; border: 1px solid var(--ink-3);
    background: transparent; color: var(--ink-3);
    cursor: pointer; letter-spacing: .5px;
    transition: color 150ms, border-color 150ms;
  }
  .sheet-lang-btn.active { color: var(--ink); border-color: var(--ink); }
  #bottom-sheet-divider { height: 1px; background: var(--paper-2); margin: 0 20px; flex-shrink: 0; }
  #bottom-sheet-body {
    flex: 1; overflow-y: auto; padding: 16px 20px 32px;
    font-family: var(--sans); font-size: var(--t--1);
    line-height: 1.7; color: var(--ink);
    -webkit-overflow-scrolling: touch;
  }
  #bottom-sheet-date {
    margin-top: 20px; font-family: var(--mono);
    font-size: var(--t--2); color: var(--ink-3); letter-spacing: .5px;
  }

  /* ── KENLU 微標 ── */
  .kenlu-credit {
    position: fixed; bottom: 4px; right: 12px;
    font-family: var(--mono); font-size: var(--t--2);
    letter-spacing: 1px; color: var(--ink-3);
    z-index: 5; pointer-events: none;
  }
  .kenlu-credit a {
    color: var(--ink-3); text-decoration: none; pointer-events: auto;
    transition: color .3s ease;
  }
  .kenlu-credit a:hover { color: var(--ink-2); }

  /* 手機版隱藏 powered by KENLU */
  @media (max-width: 1023px) {
    .powered-by, .kenlu-credit { display: none; }
  }

  /* ── Grid Overlay（設計階段用；?grid=1 或 Cmd+G / Ctrl+G 開啟）── */
  .grid-overlay {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 9000;
    display: none;
  }
  .grid-overlay.on { display: block; }

  /* 8px baseline 橫線 */
  .grid-overlay::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      transparent calc(var(--baseline) - 1px),
      rgba(80,180,255,.15) calc(var(--baseline) - 1px),
      rgba(80,180,255,.15) var(--baseline)
    );
  }

  /* 各 panel 各 6 欄（雜誌跨頁，上下左右 margin = gutter × 3） */
  .grid-cols {
    position: absolute; inset: 0;
    padding: calc(var(--gutter) * 3);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gutter);
  }
  .grid-col {
    background: rgba(80,180,255,.07);
    border-left:  1px solid rgba(80,180,255,.2);
    border-right: 1px solid rgba(80,180,255,.2);
  }