/* ====================================================================
   自由提問區（1.25.0）：左欄對話串清單、右欄對話；桌機兩欄、手機單欄（開啟某串時隱藏清單、頂列返回）
   ==================================================================== */
.ask-page { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: 40px; }
.ask-side { position: sticky; top: calc(var(--topbar-h) + 16px); display: flex; flex-direction: column; gap: 10px; }
.ask-side-head .btn.block { width: 100%; justify-content: center; }
.ask-side-ro { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); padding: 10px 12px; border: 1px dashed var(--border-2); border-radius: 12px; }
.ask-side-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--text-2); padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); }
.ask-side-note .icon { flex: 0 0 auto; margin-top: 2px; color: var(--primary); }
.ask-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100dvh - var(--topbar-h) - 200px); overflow: auto; padding-right: 2px; }
.ask-item { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.ask-item:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow-xs); }
.ask-item.is-on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.ask-item-t { display: flex; gap: 6px; align-items: flex-start; font-weight: 700; font-size: 14.5px; line-height: 1.45; word-break: break-word; }
.ask-item-t .icon { flex: 0 0 auto; margin-top: 3px; color: var(--amber); }
.ask-item-s { display: flex; gap: 4px; align-items: center; margin-top: 4px; font-size: var(--fs-min); color: var(--text-3); }
.ask-item-s .dot { width: 8px; height: 8px; }
.ask-list-empty { font-size: 13.5px; color: var(--text-2); line-height: 1.6; padding: 12px; border: 1px dashed var(--border-2); border-radius: 12px; }

.ask-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ask-head { display: flex; gap: 12px; align-items: flex-start; }
.ask-head .min0 { min-width: 0; }
.ask-title { font-size: 20px; line-height: 1.35; margin: 0; word-break: break-word; }
.ask-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; }
.ask-meta .chip .dot { width: 7px; height: 7px; margin-right: 4px; }
.ask-head-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* 歡迎卡（沒選對話串） */
.ask-welcome { display: flex; flex-direction: column; gap: 14px; }
.ask-welcome-card { padding: 20px 22px; }
.ask-welcome-head { display: flex; gap: 14px; align-items: flex-start; }
.ask-welcome-head h2 { margin: 0 0 6px; font-size: 20px; }
.ask-welcome-head p { margin: 0; color: var(--text-2); line-height: 1.7; font-size: 14.5px; }
.ask-welcome-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ask-welcome-points li { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ask-welcome-points li .icon { flex: 0 0 auto; margin-top: 3px; color: var(--primary); }
.ask-welcome-points li b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.ask-welcome-points li span { display: block; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }

/* 訊息 */
.ask-msgs { display: flex; flex-direction: column; gap: 14px; min-height: 120px; }
.ask-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 100%; }
.ask-msg.is-user { align-self: flex-end; max-width: 92%; }
.ask-msg.is-asst { align-self: flex-start; max-width: 100%; width: 100%; }
.ask-msg-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.ask-msg.is-user .ask-msg-body { align-items: flex-end; }
.ask-msg-head { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-min); color: var(--text-3); padding: 0 4px; }
.ask-msg-name { font-weight: 700; color: var(--text-2); }
.ask-msg-avatar.avatar { width: 32px; height: 32px; font-size: var(--fs-min); margin-bottom: 2px; flex: 0 0 auto; }
.ask-msg-avatar-bot { width: 32px; height: 32px; border-radius: 50%; background: var(--ink-800); display: inline-grid; place-items: center; flex: 0 0 auto; margin-bottom: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), var(--shadow-xs); }
.ask-msg-avatar-bot img { width: 22px; height: 22px; display: block; }
.ask-msg-avatar-bot.lg { width: 44px; height: 44px; } .ask-msg-avatar-bot.lg img { width: 30px; height: 30px; }
.ask-bubble { position: relative; padding: 12px 16px; border-radius: 16px; line-height: 1.7; font-size: 15px; word-break: break-word; max-width: 100%; }
.ask-bubble.is-user { background: var(--bubble-us); border: 1px solid var(--border-2); border-bottom-right-radius: 6px; box-shadow: inset 0 2px 0 var(--primary), var(--shadow-card); }
.ask-bubble.is-user p { margin: 0; } .ask-bubble.is-user p + p { margin-top: 6px; }
.ask-bubble.is-asst { background: var(--bubble-them); border: 1px solid var(--border); border-bottom-left-radius: 6px; box-shadow: var(--shadow-sm); }
.ask-bubble.is-muted { color: var(--text-3); font-size: 13.5px; }
.ask-md { font-size: 14.75px; line-height: 1.8; }
.ask-md > :first-child { margin-top: 0; } .ask-md > :last-child { margin-bottom: 0; }
.ask-actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-2); }
.ask-bubble.is-failed { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.ask-fail { display: flex; gap: 8px; align-items: flex-start; color: var(--red); font-size: 14px; line-height: 1.6; }
.ask-fail .icon { flex: 0 0 auto; margin-top: 3px; }
.ask-bubble.is-live { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.ask-live-head { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.ask-live-head .dot { width: 9px; height: 9px; }
.ask-live-log { margin-top: 8px; display: grid; gap: 3px; font-size: 13px; color: var(--text-2); }
.ask-live-log .t { display: inline-block; min-width: 62px; font-variant-numeric: tabular-nums; color: var(--text-3); }

/* 輸入框（黏在底部） */
.ask-composer { position: sticky; bottom: 12px; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border-2)); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--primary) 6%, transparent); }
.ask-composer:focus-within { border-color: var(--primary); box-shadow: var(--shadow), 0 0 0 .5px var(--primary), 0 0 0 4px var(--ring); }
.ask-text { min-height: 48px; max-height: 260px; padding: 8px 6px 4px; font-size: 15px; border: 0; box-shadow: none; background: transparent; resize: none; }
.ask-text:focus { box-shadow: none; }
.ask-composer-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ask-composer-hint { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--text-2); line-height: 1.5; min-width: 0; }
.ask-composer-hint .icon { flex: 0 0 auto; margin-top: 2px; color: var(--primary); }
/* 1.27.0 多模型：輸入框左下的模型下拉（管理員有開放清單才出現） */
.ask-model-wrap { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; max-width: 100%; }
.ask-model-wrap .icon { color: var(--primary); flex: 0 0 auto; }
.ask-model { max-width: 240px; font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
.ask-msg-model { font-weight: 600; color: var(--text-2); }
.ask-meta-model .icon { margin-right: 3px; }

@media (max-width: 900px) {
  .ask-page { grid-template-columns: 1fr; gap: 14px; }
  .ask-side { position: static; }
  .ask-list { max-height: none; }
  .ask-page.is-open .ask-side { display: none; }
  .ask-welcome-points { grid-template-columns: 1fr; }
  .ask-msg.is-user { max-width: 100%; }
  .ask-composer { bottom: calc(var(--tabbar-h, 64px) + 8px); }
  .ask-composer-keys { display: none; }
  .ask-composer-hint { flex: 1 1 100%; order: 3; }
  /* 1.46.x 手機輸入列一列排好：附檔｜模型（撐滿）｜送出靠右；原本「送出」被擠到下一行、孤零零靠左 */
  .ask-composer-row { gap: 8px; }
  .ask-composer-row > .grow { display: none; }
  .ask-model-wrap { flex: 1 1 120px; min-width: 0; }
  .ask-model { max-width: none; width: 100%; }
  .ask-composer-row > .btn.primary { margin-left: auto; flex: 0 0 auto; }
  .ask-head { flex-wrap: wrap; }
  .ask-head-actions .btn span { display: none; }
}
/* 1.46.x 回答裡的表格：手機不要逐字換行——各欄取自然寬度（最寬到畫面兩倍多）、整張表橫向捲動、不另開垂直捲軸（.md-table 由 mountMd 包好） */
@media (max-width: 640px) {
  .ask-md .md-table { max-height: none; }
  .ask-md .md-table table { width: max-content; min-width: 100%; max-width: 220%; }
  .ask-md .md-table th, .ask-md .md-table td { min-width: 120px; }
}

/* ====================================================================
   1.34.0 提問附件（老闆：「提問也支援傳檔案或圖片阿，也支援貼上」）：輸入框上方的附件 chips、拖放高亮、訊息下方的附件列
   ==================================================================== */
.ask-composer.is-drop { border-color: var(--primary); border-style: dashed; background: var(--primary-soft); }
.ask-attach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 2px 4px 0; }
.ask-attach[hidden] { display: none; }
.ask-chip-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 4px 0 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; color: var(--text); }
.ask-chip-file .icon { color: var(--primary); flex: 0 0 auto; }
.ask-chip-file img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.ask-chip-file.is-img { padding-left: 4px; }
.ask-chip-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-chip-size { color: var(--text-3); font-size: 12px; font-family: var(--font-num); }
.ask-chip-x { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ask-chip-x:hover { background: var(--red-soft); color: var(--red-deep); }
.ask-attach-note { font-size: 12px; color: var(--text-3); }
.ask-attach-btn { gap: 6px; }
.ask-attach-btn.disabled { opacity: .5; pointer-events: none; }
.ask-attach-btn .icon { color: var(--primary); }
.ask-msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; justify-content: flex-end; }
.ask-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text); text-decoration: none; }
.ask-file:hover { border-color: var(--primary); text-decoration: none; }
.ask-file .icon { color: var(--primary); flex: 0 0 auto; }
.ask-file-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-file-size { color: var(--text-3); font-size: 12px; font-family: var(--font-num); }
.ask-file.is-img { flex-direction: column; align-items: flex-start; gap: 4px; height: auto; padding: 6px; }
.ask-file.is-img img { max-width: 220px; max-height: 160px; border-radius: 8px; display: block; object-fit: cover; }
.ask-file.is-img .ask-file-name { max-width: 220px; font-size: 12px; color: var(--text-2); }
.ask-file-live { align-self: center; }
@media (max-width: 900px) {
  .ask-chip-name, .ask-file-name { max-width: 140px; }
  .ask-file.is-img img { max-width: 160px; max-height: 120px; }
}

/* ====================================================================
   1.66.0 提問：歡迎畫面以輸入框為主角（範例一鍵帶入、一行重點）；清單依日期分組；對話串頭部改小圖示鈕
   ==================================================================== */
.ask-welcome2 { max-width: 820px; width: 100%; margin: 0 auto; gap: 16px; padding-top: 8px; }
.ask-hero { display: flex; align-items: center; gap: 14px; }
.ask-hero .ask-msg-avatar-bot.lg { width: 52px; height: 52px; margin: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 26px -14px rgba(47, 195, 166, 0.7); }
.ask-hero .ask-msg-avatar-bot.lg img { width: 32px; height: 32px; }
.ask-hero-text h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; }
.ask-hero-text p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.ask-welcome2 .ask-composer { position: relative; bottom: auto; }
.ask-welcome2 .ask-text { min-height: 72px; }
.ask-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ask-examples-k { font-size: var(--fs-min); font-weight: 800; letter-spacing: .06em; color: var(--text-3); margin-right: 2px; }
.chip.pill.ask-example { cursor: pointer; height: 32px; padding: 0 13px; font-size: 13.5px; font-weight: 600; background: var(--tint-1); border-color: transparent; color: var(--text-2); transition: background var(--dur), color var(--dur); }
.chip.pill.ask-example:hover { background: var(--primary-soft); color: var(--primary-deep); }
.ask-feats { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.ask-feats li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.ask-feats li .icon { flex: 0 0 auto; margin-top: 2px; color: var(--primary); }
.ask-list-group + .ask-list-group { margin-top: 8px; }
.ask-list-group { display: flex; flex-direction: column; gap: 6px; }
.ask-list-day { padding: 2px 4px 0; font-size: var(--fs-min); font-weight: 800; letter-spacing: .06em; color: var(--text-3); }
.ask-head-actions .btn.ghost.icon-btn { color: var(--text-2); }
.ask-head-actions .btn.ghost.icon-btn:hover { color: var(--primary-deep); background: var(--primary-soft); }
.ask-composer-keys { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-min); color: var(--text-3); white-space: nowrap; }
.ask-composer-keys .app-kbd { height: 20px; padding: 0 5px; }
@media (max-width: 900px) {
  /* 手機沒開對話串：先給輸入框（主角），之前的對話排在下面；「新對話」鈕在這裡是多餘的 */
  .ask-page:not(.is-open) .ask-main { order: -1; }
  .ask-page:not(.is-open) .ask-side-head { display: none; }
  .ask-feats { grid-template-columns: minmax(0, 1fr); }
  .ask-hero-text h2 { font-size: 21px; }
  .ask-hero .ask-msg-avatar-bot.lg { width: 44px; height: 44px; }
  .ask-composer-keys { display: none; }
}
@media (max-width: 599px) { .ask-hero-text p { display: none; } .ask-welcome2 { gap: 14px; padding-top: 0; } }
@media (min-width: 901px) { .ask-top-new { display: none; } }
/* 對話串頭部的三顆小圖示鈕跟標題同一列（手機不再自己佔一行） */
@media (max-width: 900px) { .ask-head { flex-wrap: nowrap; } .ask-head-actions { gap: 2px; margin-right: -6px; } }
/* 1.66.0 第二輪（介面稽核 3.8）：說明與四項特色收進「怎麼運作？」，首屏只剩問題輸入與範例 */
.ask-how-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--link); text-decoration: none; }
.ask-how-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.ask-how-toggle .icon { width: 15px; height: 15px; }
.ask-how-body p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.ask-how .ask-feats { margin-top: 8px; padding-top: 10px; }
