:root { --fg: #1f2933; --muted: #6b7280; --line: #e5e7eb; --bg: #f7f7f8; --primary: #2563eb; --err: #b91c1c; --ok: #047857; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; color: var(--fg); background: var(--bg); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.top .actions { display: flex; gap: 14px; align-items: center; }
.sep { color: var(--muted); }
.tag { margin-left: 8px; padding: 2px 8px; border-radius: 10px; background: #eef2ff; color: #3730a3; font-size: 12px; }
.menu { display: flex; gap: 4px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line); }
.menu a { padding: 10px 14px; color: var(--fg); text-decoration: none; border-bottom: 2px solid transparent; }
.menu a.on { border-bottom-color: var(--primary); color: var(--primary); }
main { padding: 20px; max-width: 1000px; margin: 0 auto; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px 24px; }
.card.narrow { max-width: 520px; margin: 40px auto; }
h1 { font-size: 22px; margin-top: 0; }
h2 { font-size: 17px; margin-top: 28px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: normal; font-size: 13px; }
form.inline { display: inline; }
form.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input[type=email], select { padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; min-width: 260px; }
button { padding: 6px 12px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; cursor: pointer; }
button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.link { border: none; background: none; color: var(--primary); padding: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--err); background: #fef2f2; padding: 8px 12px; border-radius: 6px; }
.ok { color: var(--ok); background: #ecfdf5; padding: 8px 12px; border-radius: 6px; }
.notice { background: #eff6ff; padding: 8px 14px; border-radius: 6px; }
.submenu span.on { font-weight: bold; }
code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
/* 瀏覽知識專區：左邊樹、右邊內容 */
main:has(.browse) { max-width: 1200px; }
.browse { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.tree { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; position: sticky; top: 12px; }
.tree-search { display: flex; gap: 6px; margin-bottom: 12px; }
.tree-search input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; }
.tree-list details { margin-bottom: 6px; }
.tree-list summary { cursor: pointer; font-weight: bold; padding: 4px 0; }
.tree-list ul { list-style: none; margin: 2px 0 8px; padding-left: 14px; }
.tree-list li a { display: block; padding: 4px 6px; border-radius: 4px; color: var(--fg); text-decoration: none; }
.tree-list li a:hover { background: #f1f5f9; }
.tree-list li a.muted { color: var(--muted); }
.pending-link { display: block; margin-top: 12px; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.pending-link.has { color: #b45309; background: #fffbeb; border-radius: 6px; font-weight: bold; }
.browse-main { min-width: 0; }
.topic h2 { font-size: 16px; margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.entry { padding: 8px 0; }
.entry + .entry { border-top: 1px dashed var(--line); }
.entry-head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.edit-link { font-size: 12px; color: var(--muted); white-space: nowrap; }
.edit-link:hover { color: var(--primary); }
.text { white-space: pre-wrap; line-height: 1.7; margin-top: 6px; overflow-wrap: anywhere; }
.previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.previews img { max-width: 160px; max-height: 220px; border: 1px solid var(--line); border-radius: 4px; }
.chip { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border-radius: 10px; background: #eef2ff; color: #3730a3; text-decoration: none; }
@media (max-width: 760px) {
  .browse { grid-template-columns: 1fr; }
  .tree { position: static; }
  main { padding: 12px; }
}
/* 公司設定：小分頁、篩選、換頁 */
.submenu { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.submenu a { padding: 8px 12px; color: var(--fg); text-decoration: none; border-bottom: 2px solid transparent; }
.submenu a.on { border-bottom-color: var(--primary); color: var(--primary); font-weight: bold; }
.filters { margin-bottom: 10px; }
.filters select { min-width: 140px; }
.pager { display: flex; gap: 14px; justify-content: flex-end; align-items: center; margin-top: 10px; }
.nowrap { white-space: nowrap; }
.invite-code { font-size: 20px; letter-spacing: 2px; padding: 4px 10px; }
/* 輸入知識專區：對話框、確認卡 */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.chat-log { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.bubble.me { align-self: flex-end; background: #eff6ff; }
.bubble.bot { align-self: flex-start; background: #f1f5f9; }
.confirm-card { border: 1px solid #93c5fd; border-radius: 8px; padding: 12px 16px; margin: 12px 0; background: #fff; }
.confirm-card .card-head { font-weight: bold; margin-bottom: 6px; }
.confirm-card dl { display: grid; grid-template-columns: 4em 1fr; gap: 6px 10px; margin: 8px 0; }
.confirm-card dt { color: var(--muted); }
.confirm-card dd { margin: 0; min-width: 0; }
.card-body { background: #f8fafc; padding: 6px 8px; border-radius: 4px; margin-top: 0; }
.pick { display: inline-flex; gap: 6px; align-items: center; }
.warn { color: #92400e; background: #fffbeb; padding: 6px 10px; border-radius: 6px; }
.composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.composer textarea { flex: 1; min-width: 0; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
.plus { font-size: 18px; width: 36px; height: 36px; padding: 0; color: var(--muted); }
.plus:disabled { cursor: not-allowed; opacity: .6; }
.restart { margin-top: 8px; text-align: right; }
.saved a { margin-left: 8px; }
.shared-stances { margin-top: 6px; }
.shared-stances summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.card-item { border-top: 1px dashed var(--line); padding: 8px 0; }
.card-item.off dl, .card-item.off p { opacity: .55; }
.pick-toggle { font-weight: bold; border: none; background: none; padding: 2px 0; }
/* 確認卡：勾選按鈕放大（手機也好點）、衝突、沒整理到的行 */
.pick-toggle { font-size: 17px; min-height: 44px; padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; margin-bottom: 6px; }
.card-item.off .pick-toggle { background: #fff; color: var(--muted); }
.conflict { margin: 6px 0; }
.uncovered ul { margin: 4px 0 4px 18px; padding: 0; }
/* 修改這筆：目前內容、改前／改後 */
.edit-target { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.edit-title { font-size: 16px; }
.chg { border: 2px solid; border-radius: 4px; padding: 0 2px; }
.chg.old { border-color: #f87171; background: #fef2f2; text-decoration: line-through; }
.chg.new { border-color: #34d399; background: #ecfdf5; }
.diff { margin: 8px 0; }
.edit-actions { margin-top: 8px; justify-content: space-between; }
.restore-btn { display: inline-block; padding: 3px 10px; border: 1px solid #cbd5e1; border-radius: 6px; text-decoration: none; color: var(--primary); }
.cand { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed var(--line); }
.cand input { margin-top: 4px; width: 18px; height: 18px; }
/* 輸入知識專區：新增資料／修改或停用現有內容 */
.composer-wrap { margin-top: 12px; }
.mode-switch { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.mode-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 999px; cursor: pointer; font-size: 14px; }
.mode-opt.on, .mode-opt:has(input:checked) { border-color: var(--primary); background: #eff6ff; color: var(--primary); font-weight: bold; }
.composer-wrap .composer { margin-top: 0; }
.card-adjust { display: flex; gap: 8px; margin: -4px 0 12px; }
.card-adjust input[type=text] { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; }

/* LINE 設定頁：第一次接上的步驟說明（2026-11-09） */
.line-guide { margin: 12px 0 20px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; }
.guide-steps li { margin: 10px 0; line-height: 1.6; }
.guide-url { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.guide-url code { word-break: break-all; }
.copy-btn { padding: 2px 10px; }

/* 回答設定：固定回覆的文字框（跟內容一樣寬、最大 720px、5 行、右下角可拖拉） */
.reply-text textarea { display: block; width: 100%; max-width: 720px; box-sizing: border-box; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; line-height: 1.5; resize: both; }

/* 輸入知識專區：影片確認卡（縮圖在左、欄位在右） */
.video-row { display: flex; gap: 12px; align-items: flex-start; }
.video-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #e2e8f0; }
.video-row dl { flex: 1 1 auto; margin: 0; }
/* 影片卡：欄位直接改（輸入框、主題下拉） */
.video-item input.field-edit, .video-item select.field-edit { width: 100%; max-width: 520px; box-sizing: border-box; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }