/* chat.css — 對話元件
   依賴：tokens.css
   包含：thread 主軸、msg-k、msg-u、speaker、quote-block、
         gentle/invite、typing、chips、look-list、
         桌機行長（@media min-width:1024px 的 msg-k.len-* 規則）*/

  /* ══════ 訊息系統 · 瑞士網格版 ══════ */
  .thread { position: relative; padding-left: calc(var(--gutter) * 3); padding-right: var(--gutter); padding-bottom: 24px; }

  .speaker {
    position: absolute; left: calc(var(--gutter) * -3); width: calc(var(--gutter) * 3);
    font-family: var(--mono); font-size: var(--t--2);
    line-height: var(--lh-u); text-align: center;
  }
  .speaker.k { color: var(--signal); }
  .speaker.s { color: var(--teal-ink); }

  .msg-k { position: relative; margin-bottom: 24px; }
  .msg-k .speaker { top: 0; }
  .msg-k.cont { margin-top: -16px; }

  .kq-text {
    font-family: var(--sans); font-size: var(--u-0);
    line-height: var(--lh-u); color: var(--ink);
    max-width: 50ch; text-wrap: pretty;
  }
  .kq-text p { margin-bottom: 8px; overflow-wrap: break-word; }
  .kq-text p:last-child { margin-bottom: 0; }
  .kq-text strong { color: var(--ink); font-weight: 700; }
  .kq-text a { color: var(--teal-ink); text-decoration: underline; }
  .kq-text a.shoe-page-link {
    display: inline-block;
    color: var(--signal);
    text-decoration: none;
    font-family: var(--mono);
    font-size: var(--t--1);
    letter-spacing: .3px;
    border-bottom: 1px solid var(--signal);
    padding-bottom: 1px;
    transition: opacity .25s ease;
  }
  .kq-text a.shoe-page-link:hover { opacity: .7; }
  .kq-text code {
    font-family: var(--mono); font-size: var(--t--1);
    background: var(--paper-2); padding: 1px 4px; border-radius: 2px;
  }

  .gentle .kq-text {
    font-family: var(--serif); font-size: var(--k-1);
    line-height: var(--lh-1); max-width: 20ch;
    text-wrap: balance; letter-spacing: -.01em;
  }
  .gentle .kq-text em { font-style: normal; color: var(--signal); }
  .invite .kq-text {
    font-family: var(--sans); font-weight: 900;
    font-size: var(--k-1); line-height: var(--lh-1);
    color: var(--signal); letter-spacing: -.02em;
    border-bottom: 2px solid var(--signal);
    display: inline-block; padding-bottom: 2px;
  }

  .msg-u { position: relative; margin-bottom: 24px; }
  .msg-u .speaker { top: 0; color: var(--teal-ink); }
  .u-text {
    font-family: var(--sans); font-weight: 500;
    font-size: var(--u-0); line-height: var(--lh-u);
    color: var(--ink); max-width: 30ch; text-wrap: pretty;
    white-space: pre-wrap;
  }

  .quote-block { position: relative; margin-bottom: 24px; }
  .quote-block .speaker { top: 0; color: var(--teal-ink); }
  .quote-line {
    font-family: var(--serif); font-size: var(--k-1);
    line-height: var(--lh-1); color: var(--ink);
    max-width: 22ch; text-wrap: balance;
  }
  .quote-sig {
    font-family: var(--mono); font-size: var(--t--2);
    letter-spacing: 1px; color: var(--ink-3); margin-top: 4px;
  }

  /* LOOK 含清單時放寬 K 訊息欄寬 */
  .msg-k.has-list .kq-text { max-width: 100%; }

  /* 動態行長（依字數分級，瑞士 measure 原則）
     .gentle / .invite / .has-list 走自己規則，這裡只覆寫一般 .kq-text */
  .msg-k.len-s  .kq-text { max-width: 24ch; }
  .msg-k.len-m  .kq-text { max-width: 36ch; }
  .msg-k.len-l  .kq-text { max-width: 48ch; }
  .msg-k.len-xl .kq-text { max-width: 60ch; }
  /* 長訊息不適合 gentle 的窄詩意行長，回到 measure 級距 */
  .msg-k.gentle.len-l  .kq-text,
  .msg-k.gentle.len-xl .kq-text { max-width: 48ch; }

  /* 最終鞋評加寬（手機接近全寬；桌機填滿 LOG 欄） */
  .msg-k.has-review .kq-text { max-width: 88vw; }
  @media (min-width: 1024px) {
    .msg-k.has-review .kq-text { max-width: 100%; }
  }

  /* 快速晶片 */
  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
  .chip {
    font-family: var(--mono); font-size: var(--t--1); font-weight: 700;
    letter-spacing: .3px;
    border: 1px solid var(--teal-ink); color: var(--teal-ink);
    padding: 5px 10px; background: transparent;
    cursor: pointer; border-radius: var(--r-xs);
    transition: opacity .25s ease, transform .25s ease;
  }
  .chip:hover { opacity: .8; }
  /* 動作型 chip（複製鞋評等） */
  .chip.chip--action { border-color: var(--signal); color: var(--signal); }

  /* LOG 收尾提示（log.wrapup_hint）：比 chip 更安靜的灰墨單行 */
  .wrapup-hint {
    font-family: var(--sans);
    font-weight: 400;
    font-size: var(--t--1);
    line-height: var(--lh--1);
    color: var(--ink-3);
    max-width: 30ch;
    margin-top: 4px;
    text-wrap: pretty;
  }

  /* LOOK 清單卡片（teal 容器） */
  .look-list { list-style: none; margin-bottom: 20px; }
  .look-list li {
    background: var(--teal); border-radius: 6px;
    padding: 12px 14px; margin-bottom: 8px;
  }
  .look-num {
    font-family: var(--mono); font-size: var(--t--2);
    color: var(--signal); letter-spacing: 1px;
    display: block; margin-bottom: 4px;
  }
  .look-brand { font-family: var(--sans); font-weight: 700; color: var(--ink); }
  .look-model { font-family: var(--serif); color: var(--ink); }
  .look-meta {
    font-family: var(--mono); font-size: var(--t--2);
    color: var(--teal-ink); letter-spacing: .5px; margin-top: 4px;
  }

  /* Typing 指示 */
  .typing {
    display: none; position: relative;
    padding-left: calc(var(--gutter) * 3); margin-bottom: 24px;
  }
  .typing.show { display: flex; align-items: center; gap: 8px; }
  .typing .speaker {
    position: absolute; left: calc(var(--gutter) * -3); width: calc(var(--gutter) * 3);
    font-family: var(--mono); font-size: var(--t--2);
    color: var(--signal); line-height: var(--lh-u); text-align: center;
  }
  .typing-dots { display: flex; gap: 4px; }
  .typing .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--signal);
    animation: bounce 1.2s ease-in-out infinite;
  }
  .typing .dot:nth-child(2) { animation-delay: .15s; }
  .typing .dot:nth-child(3) { animation-delay: .3s; }
  @keyframes bounce {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40% { transform: scale(1); opacity: 1; }
  }

  /* ── 使用心得 ── */
  .feedback-widget {
    margin: 8px 0 24px; display: flex; flex-direction: column; gap: 8px;
    max-width: 32ch;
  }
  .feedback-textarea {
    background: var(--paper-2); border: 1px solid var(--ink-3);
    color: var(--ink); padding: 8px 10px;
    font-family: var(--sans); font-size: var(--u-0); line-height: var(--lh-u);
    resize: vertical; min-height: 72px;
  }
  .feedback-textarea:focus { outline: none; border-color: var(--signal); }
  .feedback-submit {
    background: var(--signal); color: var(--paper); border: none;
    padding: 6px 12px; font-family: var(--mono); font-size: var(--t--2);
    letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer; align-self: flex-start;
  }
  .feedback-confirm {
    font-family: var(--serif); color: var(--ink-2);
    font-size: var(--u-0); padding: 8px 0;
  }

  /* review card 預覽版 — 設計規格：KILOQ-design-spec-v3.md §14.3（同語彙 + line-clamp:3 + mono CTA）*/
  .review-card {
    background: var(--teal); border: none;
    padding: 16px 18px; margin: 8px 0 24px;
    cursor: pointer; transition: outline-color .2s ease;
    max-width: 340px; border-radius: var(--r-sm);
    outline: 1px solid transparent;
  }
  .review-card:hover { outline-color: var(--signal); }
  .review-card-meta {
    font-family: var(--mono); font-size: var(--t--2);
    color: var(--ink-3); margin-bottom: 8px; letter-spacing: .5px;
  }
  .review-card-quote {
    font-family: var(--serif); font-size: var(--u-0);
    line-height: 1.55; color: var(--ink); margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .review-card-cta {
    font-family: var(--mono); font-size: var(--t--2);
    color: var(--signal); text-align: right; letter-spacing: 1px;
  }

  /* ── look-spec-msg（LOG→LOOK 規格同步，以訊息形式注入 thread）── */
  .look-spec-msg .kq-text { max-width: min(100%, 52ch); }
  .spec-intro {
    font-family: var(--sans); font-size: var(--u-0);
    color: var(--ink-2); margin-bottom: 12px;
  }
  .spec-dl {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px;
  }
  .spec-dl dt {
    font-family: var(--mono); font-size: var(--t--1);
    color: var(--ink-3); padding: 3px 0; text-align: right;
  }
  .spec-dl dd {
    font-family: var(--mono); font-size: var(--t--1);
    color: var(--ink); padding: 3px 0; overflow-wrap: anywhere;
  }

  /* 桌機行長放寬：版面有空間，行長伸展至 Swiss 偏寬段 */
  @media (min-width: 1024px) {
    .msg-k.len-s  .kq-text { max-width: 40ch; }
    .msg-k.len-m  .kq-text { max-width: 44ch; }
    .msg-k.len-l  .kq-text { max-width: 60ch; }
    .msg-k.len-xl .kq-text { max-width: 76ch; }
    .msg-k.gentle.len-l  .kq-text,
    .msg-k.gentle.len-xl .kq-text { max-width: 60ch; }
  }

/* ── roles/pace 前移 picker（kiloq-rolespace-frontload）+ 評分 nudge ── */
.kqfl { margin: 4px 0 8px; }
.kqfl-group { margin-bottom: 20px; }
.kqfl-label {
  font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh--2);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px;
}
.kqfl-opt { color: var(--ink-2); margin-left: 8px; letter-spacing: .02em; text-transform: none; }
.kqfl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kqfl-chip {
  font-family: var(--mono); font-weight: 700; font-size: var(--t--1); line-height: 1;
  color: var(--ink-2); background: transparent; border: 1px solid var(--ink-3);
  border-radius: var(--r-xs); padding: 9px 14px; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.kqfl-chip:hover { color: var(--ink); border-color: var(--ink-2); }
.kqfl-chip.active { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.kqfl-actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.kqfl-go {
  font-family: var(--mono); font-weight: 700; font-size: var(--t--1); letter-spacing: .04em;
  color: var(--ink-3); background: none; border: none; cursor: pointer; padding: 0;
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.kqfl-go.ready { color: var(--signal); border-bottom-color: var(--signal); }
.kqfl-skip {
  font-family: var(--mono); font-size: var(--t--2); letter-spacing: .04em;
  color: var(--ink-3); background: none; border: none; cursor: pointer;
}
.kqfl-skip:hover { color: var(--ink-2); }
.kqfl-done {
  font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh--2);
  letter-spacing: .04em; color: var(--ink-3); margin: 4px 0 8px;
}
.kq-rate-nudge {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: var(--t--2); letter-spacing: .04em; color: var(--ink-3);
}