/* ====================================================================
   懸浮 AI 助手（1.30.0）：右下角懸浮鈕＋側邊面板；桌機固定右下 420px、手機全幅
   ==================================================================== */
/* 1.66.0 浮鈕不壓內容（老闆：AI 浮鈕壓到執行分頁「現在該做什麼」、步驟抬頭、工作紀錄目錄）——停哪、多寬由 assistant.js 量出來：
   桌機貼視窗邊緣、待在內容欄外的留白：留白夠寬是完整小膠囊（只露標誌，滑過展開「AI 助手」）；
   不夠寬只露細把手 .is-handle（寬＝留白扣間隔；不到 22px 連標誌也收起、只留一條翡翠線 .is-thin），滑過或鍵盤焦點展開成完整膠囊；
   手機／平板收進底部導覽列一端 .is-tabdock，像第八個分頁（導覽讓出一格），永遠不浮在內容上。
   拖曳照舊（1.34.0：拖到哪停哪、放開貼左或右邊、位置記 localStorage），貼左邊時膠囊方向反過來（.is-left） */
.ai-fab { position: fixed; right: 0; bottom: 92px; z-index: 26; height: 44px; min-width: 46px; max-width: 12em; padding: 0 12px 0 11px; border: 0; border-radius: 22px 0 0 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0; overflow: hidden; background: var(--ink-grad); color: var(--on-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px -12px rgba(10, 27, 30, 0.55), 0 8px 18px -12px rgba(47, 195, 166, 0.5); transition: top .18s var(--ease), transform .26s var(--ease-out, var(--ease)), box-shadow var(--dur), opacity .2s, gap .2s, min-width .22s var(--ease), max-width .22s var(--ease), padding .22s var(--ease); touch-action: none; user-select: none; -webkit-user-select: none; }
.ai-fab[hidden] { display: none; }
.ai-fab.is-left { border-radius: 0 22px 22px 0; padding: 0 11px 0 12px; }
.ai-fab.is-dragging { cursor: grabbing; transition: none; border-radius: 22px; transform: scale(1.04); box-shadow: var(--shadow-lg), 0 14px 30px -8px rgba(0, 0, 0, 0.35); }
.ai-fab:active { transform: scale(.97); }
.ai-fab .ai-fab-mark { width: 22px; height: 22px; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(47, 195, 166, 0.45)); transition: width .22s var(--ease), height .22s var(--ease); }
/* 1.40.0 可拖曳：子元素不吃指標事件、圖片不可被瀏覽器拖走、按住不選字（老闆：「為啥這又不能移動了？」） */
.ai-fab { -webkit-touch-callout: none; }
.ai-fab > * { pointer-events: none; -webkit-user-drag: none; user-select: none; }
/* 字樣平常收起，滑過或鍵盤焦點才展開（膠囊往內容那側長出來） */
.ai-fab .ai-fab-txt { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 13.5px; font-weight: 800; letter-spacing: .02em; color: var(--on-ink); transition: max-width .22s var(--ease), opacity .18s; }
.ai-fab:focus-visible { outline: 2px solid var(--primary-bright); outline-offset: 2px; }
.ai-fab:focus-visible .ai-fab-txt { max-width: 6em; opacity: 1; }
.ai-fab:focus-visible { gap: 8px; }
@media (hover: hover) {
  .ai-fab:hover { gap: 8px; box-shadow: 0 0 0 1px rgba(95, 224, 196, 0.35), 0 12px 28px -12px rgba(10, 27, 30, 0.6), 0 10px 22px -10px rgba(47, 195, 166, 0.6); }
  .ai-fab:hover .ai-fab-txt { max-width: 6em; opacity: 1; }
}
.ai-fab .ai-fab-ring { display: none; }
/* 細把手：留白放不下完整膠囊（例：桌機 1366 案件頁只剩 28px 頁邊）；滑過、鍵盤焦點、拖曳中都展開成完整膠囊 */
.ai-fab.is-handle { min-width: var(--fab-w, 24px); max-width: var(--fab-w, 24px); padding: 0; justify-content: center; border-radius: 14px 0 0 14px; }
.ai-fab.is-left.is-handle { padding: 0; border-radius: 0 14px 14px 0; }
.ai-fab.is-handle .ai-fab-mark { width: 18px; height: 18px; }
.ai-fab.is-thin .ai-fab-mark { display: none; }
.ai-fab.is-thin::after { content: ''; flex: 0 0 auto; width: 3px; height: 20px; border-radius: 2px; background: var(--primary-bright); box-shadow: 0 0 8px rgba(47, 195, 166, 0.75); }
.ai-fab.is-handle:focus-visible, .ai-fab.is-handle.is-dragging { min-width: 46px; max-width: 12em; padding: 0 12px 0 11px; justify-content: flex-start; }
.ai-fab.is-handle:focus-visible .ai-fab-mark, .ai-fab.is-handle.is-dragging .ai-fab-mark { display: block; width: 22px; height: 22px; }
.ai-fab.is-thin:focus-visible::after, .ai-fab.is-thin.is-dragging::after { display: none; }
@media (hover: hover) {
  .ai-fab.is-handle:hover { min-width: 46px; max-width: 12em; padding: 0 12px 0 11px; justify-content: flex-start; }
  .ai-fab.is-left.is-handle:hover { padding: 0 11px 0 12px; }
  .ai-fab.is-handle:hover .ai-fab-mark { display: block; width: 22px; height: 22px; }
  .ai-fab.is-thin:hover::after { display: none; }
}
/* 面板開著：浮鈕讓位（面板右上有關閉鈕、Esc 也能關） */
.ai-fab.is-open { opacity: 0; pointer-events: none; }

.ai-panel { position: fixed; right: 20px; bottom: 20px; z-index: 27; width: min(440px, calc(100vw - 40px)); height: min(740px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 22px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 60px -24px color-mix(in srgb, var(--primary) 45%, transparent); overflow: hidden; animation: ai-in .32s var(--ease-spring, var(--ease)) both; }
.ai-panel[hidden] { display: none; }
@keyframes ai-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.ai-head { display: flex; gap: 10px; align-items: center; padding: 12px 12px 10px 14px; background: var(--ink-grad); color: var(--on-ink); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ai-head .min0 { min-width: 0; }
.ai-title { font-weight: 900; font-size: 15px; letter-spacing: .02em; }
.ai-sub { font-size: 11.5px; color: var(--on-ink-2); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-head .btn { color: var(--on-ink); border-color: transparent; background: rgba(255, 255, 255, 0.06); }
.ai-head .btn:hover { background: rgba(255, 255, 255, 0.14); }
.ai-hist.select.sm { width: 128px; height: 30px; font-size: 12px; background-color: rgba(255, 255, 255, 0.08); color: var(--on-ink); border-color: rgba(255, 255, 255, 0.16); }
.ai-hist.select.sm option { color: var(--text); background: var(--surface); }
.ai-ava-bot { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: inline-grid; place-items: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ai-ava-bot img { width: 20px; height: 20px; display: block; }
.ai-ava-bot.lg { width: 38px; height: 38px; background: rgba(47, 195, 166, 0.16); box-shadow: inset 0 0 0 1px rgba(47, 195, 166, 0.35); } .ai-ava-bot.lg img { width: 26px; height: 26px; }
.ai-msgs .ai-ava-bot { background: var(--ink-800); }
.ai-ctxrow { display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; }
.ai-ctxrow .chip { max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
.ai-ctxrow .btn.danger { margin-left: auto; }
.ai-msgs { flex: 1 1 auto; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
/* 1.66.0 空狀態：置中、標誌＋一句話（建議指令在輸入框上方） */
.ai-msgs .ai-empty { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 18px; border-radius: 16px; color: var(--text-2); font-size: 13.5px; line-height: 1.65; background: transparent; }
.ai-msgs .ai-empty b { color: var(--text); font-size: 15.5px; font-weight: 800; }
.ai-empty-mark { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 6px; background: var(--ink-grad); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 26px -14px rgba(47, 195, 166, 0.7); }
.ai-empty-mark img { width: 30px; height: 30px; display: block; }
.ai-msgs .ai-empty span:last-child { max-width: 32ch; }
.ai-msg { display: flex; gap: 8px; align-items: flex-end; }
.ai-msg.is-user { align-self: flex-end; max-width: 92%; }
.ai-msg.is-asst { align-self: stretch; }
.ai-ava.avatar { width: 28px; height: 28px; font-size: 11px; }
.ai-bubble { padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.65; word-break: break-word; min-width: 0; }
.ai-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-xs); }
.ai-bubble.is-user p { margin: 0; } .ai-bubble.is-user p + p { margin-top: 4px; }
.ai-bubble.is-asst { flex: 1 1 auto; background: var(--bubble-them); border: 1px solid var(--border); border-bottom-left-radius: 6px; box-shadow: var(--shadow-sm); }
.ai-bubble.is-failed { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.ai-md { font-size: 14px; line-height: 1.7; }
.ai-md > :first-child { margin-top: 0; } .ai-md > :last-child { margin-bottom: 0; }
.ai-md h2, .ai-md h3 { font-size: 14.5px; margin: 10px 0 4px; }
.ai-md a { word-break: break-all; }
/* 1.46.x 面板只有 440px：回答裡的表格讓各欄取自然寬度（最寬到面板兩倍）、整張表橫向捲動、不另開垂直捲軸（.md-table 由 mountMd 包好），不再一格 2、3 個字逐字換行、也不會一列高到半個畫面 */
.ai-md .md-table { margin: 8px 0 10px; max-height: none; }
.ai-md .md-table table { font-size: 13px; width: max-content; min-width: 100%; max-width: 200%; }
.ai-md .md-table th, .ai-md .md-table td { min-width: 120px; padding: 7px 10px; }
.ai-action { display: flex; gap: 6px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-deep); font-weight: 700; font-size: 13px; text-decoration: none; }
.ai-action .mono { color: var(--text-3); font-weight: 500; margin-left: auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-msg-foot { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); }
.ai-fail { display: flex; gap: 6px; align-items: flex-start; color: var(--red); font-size: 13.5px; }
.ai-live { display: flex; gap: 8px; align-items: center; font-size: 13.5px; flex-wrap: wrap; }
.ai-live .dot { width: 8px; height: 8px; }
.ai-live .btn { margin-left: auto; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.ai-suggest .chip { cursor: pointer; height: 28px; font-size: 12.5px; font-weight: 600; background: var(--surface); border-color: var(--border-2); color: var(--text-2); transition: border-color var(--dur), color var(--dur), background var(--dur); }
.ai-suggest .chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.ai-composer { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.ai-text { min-height: 44px; max-height: 180px; border: 0; box-shadow: none; background: transparent; padding: 6px 4px; font-size: 14px; resize: none; }
.ai-text:focus { box-shadow: none; }
.ai-composer-row { display: flex; gap: 8px; align-items: center; }
.ai-model.select.sm { max-width: 170px; font-size: 12px; }
body.ai-open .back-top { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  /* 手機（沒有底部導覽時的備援）：一樣貼右邊 */
  .ai-fab { bottom: calc(var(--tabbar-h) + 140px + env(safe-area-inset-bottom)); height: 40px; min-width: 36px; padding: 0 8px 0 9px; border-radius: 20px 0 0 20px; }
  .ai-fab.is-left { border-radius: 0 20px 20px 0; }
  .ai-fab .ai-fab-mark { width: 20px; height: 20px; }
  .ai-panel { right: 0; bottom: 0; left: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom); }
  .ai-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .ai-keys { display: none; }
  body.ai-open .ai-fab, body.ai-open .fab, body.ai-open .tabbar { display: none; }
}
@media (max-width: 899px) {
  /* 1.66.0 手機／平板：收進底部導覽列一端（導覽讓出 56px、分頁圖示藥丸收窄一點），長得跟其他分頁一樣——墨色藥丸標誌＋「AI 助手」 */
  .tabbar { transition: padding .2s var(--ease); }
  html.ai-tabdock-r .tabbar { padding-right: 56px; }
  html.ai-tabdock-l .tabbar { padding-left: 56px; }
  html.ai-tabdock-r .tabbar a .icon, html.ai-tabdock-l .tabbar a .icon { padding-left: 11px; padding-right: 11px; }
  html.ai-tabdock-r .tabbar::after, html.ai-tabdock-l .tabbar::after { content: ''; position: absolute; top: 14px; width: 1px; height: 34px; background: var(--border); pointer-events: none; }
  html.ai-tabdock-r .tabbar::after { right: 56px; }
  html.ai-tabdock-l .tabbar::after { left: 56px; }
  .ai-fab.is-tabdock { top: auto; left: auto; right: 0; bottom: env(safe-area-inset-bottom); z-index: 31; width: 56px; min-width: 0; max-width: none; height: var(--tabbar-h); padding: 4px 0 0; border-radius: 0; flex-direction: column; justify-content: center; gap: 3px; overflow: visible; background: transparent; box-shadow: none; }
  .ai-fab.is-tabdock.is-left { left: 0; right: auto; padding: 4px 0 0; border-radius: 0; }
  .ai-fab.is-tabdock:hover, .ai-fab.is-tabdock:focus-visible { gap: 3px; box-shadow: none; }
  .ai-fab.is-tabdock:focus-visible { outline-offset: -3px; border-radius: 12px; }
  .ai-fab.is-tabdock .ai-fab-mark { width: 20px; height: 20px; padding: 4px 13px; box-sizing: content-box; border-radius: 999px; background: var(--ink-grad); box-shadow: inset 0 0 0 1px rgba(95, 224, 196, 0.35), 0 6px 14px -8px rgba(10, 27, 30, 0.6); filter: none; transition: transform 120ms; }
  .ai-fab.is-tabdock .ai-fab-txt, .ai-fab.is-tabdock:hover .ai-fab-txt { max-width: none; opacity: 1; overflow: visible; font-size: var(--fs-min); font-weight: 700; letter-spacing: 0; line-height: 1; color: var(--text-2); }
  .ai-fab.is-tabdock:active { transform: none; }
  .ai-fab.is-tabdock:active .ai-fab-mark { transform: scale(.92); }
  .ai-fab.is-tabdock.is-dragging { transform: none; box-shadow: none; border-radius: 0; }
  /* 共用⋯選單在手機變貼底面板時會先藏浮鈕（refine.css §12）；收進導覽的不會壓到面板，照常顯示，導覽才不會空一格 */
  html.pop-open .ai-fab.is-tabdock { opacity: 1 !important; pointer-events: auto !important; }
}
@media (prefers-reduced-motion: reduce) { .ai-fab, .ai-fab .ai-fab-txt, .ai-fab .ai-fab-mark, .tabbar { transition: none; } }
@media print { .ai-fab, .ai-panel { display: none !important; } }

/* 1.36.0 助手附件（手繪草圖、量測紀錄、來函）與對話直接產出的文書動作（老闆：「任何文書都支援 AI 對話模式（含傳檔案、複製貼上）直接生成」） */
.ai-composer.is-drop { outline: 2px dashed var(--primary); outline-offset: -4px; border-radius: 10px; }
.ai-attach { padding: 2px 2px 0; }
.ai-attach-btn { padding-inline: 8px; }
.ai-msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ai-file { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: inherit; font-size: 12px; text-decoration: none; }
.ai-file span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-file.is-img { padding: 0; border-radius: 8px; overflow: hidden; }
.ai-file.is-img img { width: 72px; height: 72px; object-fit: cover; display: block; }
/* 貼左邊時壓在墨色側欄上：加一圈亮翡翠細邊才看得出來 */
@media (min-width: 900px) { .ai-fab.is-left { box-shadow: 0 0 0 1px rgba(95, 224, 196, 0.5), 0 10px 24px -12px rgba(0, 0, 0, 0.6); } }