:root {
  color-scheme: light;

  /* ---- 字體：比照遠傳官網的中文字級堆疊 ---- */
  --font-sans: "PingFang TC", "Roboto", "Noto Sans TC", "Microsoft JhengHei",
    "微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* ---- 遠傳品牌紅（取自 fetnet.net 線上樣式表）---- */
  --brand: #ef3123;        /* 主色：填色、圖示、強調 */
  --brand-deep: #e71a0f;   /* hover */
  --brand-dark: #d3060f;   /* pressed／需要足夠對比的紅字 */
  --brand-coral: #f05c38;  /* 官網漸層用的暖珊瑚 */
  --brand-soft: #fff2f0;   /* 極淡底 */
  --brand-grad: linear-gradient(180deg, var(--brand-coral) 0%, var(--brand-dark) 100%);

  /* ---- 中性色：官網為中性灰，不帶藍調 ---- */
  --ink: #202020;
  --ink-2: #3f3f3f;
  --muted: #5f6e84;
  --muted-2: #8a8a8a;
  /* 官網的 #e8ecf0 是白底上的分隔線；本站卡片浮在 --bg 灰底上，
     邊框要比兩側都深才看得見，因此壓深一階。 */
  --line: #dee3e9;
  --line-strong: #c9cfd6;
  --panel: #ffffff;
  --bg-subtle: #fafafa;
  --bg: #f1f3f5;
  --bg-strong: #e8ecf0;

  /* ---- 語意色 ---- */
  --ok: #1a8a52;
  --ok-soft: #e7f6ec;
  --ok-line: #b7e3c8;
  --warn: #b45309;
  --warn-soft: #fef3e6;
  --warn-line: #f5d9a8;
  --bad: #d3060f;
  --bad-deep: #a80409;     /* 破壞性操作按鈕的 hover */
  --bad-soft: #fff2f0;
  --bad-line: #f8c4c0;
  --info: #2f59c4;
  --info-soft: #eef2fb;
  --info-line: #c9d6f2;
  --accent: #0e7f8f;       /* 官網青 #5cc3d2 壓深到可當文字色 */
  --accent-soft: #e8f5f7;

  /* ---- 形狀與陰影 ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(32, 32, 32, 0.06);
  --shadow-soft: 0 8px 24px rgba(32, 32, 32, 0.06);
  --shadow-brand: 0 10px 24px rgba(239, 49, 35, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* 全站鍵盤焦點環：原本沒有統一樣式，會吃到瀏覽器預設的黑框。
   只用 :focus-visible，滑鼠點擊不會出現。 */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0;
  border-color: var(--brand);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 72px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(32, 32, 32, 0.03);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 22px;
  line-height: 1.25;
}

h2 {
  font-size: 16px;
}

.topbar p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.topbarActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
  flex: none;
}

.modeSwitch {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
}

.modeButton {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.modeButton.active {
  background: var(--brand);
  color: var(--panel);
}

.iconBtn {
  gap: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
}

.navButton {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--brand-grad);
  color: var(--panel);
  font-size: 14px;
  text-decoration: none;
}

.navButton:hover {
  filter: brightness(1.06);
}

.navButton.secondary {
  background: var(--panel);
  border-color: var(--brand);
  color: var(--brand);
}

.navButton.secondary:hover {
  background: var(--bad-soft);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warn);
}

.dot.ok {
  background: var(--ok);
}

.dot.bad {
  background: var(--bad);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 420px);
  gap: 16px;
  padding: 16px;
  max-width: 1440px;
  margin: 0 auto;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: 0 1px 2px rgba(32, 32, 32, 0.04);
}

.conversation {
  min-height: calc(100vh - 104px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
}

.panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

/* 標題列子元素皆可收縮，內容不撐寬欄位 */
.panelHeader > * {
  min-width: 0;
}

.casePane,
.caseRight,
.threadHeadRight {
  min-width: 0;
}

.agentWorkspace {
  overflow-x: hidden;
}

.controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 180px));
  align-items: end;
  gap: 10px;
}

.controls select {
  width: 100%;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

input,
select,
button {
  min-height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font: inherit;
}

input,
select {
  padding: 0 10px;
  background: var(--panel);
  color: var(--ink);
}

button {
  padding: 0 16px;
  border-radius: var(--r-pill);
  border-color: transparent;
  background: var(--brand-grad);
  color: var(--panel);
  cursor: pointer;
}

button:hover {
  filter: brightness(1.06);
}

.chatLog {
  min-height: 360px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.kmWorkspace {
  display: grid;
  gap: 12px;
}

.kmWorkspace[hidden],
.kmStatusPanel[hidden] {
  display: none;
}

.kmSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.kmSummaryGrid article {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
}

.kmSummaryGrid strong {
  color: var(--brand);
  font-size: 18px;
}

.kmSummaryGrid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.kmActionBar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.message {
  max-width: 78%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  line-height: 1.45;
  font-size: 15px;
}

.message.user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--panel);
}

.message.assistant {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
}

.message.kmAnswer {
  max-width: 92%;
}

.message.kmAnswer p {
  margin-top: 8px;
}

.sourceStrip {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.message.agent {
  align-self: flex-start;
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
}

.translation {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed rgba(95, 110, 132, 0.28);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.message.user .translation {
  border-top-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.78);
}

/* 系統提示（如「真人上線」）：置中膠囊樣式，刻意不做成對話框。 */
.systemNotice {
  align-self: center;
  max-width: 90%;
  margin: 4px 0;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.systemNotice::before {
  content: "● ";
  color: var(--ok);
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 10px;
}

.side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.kmStatusPanel {
  border-color: var(--line-strong);
  background: var(--panel);
}

.kmFormatList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.kmFormatList span {
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12px;
}

/* KM specification page: static requirement view, no voice input */
.kmSpecPage {
  background: var(--bg-subtle);
}

.kmSpecLayout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px;
}

.kmSpecNav {
  position: sticky;
  top: 90px;
  align-self: start;
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.kmSpecNav a {
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: none;
}

.kmSpecNav a:hover {
  background: var(--bad-soft);
  color: var(--brand);
}

.kmSpecHero,
.kmSpecSection {
  grid-column: 2;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(32, 32, 32, 0.04);
}

.kmSpecHero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(239, 49, 35, 0.08), rgba(26, 138, 82, 0.08)),
    var(--panel);
}

.kmSpecHero > div:first-child {
  display: grid;
  align-content: center;
  gap: 12px;
}

.kmEyebrow {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.kmSpecHero h2,
.kmSpecSection h2 {
  font-size: 28px;
  line-height: 1.25;
}

.kmSpecHero p:not(.kmEyebrow) {
  max-width: 760px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
}

.kmMetricGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.kmMetricGrid.wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kmMetricGrid article {
  min-height: 108px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(239, 49, 35, 0.18);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.84);
}

.kmMetricGrid strong {
  color: var(--brand);
  font-size: 26px;
  line-height: 1.1;
}

.kmMetricGrid span {
  color: var(--muted);
  font-size: 13px;
}

.kmSpecSection {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.kmSectionHead {
  display: grid;
  gap: 7px;
}

.kmLayerGrid,
.kmModelBand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kmLayerGrid article,
.kmModelBand article,
.kmRequirementCard {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

.kmLayerGrid span {
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
}

.kmLayerGrid h3,
.kmModelBand h3,
.kmRequirementCard h3 {
  margin: 8px 0 8px;
  font-size: 17px;
}

.kmLayerGrid p,
.kmModelBand p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.kmTwoCol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kmCheckList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kmCheckList li {
  position: relative;
  padding: 9px 0 9px 28px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  line-height: 1.45;
}

.kmCheckList li:last-child {
  border-bottom: 0;
}

.kmCheckList li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 12px;
  font-weight: 700;
}

.kmStrong {
  border-color: var(--bad-line);
  background: var(--bg-subtle);
}

.kmFormatCloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kmFormatCloud span {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 14px;
}

.kmRoleList {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px 12px;
  margin: 0;
}

.kmRoleList dt {
  color: var(--brand);
  font-weight: 700;
}

.kmRoleList dd {
  margin: 0;
  color: var(--ink-2);
}

.kmUiMock {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.kmUiMock aside {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border-right: 1px solid var(--line);
  background: var(--bg-subtle);
}

.kmHistoryItem {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 14px;
}

.kmHistoryItem.active {
  border-color: var(--brand);
  color: var(--brand);
}

.kmChatMock {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--bg-subtle);
}

.kmMockComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
}

.kmDeliveryList {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kmDeliveryList li {
  min-height: 76px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--ink-2);
  text-align: center;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .kmSpecLayout {
    grid-template-columns: 1fr;
  }

  .kmSpecNav,
  .kmSpecHero,
  .kmSpecSection {
    grid-column: 1;
  }

  .kmSpecNav {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kmSpecHero,
  .kmLayerGrid,
  .kmModelBand,
  .kmMetricGrid.wide,
  .kmDeliveryList,
  .kmUiMock {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .kmSpecLayout {
    padding: 10px;
  }

  .kmSpecNav,
  .kmSpecHero,
  .kmLayerGrid,
  .kmModelBand,
  .kmMetricGrid,
  .kmMetricGrid.wide,
  .kmTwoCol,
  .kmDeliveryList,
  .kmUiMock,
  .kmMockComposer {
    grid-template-columns: 1fr;
  }

  .kmSpecHero h2,
  .kmSpecSection h2 {
    font-size: 22px;
  }

  .kmRoleList {
    grid-template-columns: 1fr;
  }
}

@media print {
  .kmSpecPage .topbarActions,
  .kmSpecNav {
    display: none;
  }

  .kmSpecLayout {
    display: block;
    padding: 0;
  }

  .kmSpecHero,
  .kmSpecSection {
    break-inside: avoid;
    margin: 0 0 12px;
  }
}

/* KM Console prototype */
.kmConsolePage {
  background: var(--bg-subtle);
  font-size: 11px;
}

.kmConsolePage .topbar {
  min-height: 64px;
  padding: 10px 22px;
  box-shadow: 0 1px 0 rgba(32, 32, 32, 0.04);
}

.kmConsolePage .topbar h1 {
  font-size: 21px;
  letter-spacing: 0;
}

.kmConsolePage .topbarActions .iconBtn {
  min-height: 34px;
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--ink-2);
  box-shadow: none;
}

.kmConsolePage .topbarActions button.iconBtn {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--panel);
}

.kmConsolePage input,
.kmConsolePage select,
.kmConsolePage button {
  font-size: 11px;
}

.kmConsole {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(1480px, calc(100vw - 32px));
  max-width: none;
  margin: 0 auto;
  padding: 12px 0 16px;
  height: calc(100dvh - 88px);
  min-height: 0;
  overflow: hidden;
}

.kmConsoleTabs {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(32, 32, 32, 0.03);
}

.kmTab {
  min-height: 30px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
}

.kmTab.active {
  border-color: var(--bad-line);
  background: var(--bad-soft);
  color: var(--brand);
  font-weight: 700;
}

.kmTabPanel {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: none;
}

.kmTabPanel.active {
  display: grid;
}

.kmTabPanel#qaPanel {
  grid-template-columns: var(--km-rail-width, 210px) 6px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
}

/* 明確指定欄位，避免收合時 display:none 造成聊天區被自動排到第 1 欄（0px）而空白 */
.kmTabPanel#qaPanel > .kmRail {
  grid-column: 1;
}
.kmTabPanel#qaPanel > .kmRailResizer {
  grid-column: 2;
}
.kmTabPanel#qaPanel > .kmChatPanel {
  grid-column: 3;
}

.kmTabPanel#qaPanel.railCollapsed {
  grid-template-columns: 0 0 minmax(0, 1fr);
}

.kmTabPanel#qaPanel.railCollapsed .kmRail,
.kmTabPanel#qaPanel.railCollapsed .kmRailResizer {
  display: none;
}

/* 拖曳調整對話紀錄寬度的把手 */
.kmRailResizer {
  cursor: col-resize;
  background: transparent;
  transition: background 0.12s ease;
}

.kmRailResizer:hover,
.kmRailResizer.dragging {
  background: var(--bg-strong);
}

/* 收合 / 展開 對話紀錄的按鈕 */
.railToggleBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.railToggleBtn:hover {
  background: var(--bg);
  color: var(--ink);
}

.kmHeadActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kmToolbarLeft {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.kmTabPanel.files {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.kmFilesPanel {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.kmFilesToolbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 14px 10px 14px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(250, 250, 250, 0.97);
  box-shadow: 0 8px 20px rgba(32, 32, 32, 0.06);
  backdrop-filter: blur(8px);
}

.kmFilesToolbar h2 {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
}

.kmFilesToolbar p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.fileScopeHint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.kmFileActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.kmFileActions select {
  min-width: 146px;
  min-height: 44px;
  padding: 0 14px;
  border-color: var(--line-strong);
  border-radius: var(--r-md);
  background-color: var(--panel);
  font-size: 13px;
}

.kmFileActions #addDocBtn {
  min-width: 86px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
}

.kmFilesGrid {
  display: grid;
  gap: 14px;
}

.kmRail,
.kmInspector {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
  overflow: auto;
}

.kmPanel,
.kmChatPanel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 4px 14px rgba(32, 32, 32, 0.035);
}

.kmPanel {
  padding: 14px;
}

.kmPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.kmPanelHead h2,
.kmChatToolbar h2 {
  font-size: 12px;
}

.kmField {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.kmRoleHint {
  min-height: 54px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--info-line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--ink-2);
  font-size: 10px;
  line-height: 1.45;
}

.kmToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin: 6px 0;
  color: var(--ink-2);
  font-size: 10px;
}

.kmToggle input {
  min-height: 0;
}

.kmListControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.kmQuickActions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
}

.kmQuickActions .secondaryBtn {
  min-height: 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: 11px;
}

.kmQuickActions .secondaryBtn.active {
  background: var(--panel);
  color: var(--brand);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(32, 32, 32, 0.12);
}

.reviewBlock {
  display: grid;
  gap: 8px;
  border-left: 4px solid var(--brand);
}

.kmSectionCard {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(32, 32, 32, 0.035);
}

.kmHistory {
  display: grid;
  gap: 0;
}

#qaPanel .kmRail {
  overflow: hidden;
  border-right: 1px solid var(--line-strong);
  background: var(--bg-subtle);
}

#qaPanel .kmPanel {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#qaPanel .kmPanelHead {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 8px;
  padding-bottom: 8px;
  background: var(--bg-subtle);
}

.kmHistoryItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 6px 0 12px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  transition: background 0.12s ease;
}

.kmHistoryItem .kmHistoryMain {
  grid-column: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.kmHistoryItem .kmHistoryTitle {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.45;
}

.kmHistoryItem:hover {
  background: var(--bg);
  color: var(--ink);
}

.kmHistoryItem.active {
  background: var(--bg-strong);
  color: var(--ink);
}

.kmHistoryItem.active .kmHistoryTitle {
  font-weight: 600;
}

/* 紀錄項目右側保留 改名 / 刪除 的固定空間，長名稱以省略號收尾。 */
.kmHistoryActions {
  grid-column: 2;
  display: flex;
  width: 62px;
  justify-content: flex-end;
  gap: 2px;
  opacity: 0;                 /* 預設隱藏,滑鼠移到該列才顯示 */
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* 滑鼠移到對話列 / 專案標題,或該列為使用中時,才顯示操作按鈕 */
.kmHistoryItem:hover .kmHistoryActions,
.kmHistoryItem.active .kmHistoryActions,
.kmProjectHead:hover .kmHistoryActions {
  opacity: 1;
  pointer-events: auto;
}

/* 對話列「⋯」下拉選單 */
.kmRowMenu {
  position: fixed;
  z-index: 1000;
  min-width: 176px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.kmRowMenuItem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

.kmRowMenuItem .mi {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

.kmRowMenuItem:hover { background: var(--bg-subtle); }

.kmRowMenuItem.danger { color: var(--bad); }
.kmRowMenuItem.danger .mi { color: var(--bad); }
.kmRowMenuItem.danger:hover { background: var(--bad-soft); }

/* 已釘選分類 */
.kmPinnedZone { margin-bottom: 6px; }

.kmRowBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.kmRowBtn:hover {
  background: var(--bg-strong);
  color: var(--ink);
}

/* ── 對話專案（資料夾）：類似 ChatGPT Projects ── */
.kmProject { margin-bottom: 2px; }

.kmProjectHead {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 62px;
  align-items: center;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 6px 0 8px;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s ease;
}
.kmProjectHead:hover { background: var(--bg); }

.kmProjectChevron {
  grid-column: 1;
  display: inline-flex;
  justify-content: center;
  color: var(--muted-2);
  font-size: 11px;
  transition: transform 0.12s ease;
}
.kmProject.collapsed .kmProjectChevron { transform: rotate(-90deg); }

.kmProjectName {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.kmProjectName .kmProjectCount { margin-left: 6px; font-weight: 400; color: var(--muted-2); font-size: 12px; }

.kmProjectHead .kmHistoryActions { grid-column: 3; }

/* 專案內的對話：縮排；折疊時隱藏 */
.kmProjectChildren { margin-left: 14px; border-left: 1px solid var(--line); padding-left: 2px; }
.kmProjectChildren:empty { display: none; }
.kmProject.collapsed .kmProjectChildren { display: none; }

/* 拖拉狀態 */
.kmHistoryItem[draggable="true"] { cursor: grab; }
.kmHistoryItem.dragging { opacity: 0.45; }
.kmProjectHead.dropHover,
.kmUngroupDrop.dropHover { background: var(--info-soft); outline: 2px dashed var(--info); outline-offset: -2px; }

/* 未分類拖放區的標題列 */
.kmUngroupLabel {
  padding: 6px 12px 2px;
  font-size: 12px;
  color: var(--muted-2);
  font-weight: 600;
}

/* AI 回應中的「思考」動畫（三個跳動的點） */
.kmThinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

.kmThinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  opacity: 0.4;
  animation: kmBounce 1.2s infinite ease-in-out both;
}

.kmThinking span:nth-child(1) { animation-delay: -0.24s; }
.kmThinking span:nth-child(2) { animation-delay: -0.12s; }
.kmThinking span:nth-child(3) { animation-delay: 0s; }

@keyframes kmBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.35; }
  40% { transform: scale(1); opacity: 1; }
}

/* 使用者訊息整串靠右；時間放在訊息框右下角，編輯鈕放在訊息框下方。 */
.kmChatLog .userTurn {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
}

/* 助手訊息整串靠左；時間放在訊息框右下角，複製鈕放在訊息框下方。 */
.kmChatLog .assistantTurn {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
}

.kmChatLog .userMessageStack,
.kmChatLog .assistantMessageStack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kmChatLog .userMessageStack {
  align-items: flex-end;
  max-width: min(640px, 82%);
}

.kmChatLog .assistantMessageStack {
  align-items: flex-start;
}

.kmChatLog .msgMeta,
.kmChatLog .assistantMeta {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  margin-bottom: 14px;
  padding: 0;
}

.kmChatLog .assistantMeta {
  margin-left: -18px;
}

.kmChatLog .msgMeta {
  margin-right: -18px;
}

.chatSideTime {
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

/* 編輯鈕：固定顯示、無框、純圖示 */
.msgEditBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.msgEditBtn:hover {
  color: var(--ink);
}

.msgActions,
.assistantActions {
  display: flex;
  gap: 8px;
  min-height: 14px;
  padding: 0 5px;
  margin-top: -2px;
  line-height: 1;
}

.assistantActions {
  justify-content: flex-start;
  align-items: center;   /* 讓時間與複製按鈕垂直置中對齊 */
}

.msgActions {
  justify-content: flex-end;
}

/* 編輯框：外觀與原本的使用者氣泡一致 */
.kmChatLog .msgEditor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(640px, 80%);
}

.msgEditArea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
  border: 0;
  border-radius: 20px;
  background: var(--bg-subtle);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  resize: none;
  overflow: hidden;
}

.msgEditArea:focus {
  outline: none;
}

.msgEditActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.msgEditActions button {
  padding: 5px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12px;
  cursor: pointer;
}

.msgEditActions .msgEditSend {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--panel);
}

.kmSourceCloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.kmSourceCloud span {
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 9px;
}

.kmChatPanel {
  min-height: 0;
  display: grid;
  /* 4 個子元素：工具列 / 查詢範圍列 / 聊天記錄(彈性) / 輸入框 */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
  overflow: hidden;
}

.kmChatToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}

.kmChatToolbar p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.kmToolbarControls {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(160px, 220px);
  gap: 8px;
}

.kmChatLog {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px max(24px, calc((100% - 720px) / 2)) 16px;
  border: 0;
  border-radius: 0;
  background: var(--panel);
}

.kmChatLog .message {
  max-width: 100%;
  padding: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
}

.kmChatLog .message.user {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 10px 15px;
  border-radius: 20px;
  background: var(--bg-subtle);
  border: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.kmChatLog .message.assistant {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  padding: 2px 0 4px;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* 助手訊息標頭：小圓點 + 名稱，取代原本的粗體大標題 */
.kmChatLog .message.assistant > strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.kmChatLog .message.assistant > strong::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--ok), var(--ok));
  box-shadow: 0 0 0 2px var(--ok-line);
}

.kmAnswer {
  max-width: 100%;
}

.kmAnswer p,
.kmChatLog .message.assistant p {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
}

/* 參考資料區塊：列出回答所引用的來源文件 */
.kmCitations {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.kmCitationsLabel {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kmCitationList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kmCitationEmpty {
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.45;
}

.kmCitationItem {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

.kmCitationItem .idx {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}

.kmCitationItem .file {
  font-weight: 600;
  color: var(--ink-2);
}

.kmCitationItem .fileLink {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.kmCitationItem .fileLink:hover {
  color: var(--info);
}

.kmCitationItem .part {
  color: var(--muted-2);
}

.kmChatLog .sourceStrip {
  font-size: 9px;
}

.kmAnswerMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.kmAnswerMeta span {
  padding: 3px 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--muted-2);
  font-size: 11px;
}

.kmExtractBox span {
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 9px;
}

.kmExtractBox {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--info-line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

.kmExtractBox strong {
  color: var(--ink-2);
  font-size: 10px;
}

.kmExtractBox div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.kmAskForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
  width: min(640px, calc(100% - 48px));
  margin: 0 auto 18px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(32, 32, 32, 0.08);
}

.kmAskForm input {
  min-height: 34px;
  border: 0;
  background: transparent;
}

.kmAskForm input:focus {
  outline: 0;
}

.kmAskForm button {
  min-height: 34px;
  padding: 0 14px;
}

.kmWelcome {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 100%;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
}

.messageActions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.copyAnswerBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  min-width: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.copyAnswerBtn:hover {
  background: var(--bg-subtle);
  color: var(--ink-2);
}

.copyAnswerBtn.copied {
  color: var(--ok);
}

.citationList {
  display: grid;
  gap: 8px;
}

.citationCard {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

.citationCard strong {
  color: var(--ink);
  font-size: 10px;
}

.citationCard span,
.citationCard small {
  color: var(--muted);
  font-size: 9px;
}

.kmDropZone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--ink-2);
  cursor: pointer;
}

.kmDropZone span {
  color: var(--muted);
  font-size: 9px;
}

.kmDropZone:hover {
  border-color: var(--brand);
  background: var(--bg-subtle);
}

.kmDropZone.active {
  border-color: var(--brand);
  background: var(--bad-soft);
}

.kmDropZone.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.kmManageFilters {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 170px;
  gap: 10px;
  margin-bottom: 12px;
}

.kmManageFilters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.docTable {
  display: grid;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

#docList {
  display: grid;
}

#reviewQueue {
  display: grid;
}

.tableSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
}

.tableSectionHead h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.tableSectionHead p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.tableSectionHead span {
  min-width: 44px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.docRow {
  display: grid;
  grid-template-columns:
    minmax(140px, 1.16fr)
    minmax(82px, 0.62fr)
    minmax(120px, 0.9fr)
    72px
    72px
    56px
    60px
    54px
    136px;
  gap: 8px;
  align-items: center;
  min-height: 50px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 11px;
  cursor: pointer;
}

.docScope {
  display: inline-flex;
  max-width: 100%;
  min-height: 22px;
  align-items: center;
  padding: 3px 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--ink-2);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#docList .docRow:last-child {
  border-bottom: 0;
}

.docRow:hover {
  background: var(--bg-subtle);
}

.docRow.active {
  position: relative;
  background: var(--bg-subtle);
}

.docRow.active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand);
}

.docHead {
  min-height: 36px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
  color: var(--muted);
  font-weight: 700;
  cursor: default;
}

.docHead:hover {
  background: var(--bg-subtle);
}

.docRow strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docRow small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docSummary {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docStatus {
  width: fit-content;
  min-width: 42px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 700;
  text-align: center;
}

.docStatus.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.docStatus.warn {
  background: var(--bad-soft);
  color: var(--bad);
}

.docReview {
  width: fit-content;
  min-width: 52px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--ink-2);
  font-weight: 700;
  text-align: center;
}

.docReview.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.docReview.pending {
  background: var(--warn-soft);
  color: var(--warn);
}

.docReview.warn {
  background: var(--bg-subtle);
  color: var(--muted);
}

.docActions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
}

.docActions .miniBtn {
  min-height: 28px;
  padding: 0 9px;
  font-size: 10px;
}

.previewModal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(32, 32, 32, 0.38);
}

.previewModal[hidden] {
  display: none;
}

.previewDialog {
  width: min(980px, calc(100vw - 56px));
  height: min(720px, calc(100vh - 56px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 20px 70px rgba(32, 32, 32, 0.28);
}

.previewHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.previewHead strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.previewBody {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg-subtle);
}

.previewTools {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.previewTools a {
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.previewFrame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: var(--panel);
}

.previewText {
  height: 100%;
  margin: 0;
  overflow: auto;
  padding: 16px;
  color: var(--ink-2);
  font: inherit;
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.docActions .primaryAction {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--panel);
}

.docActions .secondaryBtn {
  border-radius: var(--r-pill);
  background: var(--panel);
}

.rbacGrid,
.slaMiniGrid {
  display: grid;
  gap: 8px;
}

.rbacGrid div,
.slaMiniGrid div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

.rbacGrid strong,
.slaMiniGrid strong {
  color: var(--brand);
  font-size: 11px;
}

.rbacGrid span,
.slaMiniGrid span {
  color: var(--muted);
  font-size: 9px;
}

@media (max-width: 1180px) {
  .kmTabPanel#qaPanel,
  .kmTabPanel.files {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .kmInspector {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kmTabPanel.files {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .kmConsole {
    height: auto;
    overflow: visible;
  }

  .kmTabPanel#qaPanel,
  .kmTabPanel.files,
  .kmInspector,
  .kmToolbarControls,
  .kmManageFilters,
  .kmQuickActions {
    grid-template-columns: 1fr;
  }

  .kmDropZone {
    display: grid;
  }

  .kmChatPanel {
    min-height: calc(100vh - 190px);
  }

  .kmChatToolbar {
    display: grid;
  }

  .kmFilesToolbar {
    display: grid;
    gap: 10px;
    padding: 12px 0;
  }

  .kmFileActions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .kmFileActions select,
  .kmFileActions #addDocBtn {
    width: 100%;
  }

  .kmQuickActions {
    display: flex;
    width: 100%;
  }

  .kmQuickActions .secondaryBtn {
    flex: 1;
  }
}


@media (max-width: 640px) {
  .controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .kmConsole {
    padding: 10px;
  }

  .kmAskForm,
  .docRow {
    grid-template-columns: 1fr;
  }

  .kmAnswer {
    max-width: 100%;
  }
}

.meta {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 9px 12px;
  margin: 12px 0 0;
  font-size: 14px;
}

.meta dt {
  color: var(--muted);
}

.meta dd {
  margin: 0;
  word-break: break-word;
}

.fieldGrid {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.fieldRow {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  min-height: 28px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.fieldRow span:first-child {
  color: var(--muted);
}

.missing {
  color: var(--warn);
}

.checkList {
  margin: 12px 0 0;
  padding-left: 18px;
  line-height: 1.8;
  color: var(--ink-2);
  font-size: 14px;
}

.sttControls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.recordState {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recordState.live {
  color: var(--bad);
  border-color: var(--brand);
  background: var(--bad-soft);
}

.transcriptLog {
  height: 180px;
  overflow: auto;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  font-size: 14px;
  line-height: 1.5;
}

.voiceActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* 行內 icon 按鍵：依內容寬度，不撐滿；固定最小寬度避免切換狀態時按鍵大小跳動 */
.voiceActions .iconBtn {
  flex: 0 0 auto;
  min-width: 116px;
}

/* compact 列（測試播放／嗶聲）只有單一圖示，不需固定寬度 */
.voiceActions.compact .iconBtn {
  min-width: 0;
}

.diagnostics {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.diagnostics summary {
  cursor: pointer;
}

.transcriptItem {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.transcriptItem:last-child {
  border-bottom: 0;
}

.provider {
  color: var(--muted);
  font-size: 12px;
  /* 長主旨等內容截斷，避免撐寬版面（換案件時寬度跳動） */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .conversation {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  /* 標題列維持同一水平：標題靠左、動作靠右 */
  .topbar {
    min-height: 0;
    padding: 10px 14px;
    gap: 10px;
  }

  .topbar > div:first-child {
    min-width: 0;
  }

  .topbar h1 {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar p {
    display: none;
  }

  /* 返回鈕在窄螢幕只留圖示 */
  .iconBtn .btnText {
    display: none;
  }

  .layout {
    padding: 10px;
  }

  .controls,
  .composer,
  .voiceActions {
    grid-template-columns: 1fr;
  }

  .message {
    max-width: 100%;
  }
}

/* 每語系 STT/TTS 模型選擇 */
/* 即時語音紀錄（可收合，預設收起以精簡版面） */
.logFold { margin-top: 10px; }
.logFold > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
}
.logFold > summary::before { content: "▸ "; color: var(--brand); }
.logFold[open] > summary::before { content: "▾ "; }
.logFold .transcriptLog { margin-top: 8px; }

/* 語音對話：目前語言 inline */
.inlineField {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.inlineField select { flex: 1; min-height: 34px; padding: 0 8px; }

/* 進階設定（可收合面板） */
.advanced > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.advanced > summary::before { content: "▸ "; color: var(--brand); }
.advanced[open] > summary::before { content: "▾ "; }
.advancedBody { margin-top: 12px; display: grid; gap: 10px; }
.advancedBody h3 { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.advancedBody .checkList { margin-top: 0; }

/* LLM 單獨一列：標籤 + 全寬下拉 */
.modelField { display: grid; gap: 4px; margin-bottom: 12px; }
.modelField label { font-size: 12px; font-weight: 600; color: var(--muted); }
.modelField select { width: 100%; min-height: 36px; padding: 0 8px; }

/* 每語系：語系 / STT / TTS 三欄對齊表格 */
.modelGrid {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
}
.modelHead { font-size: 11px; font-weight: 600; color: var(--muted); }
.modelGrid .modelLang { font-size: 13px; font-weight: 600; }
.modelGrid select { width: 100%; min-height: 32px; padding: 0 6px; font-size: 12px; }
.hint { font-size: 11px; color: var(--muted); margin: 6px 0 0; }

/* 報修信件清單 */
.repairList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  max-height: 320px;
  overflow: auto;
}
.repairItem {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}
.repairSubject { font-weight: 600; font-size: 14px; color: var(--ink); }
.repairMetaLine { margin-top: 2px; font-size: 12px; color: var(--muted); }
.repairBody {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow: auto;
}
.repairEmpty { font-size: 13px; color: var(--muted-2); padding: 8px 0; }

.agentWorkspace {
  display: grid;
  gap: 14px;
  padding: 0 16px 16px;
  max-width: 1440px;
  margin: 0 auto;
}

.agentStickyBar {
  display: grid;
  gap: 10px;
  padding: 12px 0 10px;
  background: var(--bg);
}

.handoffAlert {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--bad-soft);
  color: var(--bad);
}

.handoffAlert.quiet {
  border-color: var(--line);
  background: var(--bg-subtle);
  color: var(--muted);
}

.handoffAlert span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.alertMetrics {
  display: inline-flex;
  gap: 10px;
}

.alertMetrics span {
  min-width: 82px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(211, 6, 15, 0.16);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--muted);
}

.alertMetrics strong {
  color: var(--bad);
  font-size: 22px;
  line-height: 1;
}

.agentTabs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 2px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.agentTab,
.agentRefresh {
  min-height: 40px;
}

.agentTab {
  border-color: var(--line);
  background: var(--panel);
  color: var(--muted);
}

.agentTab:hover,
.agentTab.active {
  border-color: var(--brand);
  background: var(--bad-soft);
  color: var(--brand);
}

.agentRefresh {
  margin-left: auto;
}

/* 分頁旁的「需真人」數量徽章 */
.tabCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--panel);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.tabCount[hidden] {
  display: none;
}

.listFilter {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.listFilter .filterBtn {
  flex: 0 0 auto;
}

.filterBtn {
  min-height: 40px;
  padding: 0 14px;
  border-color: var(--line);
  background: var(--panel);
  color: var(--muted);
}

.filterBtn:hover,
.filterBtn.active {
  border-color: var(--brand);
  background: var(--bad-soft);
  color: var(--brand);
}

.agentTabPanel {
  display: none;
  gap: 16px;
}

.agentTabPanel.active {
  display: grid;
}

#phonePanel {
  grid-template-columns: 1fr;
  align-items: stretch;
}

/* 郵件分頁版面 — 行動優先：小/中/矮螢幕單欄堆疊、整頁自然捲動，
   信件往來保留足夠高度，不被摘要擠壓。 */
#emailPanel {
  grid-template-columns: 1fr;
  align-items: stretch;
}

#emailPanel.active {
  height: auto;
}

#vipPanel {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.vipToolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}

.vipToolbar input,
.vipForm input,
.vipForm textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

.vipToolbar input {
  min-height: 40px;
  padding: 0 12px;
}

.vipTable {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: auto;
}

.vipTable table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
}

.vipTable th,
.vipTable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.vipTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.vipTable tbody tr {
  cursor: pointer;
}

.vipTable tbody tr:hover,
.vipTable tbody tr.active {
  background: var(--bad-soft);
}

.vipTable code {
  padding: 2px 5px;
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  color: var(--ink-2);
  font-size: 12px;
}

.vipEditorPane {
  align-self: start;
}

.vipForm {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.vipForm label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.vipForm input {
  min-height: 38px;
  padding: 0 10px;
}

.vipForm textarea {
  min-height: 96px;
  padding: 9px 10px;
  resize: vertical;
}

.vipFormActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.caseRight {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* 拖曳把手預設隱藏（僅桌機並排版面顯示） */
.resizer {
  display: none;
  flex: none;
}

.caseSummaryPane {
  flex: 0 0 auto;
}

.caseThreadPane {
  flex: 1 1 auto;
  min-height: 0;
}

/* 返回清單鈕：僅窄螢幕主從式時顯示 */
.backToList {
  display: none;
}

/* 窄螢幕主從式：預設只顯示清單；選了案件 (.detail) 才顯示詳情 */
@media (max-width: 1023px) {
  .agentTabPanel.active .caseRight {
    display: none;
  }

  .agentTabPanel.active.detail > .casePane:first-child {
    display: none;
  }

  .agentTabPanel.active.detail .caseRight {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .backToList {
    display: inline-flex;
  }
}

/* 小螢幕：各區以 max-height + 內捲避免互相擠壓；對話區保底高度。 */
#emailSessionList,
#phoneSessionList {
  max-height: 40vh;
}

#caseSummary,
#phoneSummary {
  max-height: 34vh;
}

#emailDetail,
#phoneTranscript {
  min-height: 340px;
}

/* 桌機寬度：固定高度 app shell，左清單＋右側摘要／信件往來，三區各自獨立捲動。
   不再用視窗高度判斷裝置，避免寬螢幕在瀏覽器縮放後被誤判成平板。 */
@media (min-width: 1024px) {
  /* App shell：最外層不出現卷軸，內部各區自行捲動（用 flex 填滿，不用魔數高度）。 */
  body.appShell {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body.appShell .topbar {
    position: static;
    flex: none;
  }

  /* 使用者頁（遠傳 AI 智慧報修平台）：填滿視窗、左右兩欄各自內部捲動 */
  body.appShell .layout {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    align-items: stretch;
    padding: 12px 16px 14px;
  }

  body.appShell .conversation {
    min-height: 0;
    height: 100%;
  }

  body.appShell .chatLog {
    min-height: 0;
  }

  body.appShell .side {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  body.appShell .agentWorkspace {
    flex: 1 1 auto;
    min-height: 0;
    /* width:100% 讓寬度由容器決定（margin:0 auto 會使 flex 項目縮成內容寬→隨案件跳動） */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 14px;
  }

  body.appShell .agentStickyBar {
    position: static;
    flex: none;
    box-shadow: none;
    padding: 0;
  }

  body.appShell .agentTabPanel.active {
    flex: 1 1 auto;
    min-height: 0;
  }

  body.appShell #emailPanel.active,
  body.appShell #phonePanel.active {
    height: auto;
  }

  #phonePanel,
  #emailPanel {
    /* 清單寬度可拖曳（--list-w），中間 6px 為拖曳把手，右側填滿 */
    grid-template-columns: var(--list-w, 320px) 6px minmax(0, 1fr);
  }

  .caseRight {
    height: 100%;
  }

  .caseSummaryPane {
    /* 摘要高度可拖曳（--sum-h） */
    flex: 0 0 var(--sum-h, 230px);
    max-height: none;
  }

  #emailSessionList,
  #caseSummary,
  #phoneSessionList,
  #phoneSummary {
    max-height: none;
  }

  #emailDetail,
  #phoneTranscript {
    min-height: 0;
  }

  /* 拖曳把手 */
  .resizer {
    display: block;
    background: transparent;
    transition: background 0.15s;
  }

  .resizerX {
    cursor: col-resize;
    align-self: stretch;
    border-radius: var(--r-sm);
  }

  .resizerY {
    cursor: row-resize;
    height: 6px;
    border-radius: var(--r-sm);
  }

  .resizer:hover,
  .resizer.dragging {
    background: var(--brand);
  }
}

.casePane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
}

.casePane > .panelHeader {
  margin-bottom: 4px;
}

.caseScroll {
  flex: 1 1 auto;
  min-height: 0;
  /* 永遠顯示縱向捲軸軌道（相容所有瀏覽器），避免有/無捲軸造成內容寬度跳動 */
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.caseTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0;
  line-height: 1.35;
}

.agentMeta {
  gap: 5px 12px;
  margin: 0;
  font-size: 13px;
}

.sessionPane {
  align-self: start;
}

.phoneConversation {
  min-height: calc(100vh - 190px);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 12px;
}

/* caseScroll 內容區塊間距（清單本身用 grid gap，不另加） */
.caseScroll > * + * {
  margin-top: 10px;
}

.caseThreadPane .caseScroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.caseThreadPane .caseScroll > * + * {
  margin-top: 0;
}

.sessionList.caseScroll > * + * {
  margin-top: 0;
}

.emailBody {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.sourceTag {
  display: inline-block;
  padding: 0 7px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  color: var(--panel);
}

.sourceTag.mail { background: var(--info); }
.sourceTag.session { background: var(--ink); }

.msgFrom { font-size: 11px; color: var(--muted-2); margin-bottom: 4px; }

/* 模型管理後台 */
.adminWrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 16px;
}
.adminCard { display: grid; gap: 14px; }
.adminRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.adminRow:last-of-type { border-bottom: none; }
.adminLabel { display: grid; gap: 2px; }
.adminRow select { min-width: 280px; min-height: 38px; padding: 0 10px; }
.adminActions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.sessionList {
  display: grid;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 0;
  margin-top: 8px;
}

/* 清單列（Outlook 風格：扁平、密集，列間只有分隔線） */
.caseCard {
  display: grid;
  align-content: start;
  gap: 4px;
  width: 100%;
  min-height: 0;
  padding: 10px 10px 10px 9px;
  border: none;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.caseCard:hover {
  background: var(--bg-subtle);
}

.caseCard.active {
  border-left-color: var(--brand);
  background: var(--bad-soft);
}

.caseCard.urgent {
  border-left-color: var(--brand);
}

.caseCard.urgent .cardTitle {
  font-weight: 700;
}

/* 清單列在案件面板中靠邊鋪滿，分隔線橫貫整欄 */
.casePane .sessionList {
  margin-left: -12px;
  margin-right: -12px;
}

.casePane .caseCard {
  padding-left: 9px;
  padding-right: 12px;
}

.cardRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cardTitle {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardTime {
  flex: none;
  font-size: 11px;
  color: var(--muted-2);
}

/* 第二行：預覽 + 小標籤同一列 */
.cardSub {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cardSnippet {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardChips {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cardCount,
.cardLang {
  font-size: 11px;
  color: var(--muted-2);
}

/* 狀態徽章 */
.statusPill {
  display: inline-block;
  padding: 0 7px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  background: var(--bg-subtle);
  color: var(--muted);
}

.statusPill.urgent {
  background: var(--brand);
  color: var(--panel);
}

.statusPill.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.statusPill.ai {
  background: var(--info-soft);
  color: var(--info);
}

/* 真人回覆輸入框（案件需真人時顯示在信件往來底部） */
.replyBox {
  flex: none;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
}

/* hidden 屬性必須勝過上面的 display:grid，否則隱藏無效。 */
.replyBox[hidden] {
  display: none;
}

.replyHint {
  font-size: 12px;
  color: var(--brand);
}

/* 輸入框與按鍵同一水平：textarea 撐滿、按鍵靠右 */
.replyRow {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.replyBox textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
}

.replyActions {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.replyActions button {
  height: 50px;
  padding: 0 16px;
}

.secondaryBtn {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}

.secondaryBtn:hover {
  border-color: var(--brand);
  background: var(--bad-soft);
  color: var(--brand);
}

/* 視窗尺寸角標（協助確認 RWD / 無外層卷軸） */
.viewportBadge {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 50;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(32, 32, 32, 0.72);
  color: var(--panel);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  pointer-events: none;
  user-select: none;
}

.handoffBadge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--panel);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  vertical-align: middle;
}

/* 案件摘要標頭：主旨 + 狀態徽章 */
.caseHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.threadHeadRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.miniBtn {
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}

.miniBtn:hover {
  border-color: var(--brand);
  background: var(--bad-soft);
  color: var(--brand);
}

.caseHead .caseTitle {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 固定摘要欄位：最多兩欄（每案一致），容器太窄才回一欄；長欄位跨整列 */
#caseSummary,
#phoneSummary {
  container-type: inline-size;
}

.summaryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px;
  margin-top: 4px;
}

@container (max-width: 380px) {
  .summaryGrid {
    grid-template-columns: 1fr;
  }
}

.sumField {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.sumField--wide {
  grid-column: 1 / -1;
}

.sumField .k {
  color: var(--muted-2);
  font-size: 12px;
}

.sumField .v {
  color: var(--ink);
  word-break: break-word;
}

/* 案件摘要：一排 meta chips（取代稀疏的 dl） */
.metaBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.metaChip {
  font-size: 12px;
  color: var(--ink);
}

.metaChip .metaLabel {
  margin-right: 4px;
  color: var(--muted-2);
  font-size: 11px;
}

/* 對話泡泡（聊天感）：客戶靠左、我們/AI 靠右，氣泡有底色與圓角 */
.bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
}

/* 客戶（來信/來電）靠左 */
.bubble.in {
  align-self: flex-start;
  background: var(--panel);
  border-color: var(--line);
  border-bottom-left-radius: 4px;
}

/* AI 系統靠右（我方回覆）、藍色系 */
.bubble.bot {
  align-self: flex-end;
  background: var(--bg-subtle);
  border-color: var(--info-line);
  border-bottom-right-radius: 4px;
}

/* 我們（真人客服）靠右、品牌色系 */
.bubble.out {
  align-self: flex-end;
  background: var(--bad-soft);
  border-color: var(--bad-line);
  border-bottom-right-radius: 4px;
}

.bubbleHead {
  display: flex;
  /* 置中而非 baseline：標題列現在混了文字與播放鍵圖示，baseline 會讓圖示被文字的
     ascent/descent 推歪；改置中後名稱、時間、播放鍵三者的視覺中線才會齊。 */
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 3px;
}

.bubbleWho {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.bubbleMeta {
  font-size: 10.5px;
  color: var(--muted-2);
}

.bubbleBody {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.bubble .translation {
  font-size: 12px;
}

.bubbleAudioList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.bubbleAudioBtn,
.kpiSpeakBtn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(14, 127, 143, 0.28);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0 0 0 2px;
}

.bubble.bot .bubbleAudioList,
.bubble.out .bubbleAudioList {
  justify-content: flex-end;
}

.bubble.out .bubbleAudioBtn,
.bubble.bot .bubbleAudioBtn,
.kpiDialogue .bubble.bot .kpiSpeakBtn {
  margin-left: auto;
  border-color: rgba(47, 89, 196, 0.28);
  background: var(--bg-subtle);
  color: var(--info);
}

.bubbleAudioBtn:hover,
.kpiSpeakBtn:hover {
  background: var(--accent-soft);
}

.bubble.out .bubbleAudioBtn:hover,
.bubble.bot .bubbleAudioBtn:hover,
.kpiDialogue .bubble.bot .kpiSpeakBtn:hover {
  background: var(--info-soft);
}

/* ── 標題列內嵌播放鍵 ─────────────────────────────────────────────
   放在「客戶／遠傳AI客服」名稱旁邊的原音播放鍵。這裡的動作是「聽這句錄音」，
   所以用喇叭而不是播放三角；不加底色色塊，因為對話串本身很扁平（白底、細框、
   淡灰時間戳），一塊實心色會變成整列最重的元素，蓋過名稱。
   平時是淡灰，滑過轉藍並微放大，播放中定在藍色並讓兩道音波輪流閃動。
   17px 的按壓範圍壓在 .bubbleWho 的行高（12px × 1.5 = 18px）內，不撐高標題列。
   這一段刻意放在上面舊的 .kpiSpeakBtn 規則之後，避免同分特異性被舊規則蓋掉。 */
.bubbleHead .kpiSpeakBtnInline {
  align-self: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-2);
  line-height: 1;
  margin: 0 -1px;
  padding: 0;
  transition: color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

/* 喇叭圖形在 viewBox 正中，配合 place-items:center 即可對齊名稱中線；
   pointer-events 關掉讓點擊事件的 target 一定是 button。 */
.bubbleHead .kpiSpeakBtnInline svg {
  display: block;
  width: 11px;
  height: 11px;
  pointer-events: none;
}

.bubbleHead .kpiSpeakBtnInline:hover {
  background: transparent;
  color: var(--info);
  transform: scale(1.1);
}

.bubbleHead .kpiSpeakBtnInline:active {
  transform: scale(0.94);
}

.bubbleHead .kpiSpeakBtnInline:focus-visible {
  outline: none;
  color: var(--info);
  box-shadow: 0 0 0 2px rgba(47, 89, 196, 0.4);
}

.bubbleHead .kpiSpeakBtnInline.isPlaying {
  background: transparent;
  color: var(--info);
}

/* 播放中：兩道音波依序淡入淡出，看得出多段 TTS 還在連播。 */
.bubbleHead .kpiSpeakBtnInline.isPlaying .speakerWave1 {
  animation: speakerWave 1.1s ease-in-out infinite;
}

.bubbleHead .kpiSpeakBtnInline.isPlaying .speakerWave2 {
  animation: speakerWave 1.1s ease-in-out 0.18s infinite;
}

@keyframes speakerWave {
  0%,
  100% {
    opacity: 0.2;
  }
  45% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubbleHead .kpiSpeakBtnInline {
    transition: none;
  }
  .bubbleHead .kpiSpeakBtnInline:hover,
  .bubbleHead .kpiSpeakBtnInline:active {
    transform: none;
  }
  .bubbleHead .kpiSpeakBtnInline.isPlaying .speakerWave1,
  .bubbleHead .kpiSpeakBtnInline.isPlaying .speakerWave2 {
    animation: none;
    opacity: 1;
  }
}

.emptyState {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

.agentMeta {
  margin-top: 0;
}

/* 報修信件面板（橫跨郵件分頁整列） */
.repairPanelFull {
  grid-column: 1 / -1;
  align-self: start;
}

.agentVoicePanel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

@media (max-width: 640px) {
  /* 分頁維持同一水平：電話/郵件靠左、更新靠右（margin-left:auto），中間留白 */
  .agentTabPanel.active,
  #phonePanel,
  #emailPanel {
    grid-template-columns: 1fr;
  }
}

.agentDraftText {
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--ink);
  line-height: 1.45;
}

button:disabled {
  border-color: var(--line);
  background: var(--bg);
  color: var(--muted-2);
  cursor: not-allowed;
}

.emailTranscript {
  min-height: 480px;
  overflow: auto;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.emailSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.emailSummary div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

.emailSummary span {
  color: var(--muted);
  font-size: 11px;
}

.emailSummary strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.emailMessage {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  line-height: 1.5;
  white-space: pre-wrap;
}

.emailMessage header {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.emailMessage.user {
  border-left: 4px solid var(--ink);
}

.emailMessage.assistant {
  border-left: 4px solid var(--line);
}

.emailMessage.agent {
  border-left: 4px solid var(--ok);
}

/* PersonaPlex full-duplex test page */
.duplexLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 16px;
  padding: 16px;
  max-width: 1440px;
  margin: 0 auto;
}

.duplexConsole {
  min-height: calc(100vh - 104px);
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
}

.duplexToolbar {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

.duplexStatusBand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.duplexStatusBand > div {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

.metricLabel {
  color: var(--muted);
  font-size: 12px;
}

.duplexStage {
  min-height: 180px;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--panel);
}

.voiceMeter {
  height: 18px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
}

.voiceMeterFill {
  width: 0%;
  height: 100%;
  background: var(--ok);
  transition: width 80ms linear;
}

.duplexState {
  min-height: 28px;
  color: var(--panel);
  font-size: 20px;
  font-weight: 700;
}

.duplexLog {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

.duplexItem {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  line-height: 1.45;
  font-size: 14px;
}

.duplexItem.system {
  align-self: center;
  max-width: 100%;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  color: var(--bad);
}

.duplexItem.assistant {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
}

.stackedField {
  margin-top: 12px;
}

textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  line-height: 1.5;
  color: var(--ink);
  background: var(--panel);
}

@media (max-width: 960px) {
  .duplexLayout,
  .duplexStatusBand {
    grid-template-columns: 1fr;
  }

  .duplexConsole {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .duplexToolbar {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .duplexToolbar button,
  .navButton {
    width: 100%;
  }
}

@media (max-width: 960px) {
  .kmSummaryGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .topbarActions {
    gap: 8px;
  }

  .modeSwitch {
    border-radius: var(--r-lg);
  }

  .modeButton {
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--r-md);
    font-size: 12px;
    white-space: nowrap;
  }

  .kmSummaryGrid,
  .kmActionBar {
    grid-template-columns: 1fr;
  }

  .kmActionBar {
    display: grid;
  }

  .kmAnswer {
    max-width: 100%;
  }
}

/* 100% browser zoom compact density.
   Keeps the agent/KM consoles close to the user's preferred 75% browser view. */
body.appShell .topbar {
  min-height: 56px;
  padding: 8px 16px;
  gap: 12px;
}

body.appShell .topbar h1 {
  font-size: 18px;
  line-height: 1.2;
}

body.appShell .topbar p {
  margin-top: 2px;
  font-size: 11px;
}

body.appShell .topbarActions {
  gap: 8px;
}

body.appShell .modeSwitch {
  gap: 2px;
  padding: 2px;
}

body.appShell .modeButton {
  min-height: 27px;
  padding: 0 10px;
  font-size: 11px;
}

body.appShell input,
body.appShell select,
body.appShell textarea,
body.appShell button {
  font-size: 11px;
}

body.appShell .iconBtn,
body.appShell .secondaryBtn,
body.appShell .miniBtn,
body.appShell button {
  min-height: 28px;
}

body.appShell .panel {
  padding: 10px;
  border-radius: var(--r-md);
}

body.appShell .panelHeader h2,
body.appShell h2 {
  font-size: 13px;
}

body.appShell .provider,
body.appShell .status {
  font-size: 11px;
}

body.appShell .agentWorkspace {
  gap: 8px;
  max-width: none;
  padding: 0 12px 10px;
}

body.appShell .agentStickyBar {
  gap: 6px;
  padding: 8px 0 6px;
}

body.appShell .agentTabs {
  min-height: 36px;
  gap: 6px;
}

body.appShell .agentTab,
body.appShell .agentRefresh {
  min-height: 32px;
  padding: 0 12px;
}

body.appShell .listFilter {
  gap: 5px;
  margin-top: 8px;
}

  body.appShell .filterBtn {
    min-height: 30px;
    padding: 0 10px;
  }

  body.appShell .vipToolbar {
    margin-top: 8px;
  }

  body.appShell .vipToolbar input {
    min-height: 32px;
    font-size: 12px;
  }

  body.appShell .vipTable {
    margin-top: 8px;
  }

  body.appShell .vipTable table {
    font-size: 11px;
  }

  body.appShell .vipTable th,
  body.appShell .vipTable td {
    padding: 7px 8px;
  }

  body.appShell .vipForm {
    gap: 8px;
    margin-top: 8px;
  }

  body.appShell .vipForm input {
    min-height: 32px;
    font-size: 12px;
  }

  body.appShell .vipForm textarea {
    min-height: 72px;
    font-size: 12px;
  }

body.appShell .casePane {
  padding: 8px;
}

body.appShell .casePane .sessionList {
  margin-left: -8px;
  margin-right: -8px;
}

body.appShell .caseCard {
  gap: 3px;
  padding: 7px 9px 7px 8px;
}

body.appShell .cardTitle {
  font-size: 12px;
  line-height: 1.25;
}

body.appShell .cardTime,
body.appShell .cardCount,
body.appShell .cardLang {
  font-size: 10px;
}

body.appShell .cardSub {
  gap: 6px;
}

body.appShell .cardMemo {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.appShell .cardMemoLabel {
  flex: none;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}

body.appShell .cardSnippet {
  font-size: 11px;
}

body.appShell .sourceTag,
body.appShell .statusPill {
  font-size: 10px;
  line-height: 15px;
}

body.appShell .summaryGrid {
  gap: 6px;
}

body.appShell .sumField {
  padding: 7px 8px;
}

body.appShell .sumField .k {
  font-size: 10px;
}

body.appShell .sumField .v {
  font-size: 11px;
}

body.appShell .emailBody {
  padding: 9px;
  font-size: 12px;
}

body.appShell .replyBox {
  padding: 8px;
}

body.appShell .replyRow textarea {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  font-size: 12px;
}

@media (min-width: 1024px) {
  body.appShell .agentWorkspace {
    gap: 8px;
    padding: 8px 12px 10px;
  }

  #phonePanel,
  #emailPanel {
    grid-template-columns: var(--list-w, 292px) 6px minmax(0, 1fr);
    gap: 10px;
  }

  #vipPanel {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 10px;
  }

  .caseRight {
    gap: 10px;
  }

  .caseSummaryPane {
    flex-basis: var(--sum-h, 190px);
  }
}

body.appShell.kmConsolePage {
  font-size: 10px;
}

body.appShell.kmConsolePage .topbar {
  min-height: 52px;
  padding: 7px 14px;
}

body.appShell.kmConsolePage .topbar h1 {
  font-size: 18px;
}

body.appShell.kmConsolePage .topbarActions .iconBtn {
  min-height: 28px;
  padding: 0 12px;
}

body.appShell.kmConsolePage .kmConsole {
  width: min(1540px, calc(100vw - 20px));
  height: calc(100dvh - 66px);
  gap: 8px;
  padding: 8px 0 10px;
}

body.appShell.kmConsolePage .kmConsoleTabs {
  min-height: 34px;
  padding: 3px;
}

body.appShell.kmConsolePage .kmTab {
  min-height: 26px;
  padding: 0 12px;
}

body.appShell.kmConsolePage .kmChatToolbar {
  min-height: 38px;
  padding: 6px 12px;
}

body.appShell.kmConsolePage .kmToolbarControls {
  grid-template-columns: minmax(118px, 160px) minmax(140px, 200px);
}

body.appShell.kmConsolePage .kmChatLog {
  gap: 6px;
  padding: 14px max(18px, calc((100% - 700px) / 2)) 10px;
}

body.appShell.kmConsolePage .kmChatLog .message,
body.appShell.kmConsolePage .kmAnswer p,
body.appShell.kmConsolePage .kmChatLog .message.assistant p {
  font-size: 12px;
  line-height: 1.6;
}

body.appShell.kmConsolePage .kmChatLog .message.user,
body.appShell.kmConsolePage .kmChatLog .message.assistant {
  padding: 8px 12px;
}

/* 使用者提問泡泡：舒適行距 + 順暢換行 + 指向自己的氣泡造型 */
body.appShell.kmConsolePage .kmChatLog .message.user {
  padding: 10px 15px;
  line-height: 1.75;
  border-radius: 18px 18px 6px 18px;
  background: var(--bad-soft);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(32, 32, 32, 0.04);
}

body.appShell.kmConsolePage .kmAskForm {
  grid-template-columns: minmax(0, 1fr) 56px;
  width: min(620px, calc(100% - 36px));
  margin-bottom: 10px;
  padding: 6px;
}

body.appShell.kmConsolePage .kmAskForm input,
body.appShell.kmConsolePage .kmAskForm button {
  min-height: 30px;
}

body.appShell.kmConsolePage .kmWelcome {
  font-size: 16px;
}

body.appShell.kmConsolePage .kmFilesPanel {
  grid-template-rows: auto minmax(0, 1fr);   /* 工作區填滿剩餘高度,大螢幕不再留白 */
  height: 100%;
  min-height: 0;
  gap: 8px;
  overflow: hidden;
}
/* 檔案分頁本身要撐滿 kmConsole 的 1fr 列,子層才有高度可填 */
body.appShell.kmConsolePage #filesPanel.kmTabPanel.active {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

body.appShell.kmConsolePage .kmFilesToolbar {
  min-height: 58px;
  padding: 9px 8px 9px 2px;
}

body.appShell.kmConsolePage .kmFilesToolbar h2 {
  font-size: 17px;
}

body.appShell.kmConsolePage .kmFilesToolbar p,
body.appShell.kmConsolePage .fileScopeHint,
body.appShell.kmConsolePage .tableSectionHead p {
  font-size: 10px;
}

body.appShell.kmConsolePage .kmFileActions select,
body.appShell.kmConsolePage .kmFileActions #addDocBtn {
  min-height: 34px;
  font-size: 11px;
}

body.appShell.kmConsolePage .kmSectionCard {
  gap: 9px;
  padding: 11px;
}

body.appShell.kmConsolePage .tableSectionHead h3 {
  font-size: 12px;
}

body.appShell.kmConsolePage .docRow {
  grid-template-columns:
    minmax(130px, 1.1fr)
    minmax(76px, 0.58fr)
    minmax(110px, 0.86fr)
    66px
    66px
    50px
    54px
    48px
    126px;
  gap: 6px;
  min-height: 40px;
  padding: 7px 9px;
  font-size: 10px;
}

body.appShell.kmConsolePage .docHead {
  min-height: 30px;
}

body.appShell.kmConsolePage .docRow strong {
  font-size: 11px;
}

body.appShell.kmConsolePage .docActions {
  gap: 4px;
}

body.appShell.kmConsolePage .docActions .miniBtn,
body.appShell.kmConsolePage .docRow .miniBtn {
  min-height: 24px;
  padding: 0 7px;
  font-size: 10px;
}

/* KM file management redesign */
body.appShell.kmConsolePage .kmFilesGrid {
  gap: 12px;
}

body.appShell.kmConsolePage .kmFileStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.appShell.kmConsolePage .fileStatCard {
  min-height: 66px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(32, 32, 32, 0.035);
}

body.appShell.kmConsolePage .fileStatCard.accent {
  border-color: var(--bad-line);
  background: linear-gradient(180deg, var(--panel), var(--bad-soft));
}

body.appShell.kmConsolePage .fileStatCard span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

body.appShell.kmConsolePage .fileStatCard strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

body.appShell.kmConsolePage .fileStatCard.accent strong {
  color: var(--brand);
}

body.appShell.kmConsolePage .reviewBlock {
  border-left: 0;
  border-top: 3px solid var(--brand);
}

body.appShell.kmConsolePage .fileLibraryCard {
  padding: 0;
  overflow: hidden;
}

body.appShell.kmConsolePage .libraryHead {
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

body.appShell.kmConsolePage .libraryTools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

body.appShell.kmConsolePage .fileSearch {
  width: min(320px, 32vw);
  min-width: 190px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--muted);
}

body.appShell.kmConsolePage .fileSearch span {
  font-size: 10px;
  font-weight: 700;
}

body.appShell.kmConsolePage .fileSearch input {
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

body.appShell.kmConsolePage .fileSearch input:focus {
  outline: 0;
}

body.appShell.kmConsolePage .libraryTable {
  border: 0;
  border-radius: 0;
}

body.appShell.kmConsolePage .docTable {
  overflow: visible;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--panel);
}

body.appShell.kmConsolePage .fileLibraryCard .docTable {
  border-width: 0;
}

body.appShell.kmConsolePage .docHead {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--bg-subtle);
  box-shadow: 0 1px 0 var(--line);
  text-transform: none;
}

body.appShell.kmConsolePage .docRow {
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

body.appShell.kmConsolePage .docRow:not(.docHead):hover {
  background: var(--bg-subtle);
  box-shadow: inset 3px 0 0 var(--line-strong);
}

body.appShell.kmConsolePage .docRow.active {
  background: var(--bad-soft);
}

body.appShell.kmConsolePage .docNameCell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.appShell.kmConsolePage .docNameCell i {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 6px;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

body.appShell.kmConsolePage .docNameCell strong {
  min-width: 0;
}

body.appShell.kmConsolePage .docScope,
body.appShell.kmConsolePage .docStatus,
body.appShell.kmConsolePage .docReview {
  min-height: 20px;
  padding: 2px 7px;
}

body.appShell.kmConsolePage .reviewBlock .docTable {
  border-color: var(--line-strong);
}

@media (max-width: 1180px) {
  body.appShell.kmConsolePage .kmFileStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.appShell.kmConsolePage .libraryHead,
  body.appShell.kmConsolePage .libraryTools {
    align-items: stretch;
  }

  body.appShell.kmConsolePage .libraryHead {
    display: grid;
  }

  body.appShell.kmConsolePage .libraryTools {
    justify-content: flex-start;
  }

  body.appShell.kmConsolePage .fileSearch {
    width: min(420px, 100%);
  }
}

/* KM file management workspace refresh */
body.appShell.kmConsolePage .fileToolbarMain {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}

body.appShell.kmConsolePage .kmFilesToolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px 12px 12px 4px;
}

body.appShell.kmConsolePage .kmFilesToolbar .fileSearch {
  width: 100%;
  max-width: 520px;
  justify-self: end;
  min-height: 38px;
  border-radius: var(--r-md);
  background: var(--panel);
}

body.appShell.kmConsolePage .fileDropZone {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

body.appShell.kmConsolePage .fileDropZone:hover,
body.appShell.kmConsolePage .fileDropZone.dragging {
  border-color: var(--brand);
  background: var(--bg-subtle);
  box-shadow: 0 8px 24px rgba(32, 32, 32, 0.06);
}

body.appShell.kmConsolePage .fileDropIcon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--panel);
  font-size: 26px;
  line-height: 1;
}

body.appShell.kmConsolePage .fileDropZone strong,
body.appShell.kmConsolePage .fileDropZone span {
  display: block;
}

body.appShell.kmConsolePage .fileDropZone strong {
  color: var(--ink);
  font-size: 13px;
}

body.appShell.kmConsolePage .fileDropZone span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

body.appShell.kmConsolePage .kmFileStats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.appShell.kmConsolePage .fileStatCard {
  appearance: none;
  justify-items: start;
  width: 100%;
  min-height: 76px;
  border-radius: var(--r-md);
  color: inherit;
  text-align: left;
}

body.appShell.kmConsolePage .fileStatCard.active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), 0 8px 22px rgba(239, 49, 35, 0.1);
}

body.appShell.kmConsolePage .fileWorkspace {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.appShell.kmConsolePage .fileInspector {
  position: sticky;
  top: 72px;
  min-height: 360px;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(32, 32, 32, 0.035);
}

body.appShell.kmConsolePage .fileInspectorEmpty {
  min-height: 300px;
  display: grid;
  place-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

body.appShell.kmConsolePage .fileInspectorEmpty strong {
  color: var(--ink);
  font-size: 14px;
}

body.appShell.kmConsolePage .fileInspectorEmpty span {
  max-width: 210px;
  font-size: 11px;
  line-height: 1.45;
}

body.appShell.kmConsolePage .inspectorFileMark {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

body.appShell.kmConsolePage .inspectorTitle {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.appShell.kmConsolePage .inspectorTitle strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

body.appShell.kmConsolePage .inspectorTitle span {
  color: var(--muted);
  font-size: 11px;
}

body.appShell.kmConsolePage .inspectorBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.appShell.kmConsolePage .inspectorMeta {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body.appShell.kmConsolePage .inspectorMeta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

body.appShell.kmConsolePage .inspectorMeta dt,
body.appShell.kmConsolePage .inspectorMeta dd {
  margin: 0;
  font-size: 11px;
}

body.appShell.kmConsolePage .inspectorMeta dt {
  color: var(--muted);
}

body.appShell.kmConsolePage .inspectorMeta dd {
  color: var(--ink);
  text-align: right;
}

body.appShell.kmConsolePage .inspectorSummary {
  display: grid;
  gap: 6px;
}

body.appShell.kmConsolePage .inspectorSummary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

body.appShell.kmConsolePage .inspectorSummary p {
  max-height: 132px;
  overflow: auto;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}

body.appShell.kmConsolePage .inspectorActions {
  display: grid;
  gap: 8px;
}

body.appShell.kmConsolePage .inspectorActions button {
  width: 100%;
  min-height: 34px;
  border-radius: var(--r-md);
  font-size: 12px;
}

body.appShell.kmConsolePage .inspectorActions .approve {
  background: var(--ok);
}

body.appShell.kmConsolePage .inspectorActions .danger {
  color: var(--bad);
}

body.appShell.kmConsolePage .docRow {
  grid-template-columns:
    minmax(180px, 1.24fr)
    minmax(92px, 0.58fr)
    minmax(160px, 1fr)
    minmax(92px, 0.54fr)
    78px
    minmax(150px, 0.8fr);
  min-height: 56px;
}

body.appShell.kmConsolePage .docNameCell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
}

body.appShell.kmConsolePage .docNameCell i {
  grid-row: 1 / span 2;
}

body.appShell.kmConsolePage .docNameCell small {
  margin-top: 0;
  font-size: 10px;
}

body.appShell.kmConsolePage .docStatusStack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

body.appShell.kmConsolePage .docUpdated {
  color: var(--muted);
  white-space: nowrap;
}

body.appShell.kmConsolePage .docActions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width: 1180px) {
  body.appShell.kmConsolePage .fileWorkspace {
    grid-template-columns: 1fr;
  }

  body.appShell.kmConsolePage .fileToolbarMain {
    grid-template-columns: minmax(160px, 0.55fr) minmax(220px, 1fr);
  }

  body.appShell.kmConsolePage .kmFilesToolbar .fileSearch {
    justify-self: stretch;
    max-width: none;
  }

  body.appShell.kmConsolePage .fileInspector {
    position: static;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  body.appShell.kmConsolePage .kmFilesToolbar,
  body.appShell.kmConsolePage .fileToolbarMain {
    grid-template-columns: 1fr;
  }

  body.appShell.kmConsolePage .kmFileActions {
    justify-content: stretch;
  }

  body.appShell.kmConsolePage .kmFileStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.appShell.kmConsolePage .docHead {
    display: none;
  }

  body.appShell.kmConsolePage .docRow {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  body.appShell.kmConsolePage .docActions {
    justify-content: flex-start;
  }
}

/* Keep the QA workspace aligned when browser zoom triggers older tablet rules. */
body.appShell.kmConsolePage .kmTabPanel#qaPanel {
  grid-template-columns: var(--km-rail-width, 280px) 6px minmax(0, 1fr);
}

body.appShell.kmConsolePage .kmTabPanel#qaPanel.railCollapsed {
  grid-template-columns: 0 0 minmax(0, 1fr);
}

@media (max-width: 1180px) {
  body.appShell.kmConsolePage .kmTabPanel#qaPanel {
    grid-template-columns: minmax(220px, var(--km-rail-width, 280px)) 6px minmax(0, 1fr);
  }

  body.appShell.kmConsolePage .kmTabPanel#qaPanel.railCollapsed {
    grid-template-columns: 0 0 minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  body.appShell.kmConsolePage .kmTabPanel#qaPanel {
    grid-template-columns: minmax(210px, 42vw) 6px minmax(0, 1fr);
  }

  body.appShell.kmConsolePage .kmTabPanel#qaPanel.railCollapsed {
    grid-template-columns: 0 0 minmax(0, 1fr);
  }
}

/* ===== KM 檔案總管：資料夾樹 / 麵包屑 / 子資料夾 / 拖放 ===== */
body.appShell.kmConsolePage .folderTreePanel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(32, 32, 32, 0.035);
  position: sticky;
  top: 72px;
}
body.appShell.kmConsolePage .folderTreeHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.appShell.kmConsolePage .folderTreeHead strong {
  font-size: 12px;
  color: var(--ink);
}
body.appShell.kmConsolePage .folderTree {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
body.appShell.kmConsolePage .folderNode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
body.appShell.kmConsolePage .folderNode:hover { background: var(--bg-subtle); }
body.appShell.kmConsolePage .folderNode.active {
  background: var(--bad-soft);
  color: var(--bad);
  font-weight: 700;
}
body.appShell.kmConsolePage .folderNode.root { font-weight: 700; }
body.appShell.kmConsolePage .folderNodeName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.appShell.kmConsolePage .folderNodeBtns {
  display: none;
  flex: 0 0 auto;
  gap: 2px;
}
body.appShell.kmConsolePage .folderNode:hover .folderNodeBtns { display: flex; }
body.appShell.kmConsolePage .treeMiniBtn {
  border: 0;
  background: transparent;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
body.appShell.kmConsolePage .treeMiniBtn:hover { background: var(--bg); color: var(--ink); }
body.appShell.kmConsolePage .folderNode.dropHover,
body.appShell.kmConsolePage .folderChip.dropHover {
  outline: 2px dashed var(--brand);
  outline-offset: -2px;
  background: var(--bad-soft);
}

body.appShell.kmConsolePage .libraryHeadMain {
  display: grid;
  gap: 6px;
  min-width: 0;
}
body.appShell.kmConsolePage .folderBreadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
body.appShell.kmConsolePage .crumb {
  border: 0;
  background: transparent;
  padding: 2px 6px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
body.appShell.kmConsolePage .crumb:hover { background: var(--bg-subtle); color: var(--bad); }
body.appShell.kmConsolePage .crumbSep { color: var(--muted-2); font-size: 12px; }
body.appShell.kmConsolePage .folderActions { display: flex; gap: 6px; flex-wrap: wrap; }
body.appShell.kmConsolePage .folderHint { color: var(--muted-2); font-size: 11px; }

body.appShell.kmConsolePage .subfolderStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 4px;
}
body.appShell.kmConsolePage .subfolderStrip:empty { display: none; }
body.appShell.kmConsolePage .folderChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
body.appShell.kmConsolePage .folderChip:hover { background: var(--bg-subtle); border-color: var(--line-strong); }
body.appShell.kmConsolePage .folderChip small {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
body.appShell.kmConsolePage .searchHint { color: var(--muted); font-size: 11px; padding: 2px 0; }

body.appShell.kmConsolePage .docRow[draggable="true"] { cursor: grab; }
body.appShell.kmConsolePage .moveSelect {
  max-width: 120px;
  padding: 2px 4px;
  font-size: 10px;
  cursor: pointer;
}
body.appShell.kmConsolePage #kmFolderScope {
  max-width: 160px;
}

@media (max-width: 1180px) {
  body.appShell.kmConsolePage .folderTreePanel { position: static; top: auto; }
}

/* 拖曳移動：來源列淡化 + 拖放提示 */
body.appShell.kmConsolePage .docRow.dragging { opacity: 0.45; }
body.appShell.kmConsolePage .folderDragHint {
  margin: 0;
  color: var(--muted-2);
  font-size: 10.5px;
  line-height: 1.4;
}

/* ===== KM 檔案清單：Windows 檔案總管 details 風格 ===== */
body.appShell.kmConsolePage .libraryTable .docRow {
  grid-template-columns: 30px minmax(0, 1.4fr) minmax(86px, 0.5fr) 92px 120px minmax(78px, 0.48fr) 56px minmax(150px, 184px);
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 5px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}
/* 列上的操作按鈕 */
body.appShell.kmConsolePage .exActions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
body.appShell.kmConsolePage .rowBtn {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--muted);
  padding: 3px 8px;
  border-radius: var(--r-md);
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
body.appShell.kmConsolePage .rowBtn:hover { background: var(--bg-subtle); border-color: var(--line-strong); color: var(--ink); }
body.appShell.kmConsolePage .rowBtn.primary { border-color: var(--bad-line); background: var(--bad-soft); color: var(--bad); font-weight: 700; }
body.appShell.kmConsolePage .rowBtn.primary:hover { background: var(--bad-soft); }
body.appShell.kmConsolePage .rowBtn.danger:hover { background: var(--bad-soft); border-color: var(--brand); color: var(--bad); }
body.appShell.kmConsolePage .rowBtn:disabled { opacity: 0.4; cursor: not-allowed; }
body.appShell.kmConsolePage .docHead .exActions,
body.appShell.kmConsolePage .libraryTable .docHead span:last-child { justify-content: flex-end; text-align: right; }
body.appShell.kmConsolePage .libraryTable .docHead {
  min-height: 34px;
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  background: var(--bg-subtle);
}
body.appShell.kmConsolePage .libraryTable .docHead span { padding: 0; background: none; min-width: 0; }
body.appShell.kmConsolePage .exRow:not(.docHead):hover { background: var(--bg-subtle); box-shadow: none; }
body.appShell.kmConsolePage .libraryTable .docRow.active {
  background: var(--info-soft);
  box-shadow: inset 0 0 0 1px var(--info-line);
}

body.appShell.kmConsolePage .exName {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
body.appShell.kmConsolePage .exNameText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
body.appShell.kmConsolePage .fileMark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  border-radius: var(--r-sm);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: var(--bg-subtle);
  color: var(--muted);
}
body.appShell.kmConsolePage .fileMark--pdf { background: var(--bad-soft); color: var(--bad); }
body.appShell.kmConsolePage .fileMark--word { background: var(--info-soft); color: var(--info); }
body.appShell.kmConsolePage .fileMark--excel { background: var(--ok-soft); color: var(--ok); }
body.appShell.kmConsolePage .fileMark--ppt { background: var(--warn-soft); color: var(--bad); }
body.appShell.kmConsolePage .fileMark--csv { background: var(--ok-soft); color: var(--ok); }
body.appShell.kmConsolePage .fileMark--md,
body.appShell.kmConsolePage .fileMark--text { background: var(--bg-subtle); color: var(--muted); }
body.appShell.kmConsolePage .fileMark--image,
body.appShell.kmConsolePage .fileMark--video { background: var(--bg-subtle); color: var(--info); }
body.appShell.kmConsolePage .fileMark--zip { background: var(--warn-soft); color: var(--warn); }
body.appShell.kmConsolePage .fileMark--audio { background: var(--accent-soft); color: var(--accent); }
body.appShell.kmConsolePage .fileMark--folder {
  background: transparent;
  font-size: 17px;
  width: 30px;
}

body.appShell.kmConsolePage .exStatus { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
body.appShell.kmConsolePage .exBadge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
body.appShell.kmConsolePage .exBadge.ok { background: var(--ok-soft); color: var(--ok); }
body.appShell.kmConsolePage .exBadge.off { background: var(--bg-subtle); color: var(--muted); }
body.appShell.kmConsolePage .exBadge.pending { background: var(--warn-soft); color: var(--warn); }
body.appShell.kmConsolePage .exBadge.warn { background: var(--bad-soft); color: var(--bad); }
body.appShell.kmConsolePage .exMuted { color: var(--muted-2); font-size: 11px; }
body.appShell.kmConsolePage .exDate,
body.appShell.kmConsolePage .exType { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.appShell.kmConsolePage .exSize { color: var(--muted); text-align: right; white-space: nowrap; }

body.appShell.kmConsolePage .folderRow { cursor: pointer; }
body.appShell.kmConsolePage .folderRow .exNameText { font-weight: 600; color: var(--ink); }
body.appShell.kmConsolePage .folderRow.dropHover {
  outline: 2px dashed var(--brand);
  outline-offset: -2px;
  background: var(--bad-soft);
}

/* ===== KM 檔案管理 v2：精練版檔案總管 ===== */
/* 命令列 */
body.appShell.kmConsolePage .fileStickyHeader {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 6px;
  padding-bottom: 2px;
  background: var(--bg-subtle);
  box-shadow: 0 8px 14px rgba(250, 250, 250, 0.9);
}
body.appShell.kmConsolePage .fileCommandBar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: 0 6px 16px rgba(32, 32, 32, 0.03);
}
body.appShell.kmConsolePage .fileCmdSpacer { flex: 1 1 16px; }
body.appShell.kmConsolePage .fileCommandBar .folderBreadcrumb { flex: 0 1 auto; }
body.appShell.kmConsolePage .cmdBtn { min-height: 34px; padding: 0 14px; border-radius: var(--r-md); white-space: nowrap; }
/* 刪除客戶:紅色外框(破壞性,與紅底的「上傳」區隔) */
body.appShell.kmConsolePage .dangerBtn.cmdBtn {
  border: 1px solid var(--brand);
  background: var(--panel);
  color: var(--bad);
  cursor: pointer;
}
body.appShell.kmConsolePage .dangerBtn.cmdBtn:hover { background: var(--bad-soft); border-color: var(--brand); }

/* 分段狀態篩選 */
body.appShell.kmConsolePage .segFilter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}
body.appShell.kmConsolePage .segBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 5px 11px;
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
body.appShell.kmConsolePage .segBtn:hover { color: var(--ink); }
body.appShell.kmConsolePage .segBtn.active {
  background: var(--panel);
  color: var(--bad);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(32, 32, 32, 0.12);
}
body.appShell.kmConsolePage .segBtn em {
  font-style: normal;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
body.appShell.kmConsolePage .segBtn.active em { background: var(--bad-soft); color: var(--bad); }

/* 左導覽鋪 */
body.appShell.kmConsolePage .fileNavRail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100%;
  align-content: stretch;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: 0 6px 16px rgba(32, 32, 32, 0.03);
}
body.appShell.kmConsolePage .railScope { display: grid; gap: 4px; }
body.appShell.kmConsolePage .railScope label { font-size: 11px; font-weight: 700; color: var(--muted); }
body.appShell.kmConsolePage .railScope select { width: 100%; min-height: 32px; }
body.appShell.kmConsolePage .railTreeHead {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px; border-top: 1px solid var(--line);
}
body.appShell.kmConsolePage .railTreeHead strong { font-size: 12px; color: var(--ink); }

/* 清單主區 + 拖放上傳覆蓋層 */
body.appShell.kmConsolePage .fileMain {
  position: relative;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 6px 16px rgba(32, 32, 32, 0.03);
}
/* 修正：class 的 display 會蓋掉 [hidden] 預設的 display:none，需顯式還原，否則覆蓋層/批次列永遠顯示 */
body.appShell.kmConsolePage .dropOverlay[hidden],
body.appShell.kmConsolePage .bulkActions[hidden] { display: none !important; }
body.appShell.kmConsolePage .dropOverlay {
  position: absolute;
  inset: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--brand);
  border-radius: var(--r-lg);
  background: rgba(255, 242, 240, 0.92);
  color: var(--bad);
  font-weight: 700;
  z-index: 5;
  pointer-events: none;
}

/* 狀態列 / 批次操作 */
body.appShell.kmConsolePage .fileStatusBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}
body.appShell.kmConsolePage .statusBarInfo { font-size: 12px; color: var(--muted); }
body.appShell.kmConsolePage .bulkActions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.appShell.kmConsolePage .bulkCount { font-size: 12px; font-weight: 700; color: var(--ink); }
body.appShell.kmConsolePage .bulkActions select { min-height: 30px; max-width: 160px; }
body.appShell.kmConsolePage .ghostBtn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: var(--r-md);
}
body.appShell.kmConsolePage .ghostBtn:hover { background: var(--bg-subtle); color: var(--ink); }
body.appShell.kmConsolePage .miniBtn.danger { color: var(--bad); }

/* 右鍵內容選單 */
.ctxMenu {
  position: fixed;
  z-index: 1000;
  min-width: 168px;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 34px rgba(32, 32, 32, 0.18);
}
.ctxMenu .ctxItem {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.ctxMenu .ctxItem:hover { background: var(--bg-subtle); }
.ctxMenu .ctxItem.danger { color: var(--bad); }
.ctxMenu .ctxItem.danger:hover { background: var(--bad-soft); }
.ctxMenu .ctxSep { height: 1px; margin: 4px 6px; background: var(--bg-subtle); }

@media (max-width: 1180px) {
  body.appShell.kmConsolePage .fileWorkspace {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  body.appShell.kmConsolePage .fileNavRail,
  body.appShell.kmConsolePage .fileMain {
    overflow: visible;
  }
}

/* ===== KM 問答畫面設計 ===== */
/* 查詢範圍列 */
body.appShell.kmConsolePage .kmScopeBar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
  font-size: 11.5px;
}
body.appShell.kmConsolePage .kmScopeBar .scopeTag { font-weight: 700; color: var(--muted); }
body.appShell.kmConsolePage .kmScopeBar .scopePill {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--ink-2);
  font-weight: 600;
}
body.appShell.kmConsolePage .kmScopeBar .scopeNote { margin-left: auto; color: var(--muted-2); }

/* 歡迎／空狀態 */
body.appShell.kmConsolePage .kmWelcome {
  max-width: 560px;
  margin: 6vh auto 0;
  padding: 22px;
  text-align: center;
  color: var(--muted);
}
body.appShell.kmConsolePage .kmWelcome .welcomeIcon {
  width: 56px; height: 56px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--bad-soft), var(--bad-soft));
}
body.appShell.kmConsolePage .kmWelcome h3 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
body.appShell.kmConsolePage .kmWelcome p { margin: 0 auto 14px; max-width: 460px; font-size: 13px; line-height: 1.6; }
body.appShell.kmConsolePage .welcomeScope {
  display: inline-block; margin-bottom: 18px; padding: 5px 12px;
  border-radius: var(--r-pill); background: var(--bg-subtle); font-size: 11.5px; color: var(--muted);
}
body.appShell.kmConsolePage .welcomeScope strong { color: var(--bad); }
body.appShell.kmConsolePage .welcomeHint { font-size: 12px; color: var(--muted-2); margin-bottom: 10px; }
body.appShell.kmConsolePage .welcomeChips { display: grid; gap: 8px; max-width: 440px; margin: 0 auto; }
body.appShell.kmConsolePage .welcomeChip {
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}
body.appShell.kmConsolePage .welcomeChip::before { content: "💡 "; }
body.appShell.kmConsolePage .welcomeChip:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(211, 6, 15, 0.08);
}
body.appShell.kmConsolePage .welcomeChip:active { transform: translateY(1px); }
body.appShell.kmConsolePage .welcomeEmpty {
  max-width: 420px; margin: 0 auto; padding: 14px 16px;
  border: 1px dashed var(--brand); border-radius: var(--r-lg);
  background: var(--bad-soft); color: var(--bad); font-size: 12.5px; line-height: 1.6;
}

/* 送出鈕 */
body.appShell.kmConsolePage .kmSendBtn { min-width: 64px; font-weight: 700; }

/* ===== KM 問答工具列下拉：整齊的標籤式欄位（取代擠成兩排的裸 select） ===== */
body.appShell.kmConsolePage .kmToolbarControls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  grid-template-columns: none; /* 蓋掉舊的 2 欄 grid */
}
body.appShell.kmConsolePage .kmField {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 6px 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
body.appShell.kmConsolePage .kmField:hover { border-color: var(--line-strong); }
body.appShell.kmConsolePage .kmField:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(211, 6, 15, 0.08);
}
body.appShell.kmConsolePage .kmFieldLabel {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted-2);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
body.appShell.kmConsolePage .kmField select {
  border: 0;
  background: transparent;
  min-height: 30px;
  padding: 0 2px;
  font-size: 12px;
  color: var(--ink);
  max-width: 130px;
  cursor: pointer;
}
body.appShell.kmConsolePage .kmField select:focus { outline: 0; }
/* 客戶群下拉 + 新增(＋)按鈕同列 */
.kmScopeRow { display: flex; align-items: center; gap: 4px; }
.kmScopeRow select { flex: 1 1 auto; min-width: 0; }   /* 下拉佔滿剩餘寬,＋鈕固定 */
.kmAddScopeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.kmAddScopeBtn:hover { background: var(--bg); color: var(--ink); }
/* 模型名稱常很長（如 cwchang/llama3-taide-lx-8b…），限寬截斷避免破版 */
body.appShell.kmConsolePage .kmFieldModel select {
  max-width: 300px;   /* 加寬以完整顯示「廠商 - 模型名」;過長者仍以 … 收尾 */
  text-overflow: ellipsis;
}
@media (max-width: 1180px) {
  body.appShell.kmConsolePage .kmField select { max-width: 112px; }
  body.appShell.kmConsolePage .kmFieldModel select { max-width: 220px; }
}

/* 狀態/批次列跟隨上方命令列一起固定 */
body.appShell.kmConsolePage .fileStickyHeader .fileStatusBar {
  position: relative;
  top: auto;
  z-index: auto;
  box-shadow: 0 2px 8px rgba(32, 32, 32, 0.04);
}

/* 狀態列左側：份數 + 全選 */
body.appShell.kmConsolePage .statusBarLeft { display: flex; align-items: center; gap: 10px; }
body.appShell.kmConsolePage #selectAllBtn { font-weight: 600; }
body.appShell.kmConsolePage #selectAllBtn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== 上傳進度面板（固定右下角） ===== */
.uploadProgress {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1100;
  width: 340px;
  max-width: calc(100vw - 36px);
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px rgba(32, 32, 32, 0.18);
}
.uploadProgress .uploadHead { position: relative; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; padding-right: 22px; }
.uploadProgress .uploadClose {
  position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; line-height: 20px;
  border: 0; background: transparent; color: var(--muted-2); font-size: 18px; cursor: pointer; border-radius: var(--r-md); padding: 0;
}
.uploadProgress .uploadClose:hover { background: var(--bg-subtle); color: var(--muted); }
.uploadProgress .uploadRow { padding: 7px 0; border-top: 1px solid var(--line); }
.uploadProgress .uploadRow:first-of-type { border-top: 0; }
.uploadProgress .uploadRowTop { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.uploadProgress .uploadName {
  font-size: 12px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uploadProgress .uploadPct { font-size: 11px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.uploadProgress .uploadTrack { height: 6px; border-radius: var(--r-pill); background: var(--bg-subtle); overflow: hidden; }
.uploadProgress .uploadFill {
  height: 100%; width: 0%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--brand));
  transition: width 0.18s ease;
}
.uploadProgress .uploadState { margin-top: 4px; font-size: 10.5px; color: var(--muted-2); }
.uploadProgress .uploadRow.done .uploadFill { background: var(--ok); }
.uploadProgress .uploadRow.done .uploadState { color: var(--ok); }
.uploadProgress .uploadRow.failed .uploadFill { background: var(--brand); }
.uploadProgress .uploadRow.failed .uploadState { color: var(--bad); }

/* ===== 勾選欄 / 排序表頭 / 新增人員欄 ===== */
body.appShell.kmConsolePage .exCheck { display: flex; align-items: center; justify-content: center; }
body.appShell.kmConsolePage .exCheck input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--bad); }
body.appShell.kmConsolePage .exUploader {
  color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.appShell.kmConsolePage .libraryTable .docHead .sortable {
  display: inline-flex; align-items: center; cursor: pointer; user-select: none; border-radius: var(--r-sm);
  transition: color 0.12s ease;
}
body.appShell.kmConsolePage .libraryTable .docHead .sortable:hover { color: var(--ink); }
body.appShell.kmConsolePage .libraryTable .docHead .sortable.sortActive { color: var(--bad); font-weight: 700; }
body.appShell.kmConsolePage .sortArrow { font-size: 9px; }

/* ===== 自製對話框（取代原生 alert / confirm / prompt） ===== */
.uiOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(32, 32, 32, 0.45);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.uiOverlay.show { opacity: 1; }
.uiDialog {
  width: min(420px, 100%);
  box-sizing: border-box;
  padding: 22px 22px 18px;
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 48px rgba(32, 32, 32, 0.24);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.16s ease;
}
.uiOverlay.show .uiDialog { transform: none; }
.uiDialogTitle {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.uiDialogBody {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}
.uiInput {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  font-size: 14px;
  color: var(--ink);
}
.uiInput:focus {
  outline: 0;
  border-color: var(--brand, var(--brand));
  box-shadow: 0 0 0 3px rgba(211, 6, 15, 0.12);
}
.uiDialogActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.uiBtn {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, filter 0.12s ease;
}
.uiBtnGhost { background: var(--panel); border-color: var(--line-strong); color: var(--ink-2); }
.uiBtnGhost:hover { background: var(--bg-subtle); border-color: var(--line-strong); }
.uiBtnPrimary { background: var(--brand, var(--brand)); color: var(--panel); }
.uiBtnPrimary:hover { background: var(--brand-deep); }
.uiBtnDanger { background: var(--brand); color: var(--panel); }
.uiBtnDanger:hover { background: var(--bad-deep); }

/* ===== 2026 報修 / 客服台精修版 ===== */
body.repairConsolePage,
body.agentConsolePage {
  /* 配色一律繼承 :root，這裡只留這兩頁自己的頁首漸層 */
  background:
    linear-gradient(180deg, var(--panel) 0, var(--bg) 210px),
    var(--bg);
}

body.repairConsolePage .topbar,
body.agentConsolePage .topbar,
body.kmConsolePage .topbar {
  min-height: 66px;
  padding: 12px 18px;
  border-bottom-color: var(--line-strong);
  box-shadow: 0 1px 0 rgba(32, 32, 32, 0.04);
}

body.repairConsolePage .topbar h1,
body.agentConsolePage .topbar h1,
body.kmConsolePage .topbar h1 {
  font-size: 20px;
  letter-spacing: 0;
}

body.repairConsolePage .topbar p,
body.agentConsolePage .topbar p,
body.kmConsolePage .topbar p {
  color: var(--muted);
  font-size: 12px;
}

body.repairConsolePage .modeSwitch,
body.agentConsolePage .modeSwitch,
body.kmConsolePage .modeSwitch {
  background: var(--bg-subtle);
  border-color: var(--line-strong);
  border-radius: var(--r-md);
}

body.repairConsolePage .modeButton,
body.agentConsolePage .modeButton,
body.kmConsolePage .modeButton {
  min-height: 30px;
  border-radius: var(--r-md);
  font-weight: 700;
}

body.repairConsolePage .modeButton.active,
body.agentConsolePage .modeButton.active,
body.kmConsolePage .modeButton.active {
  background: var(--brand);
  box-shadow: 0 1px 2px rgba(211, 6, 15, 0.18);
}

body.repairConsolePage .status,
body.agentConsolePage .status {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  font-size: 12px;
}

body.repairConsolePage .layout {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  gap: 12px;
  max-width: 1500px;
  padding: 12px;
}

body.repairConsolePage .panel,
body.agentConsolePage .panel {
  border-color: var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}

body.repairConsolePage .conversation {
  min-height: calc(100vh - 98px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  min-width: 0;
}

body.repairConsolePage .side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.sectionEyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.repairConsolePage .panelHeader,
body.agentConsolePage .panelHeader {
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

body.repairConsolePage .panelHeader h2,
body.repairConsolePage h2,
body.agentConsolePage .panelHeader h2,
body.agentConsolePage h2 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

body.repairConsolePage .controls {
  grid-template-columns: repeat(2, minmax(160px, 220px));
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

body.repairConsolePage label,
body.agentConsolePage label {
  color: var(--muted);
  font-weight: 700;
}

body.repairConsolePage input,
body.repairConsolePage select,
body.repairConsolePage textarea,
body.agentConsolePage input,
body.agentConsolePage select,
body.agentConsolePage textarea {
  border-color: var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
}

body.repairConsolePage button,
body.agentConsolePage button {
  border-radius: var(--r-md);
  font-size: 13px;
}

body.repairConsolePage .iconBtn,
body.agentConsolePage .iconBtn,
body.agentConsolePage .secondaryBtn,
body.agentConsolePage .miniBtn {
  font-weight: 700;
}

body.repairConsolePage .newSessionBtn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

body.repairConsolePage .newSessionBtn:hover {
  border-color: var(--brand);
  background: var(--bg-subtle);
  color: var(--bad);
  filter: none;
}

body.repairConsolePage .newSessionBtn span {
  font-size: 15px;
  line-height: 1;
}

body.repairConsolePage .chatLog {
  min-height: min(420px, 46vh);
  min-width: 0;
  border-color: var(--line-strong);
  background:
    linear-gradient(180deg, rgba(250, 250, 250, 0.96), rgba(250, 250, 250, 0.96)),
    var(--bg-subtle);
}

body.repairConsolePage .message {
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(32, 32, 32, 0.05);
}

body.repairConsolePage .composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 -6px 18px rgba(32, 32, 32, 0.05);
}

body.repairConsolePage .composer input {
  height: 38px;
  min-height: 38px;
  border-color: transparent;
  background: var(--bg-subtle);
}

body.repairConsolePage .composer button {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: var(--r-md);
}

body.repairConsolePage .recordState {
  min-height: 28px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  font-size: 12px;
  font-weight: 800;
}

body.repairConsolePage .voiceActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.repairConsolePage .voiceActions .iconBtn {
  width: 100%;
  min-width: 0;
}

body.repairConsolePage .inlineField,
body.repairConsolePage .logFold {
  margin-top: 10px;
}

body.repairConsolePage .meta {
  grid-template-columns: 90px minmax(0, 1fr);
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

body.repairConsolePage .fieldGrid {
  gap: 6px;
}

body.repairConsolePage .fieldRow {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

body.agentConsolePage .agentWorkspace {
  gap: 10px;
  max-width: 1500px;
  padding: 10px 12px 12px;
}

body.agentConsolePage .agentStickyBar {
  padding: 0;
}

body.agentConsolePage .agentTabs {
  min-height: 42px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

body.agentConsolePage .agentTab,
body.agentConsolePage .agentRefresh {
  min-height: 32px;
  border-radius: var(--r-md);
  font-weight: 800;
}

body.agentConsolePage .agentTab.active {
  color: var(--bad);
  background: var(--bad-soft);
}

body.agentConsolePage .agentTabPanel {
  gap: 10px;
}

body.agentConsolePage .casePane {
  padding: 10px;
}

body.agentConsolePage .listFilter {
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

body.agentConsolePage .filterBtn {
  min-height: 28px;
  border-radius: var(--r-md);
  font-weight: 800;
}

body.agentConsolePage .caseCard {
  margin: 0 0 6px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  background: var(--panel);
}

body.agentConsolePage .caseCard:hover {
  border-color: var(--line-strong);
  background: var(--bg-subtle);
}

body.agentConsolePage .caseCard.active {
  border-color: var(--brand);
  border-left-color: var(--brand);
  background: var(--bg-subtle);
}

body.agentConsolePage .caseCard.urgent {
  border-left-color: var(--brand);
}

body.agentConsolePage .cardTitle {
  color: var(--ink);
  font-weight: 800;
}

body.agentConsolePage .cardMemoLabel,
body.agentConsolePage .sourceTag,
body.agentConsolePage .statusPill,
body.agentConsolePage .tabCount {
  border-radius: var(--r-pill);
  font-weight: 800;
}

body.agentConsolePage .summaryGrid {
  grid-template-columns: 1fr;
}

body.agentConsolePage .sumField {
  border-color: var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

body.agentConsolePage .sumField--wide {
  grid-column: 1 / -1;
}

body.agentConsolePage .caseScroll {
  scrollbar-color: var(--line-strong) transparent;
}

body.agentConsolePage .vipToolbar {
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

body.agentConsolePage .vipTable {
  border-color: var(--line-strong);
}

body.agentConsolePage .vipTable th {
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

body.agentConsolePage .vipTable tr.active td {
  background: var(--bad-soft);
}

body.agentConsolePage .vipForm {
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}

body.agentConsolePage .vipFormActions {
  padding-top: 4px;
}

body.agentConsolePage .agentListActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 對話標頭的操作項目維持單行；案件編號使用省略號吸收剩餘寬度。 */
body.agentConsolePage .caseThreadPane .panelHeader > div:first-child {
  flex: none;
}

body.agentConsolePage .caseThreadPane .threadHeadRight {
  flex: 1 1 auto;
  justify-content: flex-end;
  overflow: hidden;
}

body.agentConsolePage #agentRecordState,
body.agentConsolePage #agentVoiceBtn,
body.agentConsolePage #threadOrderBtn {
  flex: none;
  white-space: nowrap;
}

body.agentConsolePage #phoneSelectedSession,
body.agentConsolePage #emailSelectedSession {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

body.agentConsolePage .listCollapseBtn {
  display: none;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-pill);
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--muted);
  box-shadow: 0 2px 8px rgba(32, 32, 32, 0.08);
}

@media (min-width: 1024px) {
  body.appShell.repairConsolePage .conversation {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.appShell.repairConsolePage .chatLog {
    min-height: 0;
  }

  body.agentConsolePage #phonePanel,
  body.agentConsolePage #emailPanel {
    grid-template-columns: var(--list-w, 310px) 6px minmax(0, 1fr);
  }

  body.agentConsolePage .listCollapseBtn {
    display: inline-grid;
  }

  body.agentConsolePage #phonePanel > .caseRight,
  body.agentConsolePage #emailPanel > .caseRight {
    display: grid;
    grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.35fr);
    gap: 10px;
    min-width: 0;
    min-height: 0;
  }

  body.agentConsolePage #phonePanel > .caseRight > .caseSummaryPane,
  body.agentConsolePage #emailPanel > .caseRight > .caseSummaryPane,
  body.agentConsolePage #phonePanel > .caseRight > .caseThreadPane,
  body.agentConsolePage #emailPanel > .caseRight > .caseThreadPane {
    min-width: 0;
    min-height: 0;
  }

  body.agentConsolePage #phonePanel > .caseRight > .caseSummaryPane,
  body.agentConsolePage #emailPanel > .caseRight > .caseSummaryPane {
    height: 100%;
    max-height: none;
  }

  body.agentConsolePage #phonePanel > .caseRight > .resizerY,
  body.agentConsolePage #emailPanel > .caseRight > .resizerY {
    display: none;
  }

  body.agentConsolePage.agentListCollapsed #phonePanel,
  body.agentConsolePage.agentListCollapsed #emailPanel {
    width: 100%;
    grid-template-columns: 28px 0 calc(100% - 28px);
  }

  body.agentConsolePage.agentListCollapsed #phonePanel > .caseRight,
  body.agentConsolePage.agentListCollapsed #emailPanel > .caseRight {
    grid-column: 3;
    justify-self: stretch;
    inline-size: 100%;
    max-inline-size: 100%;
    grid-template-columns: 310px minmax(0, 1fr);
    width: 100%;
  }

  body.agentConsolePage.agentListCollapsed #phonePanel > .caseRight > .caseThreadPane,
  body.agentConsolePage.agentListCollapsed #emailPanel > .caseRight > .caseThreadPane {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  body.agentConsolePage.agentListCollapsed .agentListPane {
    position: relative;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  body.agentConsolePage.agentListCollapsed .agentListPane .panelHeader {
    min-height: 100%;
    padding: 0;
    justify-content: flex-start;
  }

  body.agentConsolePage.agentListCollapsed .agentListPane .panelHeader > div:not(.agentListActions),
  body.agentConsolePage.agentListCollapsed .agentListPane .provider,
  body.agentConsolePage.agentListCollapsed .agentListPane .listFilter,
  body.agentConsolePage.agentListCollapsed .agentListPane .sessionList {
    display: none;
  }

  body.agentConsolePage.agentListCollapsed .agentListPane .agentListActions {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  body.agentConsolePage.agentListCollapsed .agentListPane .listCollapseBtn {
    display: inline-grid;
    position: sticky;
    top: 12px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-color: rgba(239, 49, 35, 0.28);
    background: var(--brand);
    color: var(--panel);
    box-shadow: 0 4px 12px rgba(239, 49, 35, 0.22);
  }

  body.agentConsolePage.agentListCollapsed .agentListPane .listCollapseBtn:hover {
    background: var(--brand);
  }

  body.agentConsolePage.agentListCollapsed #phonePanel > .resizerX,
  body.agentConsolePage.agentListCollapsed #emailPanel > .resizerX {
    display: none;
  }

  body.agentConsolePage #vipPanel {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

/* 緊湊桌機：清單與摘要只保留必要寬度，把主要空間留給對話內容。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.agentConsolePage #phonePanel,
  body.agentConsolePage #emailPanel {
    grid-template-columns: var(--list-w, 280px) 6px minmax(0, 1fr);
  }

  body.agentConsolePage #phonePanel > .caseRight,
  body.agentConsolePage #emailPanel > .caseRight {
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.45fr);
  }

  body.agentConsolePage .caseThreadPane .threadHeadRight {
    gap: 6px;
  }

  body.agentConsolePage #agentVoiceBtn {
    padding-inline: 8px;
  }
}

@media (max-width: 980px) {
  body.repairConsolePage .layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  body.repairConsolePage .topbar,
  body.agentConsolePage .topbar {
    align-items: stretch;
  }

  body.repairConsolePage .controls,
  body.repairConsolePage .voiceActions {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   KM Console — 響應式(RWD)
   桌機(>1180)維持原樣;以下斷點只在縮小時覆蓋。
   平板 ≤1180 檔案版面改直向流動;≤1024 縮側欄+收表格欄;
   ≤820 問答側欄改上下堆疊+工具列換行;≤600 手機精簡。
   ============================================================ */

/* 平板:檔案分頁改「導覽鋪在上、清單在下」直向流動,整個分頁可捲動 */
@media (max-width: 1180px) {
  body.appShell.kmConsolePage #filesPanel.kmTabPanel.active {
    grid-template-rows: auto; overflow-y: auto; overflow-x: hidden;
  }
  body.appShell.kmConsolePage .kmFilesPanel {
    grid-template-rows: auto auto; height: auto; overflow: visible;
  }
  body.appShell.kmConsolePage .fileWorkspace { height: auto; }
  body.appShell.kmConsolePage .fileNavRail { height: auto; }
  body.appShell.kmConsolePage .fileMain { height: auto; overflow: visible; }
  body.appShell.kmConsolePage .folderTree { max-height: 220px; overflow: auto; }
}

/* 中型:縮版心與問答側欄;表格先收掉「類型」欄(7 欄) */
@media (max-width: 1024px) {
  body.appShell.kmConsolePage .kmConsole { width: calc(100vw - 16px); }
  body.appShell.kmConsolePage #qaPanel { --km-rail-width: 176px; }

  body.appShell.kmConsolePage .libraryTable .docRow {
    grid-template-columns: 30px minmax(0, 1.4fr) minmax(86px, 0.5fr) 92px 116px 56px minmax(140px, 180px);
  }
  body.appShell.kmConsolePage .libraryTable .docHead [data-sort="type"],
  body.appShell.kmConsolePage .exType { display: none; }
}

/* 窄版/直立平板:問答側欄改上下堆疊;工具列下拉換行;表格再收「新增人員 + 大小」(5 欄) */
@media (max-width: 820px) {
  body.appShell.kmConsolePage #qaPanel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  body.appShell.kmConsolePage #qaPanel > .kmRail { grid-column: 1; grid-row: 1; max-height: 30vh; }
  body.appShell.kmConsolePage #qaPanel > .kmRailResizer { display: none; }
  body.appShell.kmConsolePage #qaPanel > .kmChatPanel { grid-column: 1; grid-row: 2; }
  body.appShell.kmConsolePage #qaPanel.railCollapsed { grid-template-rows: 0 minmax(0, 1fr); }

  body.appShell.kmConsolePage .kmChatToolbar { flex-wrap: wrap; min-height: 0; row-gap: 6px; }
  body.appShell.kmConsolePage .kmToolbarControls {
    display: flex; flex-wrap: wrap; width: 100%; gap: 6px;
  }
  body.appShell.kmConsolePage .kmToolbarControls .kmField { flex: 1 1 150px; min-width: 0; }
  body.appShell.kmConsolePage .kmToolbarControls .kmFieldModel { flex: 1 1 100%; max-width: none; }

  body.appShell.kmConsolePage .libraryTable .docRow {
    grid-template-columns: 28px minmax(0, 1.5fr) minmax(82px, 0.5fr) 108px minmax(132px, 168px);
  }
  body.appShell.kmConsolePage .libraryTable .docHead [data-sort="uploader"],
  body.appShell.kmConsolePage .exUploader,
  body.appShell.kmConsolePage .libraryTable .docHead [data-sort="size"],
  body.appShell.kmConsolePage .exSize { display: none; }
}

/* 手機:標題縮小;搜尋列整行;狀態分段可橫向捲;表格只留 勾選/名稱/狀態/操作(4 欄) */
@media (max-width: 600px) {
  body.appShell.kmConsolePage .topbar { padding: 8px 14px; min-height: 0; }
  body.appShell.kmConsolePage .topbar h1 { font-size: 16px; }
  body.appShell.kmConsolePage .topbar p { font-size: 10px; }
  body.appShell.kmConsolePage .kmConsole { height: calc(100dvh - 58px); width: calc(100vw - 12px); }

  body.appShell.kmConsolePage .fileSearch { flex: 1 1 100%; order: 5; }
  body.appShell.kmConsolePage .segFilter { max-width: 100%; overflow-x: auto; }

  body.appShell.kmConsolePage .libraryTable .docRow {
    grid-template-columns: 26px minmax(0, 1fr) minmax(70px, auto) minmax(116px, 150px);
    gap: 6px; padding: 6px 8px;
  }
  body.appShell.kmConsolePage .libraryTable .docHead [data-sort="date"],
  body.appShell.kmConsolePage .exDate { display: none; }
  body.appShell.kmConsolePage .rowBtn { padding: 3px 6px; font-size: 10.5px; }

  body.appShell.kmConsolePage .kmChatLog { padding: 12px 12px 8px; }
  body.appShell.kmConsolePage .kmAskForm { width: calc(100% - 20px); }
  body.appShell.kmConsolePage .uploadProgress { left: 12px; right: 12px; width: auto; }
}

/* 緊湊桌機：檔案管理維持左側資料夾導覽＋右側檔案清單。 */
@media (min-width: 981px) and (max-width: 1180px) {
  body.appShell.kmConsolePage #filesPanel.kmTabPanel.active {
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }

  body.appShell.kmConsolePage .kmFilesPanel {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.appShell.kmConsolePage .fileWorkspace {
    grid-template-columns: 190px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.appShell.kmConsolePage .fileNavRail {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.appShell.kmConsolePage .folderTree {
    min-height: 0;
    max-height: none;
    overflow: auto;
  }

  body.appShell.kmConsolePage .fileMain {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
/* ===== Auth / RBAC / Ticket Records ===== */
body.appShell .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
}

body.appShell .topbarActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

body.appShell .modeSwitch {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  align-items: center;
}

body.appShell .modeSwitch .modeButton {
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.authBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

body.isUser .vipEditorPane,
body.isUser #replyBox {
  opacity: 0.72;
}

body.isUser button:disabled,
body.isUser input[readonly],
body.isUser textarea[readonly] {
  cursor: not-allowed;
}

body.loginPage {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--bg-subtle);
  color: var(--ink);
  font-family: var(--font-sans);
}

.loginShell {
  width: min(420px, calc(100vw - 28px));
}

.loginPanel {
  display: grid;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(32, 32, 32, 0.12);
}

.loginPanel h1 {
  margin: 4px 0 8px;
  font-size: 24px;
}

.loginPanel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.loginForm {
  display: grid;
  gap: 14px;
}

.loginForm label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.loginForm input {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 0 12px;
  font-size: 15px;
}

.loginForm button {
  min-height: 42px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand);
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.loginError {
  padding: 10px 12px;
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--bad);
  font-size: 13px;
}

body.appShell.repairConsolePage .modeSwitch,
body.appShell.kmConsolePage .modeSwitch,
body.appShell.agentConsolePage .modeSwitch {
  min-height: 36px;
  padding: 3px;
  gap: 3px;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  border-color: var(--line-strong);
}

body.appShell.repairConsolePage .modeButton,
body.appShell.kmConsolePage .modeButton,
body.appShell.agentConsolePage .modeButton {
  min-height: 30px;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 700;
}

body.appShell.repairConsolePage .modeButton.active,
body.appShell.kmConsolePage .modeButton.active,
body.appShell.agentConsolePage .modeButton.active {
  background: var(--brand);
  color: var(--panel);
  box-shadow: 0 1px 2px rgba(211, 6, 15, 0.18);
}

body.appShell .authBadge {
  min-height: 36px;
  padding: 0 8px 0 12px;
  border-radius: var(--r-md);
  font-size: 12px;
}

/* KPI 後台 */
body.kpiConsolePage {
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg-subtle);
}

.kpiWorkspace {
  width: min(1480px, calc(100vw - 24px));
  height: calc(100vh - 90px);
  margin: 8px auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.kpiHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

/* 左側文字區要吃得下總覽堆疊條，動作列維持靠右不被壓縮 */
.kpiHeroText {
  flex: 1 1 auto;
  min-width: 0;
}

body.kpiConsolePage .kpiHero h2 {
  margin: 2px 0 4px;
  font-size: 18px;
}

body.kpiConsolePage .kpiHero p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.kpiHero > div:first-child {
  flex: 0 0 auto;
}

@media (min-width: 641px) {
  body.kpiConsolePage .kpiHero > div:first-child {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: baseline;
    column-gap: 14px;
  }

  body.kpiConsolePage .kpiHero > div:first-child .sectionEyebrow {
    grid-column: 1 / -1;
  }

  body.kpiConsolePage .kpiHero h2,
  body.kpiConsolePage #kpiUpdated {
    margin-bottom: 0;
  }
}

#kpiUpdated {
  white-space: nowrap;
}

.kpiHeroActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.kpiHeroActions .miniBtn {
  min-height: 32px;
  padding: 0 12px;
  border-color: var(--bad-line);
  color: var(--bad);
  background: var(--panel);
  font-weight: 800;
}

.kpiHeroActions .miniBtn:hover {
  background: var(--bad-soft);
  border-color: var(--brand);
}

.kpiHeroActions .heroDateFilter {
  min-height: 32px;
}

.kpiHeroActions .heroDateFilter input {
  min-width: 180px;
}

.kpiSplit {
  min-height: 0;
  display: grid;
  grid-template-columns: 270px minmax(360px, 0.9fr) minmax(420px, 1.15fr);
  gap: 10px;
  overflow: hidden;
}

.kpiMetricCards {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 3px;
  padding-bottom: 28px;
  overscroll-behavior: contain;
}

.kpiMetricGroup {
  flex: 0 0 auto;
  min-height: max-content;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  display: grid;
  grid-template-rows: auto auto;
  gap: 6px;
}

.kpiMetricGroupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.kpiMetricGroupHead strong {
  color: var(--ink);
  font-size: 12px;
}

.kpiMetricGroupHead span {
  font-size: 10px;
  color: var(--muted);
}

.kpiMetricRows {
  display: grid;
  gap: 4px;
}

.kpiMetricRow {
  min-height: 46px;
  padding: 5px 7px 7px;
  border: 1px solid transparent;
  border-left: 3px solid var(--muted-2);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  display: grid;
  grid-template-columns: minmax(52px, 1fr) auto auto;
  grid-template-areas:
    "name target value"
    "bullet bullet bullet";
  align-items: center;
  gap: 3px 6px;
  color: var(--ink-2);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}

.kpiMetricRow.pass { border-left-color: var(--ok); }
.kpiMetricRow.fail { border-left-color: var(--bad); }
.kpiMetricRow.pending { border-left-color: var(--muted-2); }

.kpiMetricRow:hover {
  border-color: var(--line-strong);
  background: var(--panel);
}

.kpiMetricName {
  grid-area: name;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 狀態圖示：紅綠在色盲下 ΔE 僅 7.2，形狀是不依賴顏色的第二條管道 */
.kpiMetricGlyph {
  flex: 0 0 auto;
  width: 12px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}

.kpiMetricRow.pass .kpiMetricGlyph { color: var(--ok); }
.kpiMetricRow.fail .kpiMetricGlyph { color: var(--bad); }

.kpiMetricValue {
  grid-area: value;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  justify-self: end;
  min-width: 0;
  white-space: nowrap;
}

/* 目標值原本被 display:none 藏起來，但 bullet 的豎線就是它，數字要露出來才對得上 */
.kpiMetricTarget {
  grid-area: target;
  justify-self: end;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

/* ===== 指標 bullet：長條＝相對目標達成度，豎線＝目標（100%）=====
   各指標單位／方向不同，換算成「離目標多遠」後才能共用一條軸（見 kpi.js 的
   attainment()）。原始數值仍直接標在列上，不靠讀軸推算。 */
.kpiBullet {
  grid-area: bullet;
  position: relative;
  height: 6px;
  margin-top: 2px;
  border-radius: 3px;
  background: var(--bg-strong);
}

.kpiBulletFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: 2px;
  /* 資料端 4px 圓角、基線端保持方角 */
  border-radius: 0 4px 4px 0;
  background: var(--muted-2);
}

.kpiMetricRow.pass .kpiBulletFill { background: var(--ok); }
.kpiMetricRow.fail .kpiBulletFill { background: var(--bad); }

/* 目標線：1px 實線、比軌道高一點，讓長條有沒有越線一眼看得出來 */
.kpiBulletTarget {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 66.67%;
  width: 1px;
  background: var(--ink);
  transform: translateX(-0.5px);
}

.kpiBullet.pending .kpiBulletTarget { background: var(--muted-2); }

/* 超出軸上限（例如回應時間遠優於目標）時的續接標記。
   畫在軌道內、用表面色像是在長條上切一道缺口，避免被列的 overflow:hidden 裁掉。 */
.kpiBulletOver {
  position: absolute;
  right: 2px;
  top: -1px;
  font-size: 11px;
  font-weight: 700;
  line-height: 8px;
  color: var(--panel);
}

/* 指標面板的軸說明：目標線是全欄共用的參考，只說明一次 */
.kpiBulletCaption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.kpiBulletCaptionTick {
  flex: 0 0 auto;
  width: 1px;
  height: 10px;
  background: var(--ink);
}

/* ===== 達標狀況總覽：單列水平堆疊條 ===== */
.kpiStatusBar {
  margin-top: 8px;
  max-width: 460px;
}

/* 2px 間隙用表面色分隔相鄰色塊，不在標記上畫邊框 */
.kpiStatusTrack {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--panel);
}

.kpiStatusSeg { min-width: 3px; }
.kpiStatusSeg.pass { background: var(--ok); }
.kpiStatusSeg.fail { background: var(--bad); }
.kpiStatusSeg.pending { background: var(--line-strong); }

.kpiStatusKeys {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.kpiStatusKey {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kpiStatusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kpiStatusKey.pass .kpiStatusDot { background: var(--ok); }
.kpiStatusKey.fail .kpiStatusDot { background: var(--bad); }
.kpiStatusKey.pending .kpiStatusDot { background: var(--line-strong); }

.kpiStatusGlyph {
  font-weight: 700;
  color: var(--muted);
}

/* 數字用文字色，顏色由色點承載 */
.kpiStatusKey strong {
  color: var(--ink);
  font-size: 12px;
}

.kpiStatusTotal { color: var(--muted-2); }

.kpiMetricStatus {
  display: none;
  justify-self: end;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  white-space: nowrap;
}

.kpiMetricRow.pass .kpiMetricStatus {
  background: var(--ok-soft);
  color: var(--ok);
}

.kpiMetricRow.fail .kpiMetricStatus {
  background: var(--bad-soft);
  color: var(--bad);
}

.kpiPanel {
  min-height: 0;
  overflow: hidden;
  padding: 12px;
}

.kpiPanel .panelHeader {
  margin-bottom: 8px;
}

body.kpiConsolePage .kpiMetricPanel .panelHeader h2,
body.kpiConsolePage .kpiPanel .panelHeader h2 {
  font-size: 15px;
  white-space: nowrap;
}

.kpiMetricPanel .sectionEyebrow,
.kpiPanel .sectionEyebrow {
  font-size: 9px;
}

.kpiMetricPanel,
.kpiCasePanel,
.kpiDetailPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.kpiMetricPanel {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 10px 12px;
  min-height: 0;
  overflow: hidden;
}

.kpiCasePanel {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.kpiDetailPanel {
  grid-template-rows: auto minmax(0, 1fr);
}

.kpiFilters {
  display: grid;
  grid-template-columns: repeat(4, auto) minmax(132px, 1fr);
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

body.kpiConsolePage .kpiFilter,
body.kpiConsolePage .kpiSelect,
body.kpiConsolePage .kpiSearch,
body.kpiConsolePage .kpiDateFilter {
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

.kpiFilter {
  padding: 0 9px;
  cursor: pointer;
  white-space: nowrap;
}

.kpiFilter.active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--panel);
}

.kpiSelect {
  min-width: 132px;
  padding: 0 7px;
}

.kpiDateFilter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-weight: 700;
  white-space: nowrap;
}

.kpiDateFilter span {
  color: var(--muted);
  font-size: 11px;
}

.kpiDateFilter input {
  min-width: 176px;
  border: 0;
  color: var(--ink-2);
  font: inherit;
  outline: none;
}

.kpiSearch {
  min-width: 0;
  grid-column: 1 / -1;
  padding: 0 8px;
  font-weight: 600;
}

.caseFilterSummary {
  min-height: 20px;
  margin-bottom: 6px;
  padding: 3px 7px;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.kpiTableWrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.kpiTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 13px;
}

.kpiTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.kpiTable td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.kpiTable tr:last-child td {
  border-bottom: 0;
}

.kpiTable tr.pass td:first-child {
  border-left: 4px solid var(--ok);
}

.kpiTable tr.fail td:first-child {
  border-left: 4px solid var(--brand);
}

.kpiTable tr.pending td:first-child {
  border-left: 4px solid var(--warn);
}

.kpiTable strong,
.kpiTable small {
  display: block;
}

.kpiTable strong {
  font-size: 13px;
}

.kpiTable small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.kpiTable.compact td:nth-child(2),
.kpiTable.compact td:nth-child(3),
.kpiTable.compact td:nth-child(4) {
  white-space: nowrap;
}

.kpiTable tr.pass .kpiBadge {
  background: var(--ok-soft);
  color: var(--ok);
}

.kpiTable tr.fail .kpiBadge {
  background: var(--bad-soft);
  color: var(--bad);
}

.kpiTable tr.pending .kpiBadge {
  background: var(--warn-soft);
  color: var(--warn);
}

.kpiRiskList {
  display: grid;
  gap: 8px;
  max-height: 100%;
  overflow: auto;
  padding-right: 2px;
}

.kpiRiskItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.kpiRiskItem strong,
.kpiRiskItem span {
  display: block;
}

.kpiRiskItem strong {
  color: var(--ink);
  font-size: 14px;
}

.kpiRiskItem span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.kpiRiskItem.fail { border-left: 4px solid var(--brand); }
.kpiRiskItem.pending { border-left: 4px solid var(--warn); }

.kpiRiskValue {
  min-width: 118px;
  text-align: right;
}

.kpiRiskValue b,
.kpiRiskValue em {
  display: block;
  font-style: normal;
}

.kpiRiskValue b {
  color: var(--ink);
  font-size: 16px;
}

.kpiRiskValue em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.kpiExampleList {
  display: grid;
  gap: 5px;
  grid-auto-rows: auto;
  max-height: 100%;
  overflow: auto;
  padding-right: 2px;
}

.kpiExampleItem {
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--panel);
  display: grid;
  grid-template-rows: auto minmax(0, 22px) minmax(0, 18px) minmax(0, 18px);
  align-content: start;
  gap: 3px;
  width: 100%;
  color: inherit;
  cursor: pointer;
  overflow: visible;
  text-align: left;
}

body.appShell .kpiExampleItem {
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  padding: 7px 8px;
  border-radius: var(--r-md);
  background: var(--panel);
  font-size: 12px;
}

.kpiExampleItem.pass { border-left-color: var(--ok); }
.kpiExampleItem.fail { border-left-color: var(--brand); }
.kpiExampleItem.pending { border-left-color: var(--warn); }

.kpiExampleItem.selected {
  border-color: var(--line-strong);
  background: var(--bg-subtle);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.kpiExampleTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.kpiExampleTop > div {
  min-width: 0;
}

.kpiExampleTop strong {
  display: block;
  margin-top: 1px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpiCaseId {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

.kpiExampleResult {
  flex: 0 0 auto;
  min-height: 19px;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
}

.kpiExampleItem.pass .kpiExampleResult {
  background: var(--ok-soft);
  color: var(--ok);
}

.kpiExampleItem.fail .kpiExampleResult {
  background: var(--bad-soft);
  color: var(--bad);
}

.kpiExampleMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}

.kpiExampleMeta span {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpiAgentRef {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  border: 1px solid var(--line-strong);
}

.kpiAgentRef.compact {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.kpiAgentRef.compact div {
  flex-wrap: nowrap;
  overflow: hidden;
}

.kpiAgentRef.compact span {
  flex: 0 1 auto;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpiAgentRef div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.kpiAgentRef span,
.kpiAgentRef a {
  min-height: 22px;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
}

.kpiAgentRef span {
  background: var(--panel);
  color: var(--muted);
}

.kpiAgentRef .kpiAgentLabel {
  background: var(--info-soft);
  color: var(--info);
}

.kpiAgentRef a {
  flex: 0 0 auto;
  background: var(--brand);
  color: var(--panel);
}

.kpiExampleText {
  margin: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 5px 8px;
  font-size: 12px;
  line-height: 1.35;
}

.kpiExampleText dt {
  color: var(--muted-2);
}

.kpiExampleText dd {
  margin: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.kpiCaseBrief {
  margin: 0;
  min-height: 0;
  padding-top: 3px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpiCaseBrief span {
  margin-right: 6px;
  color: var(--muted-2);
  font-weight: 800;
}

.kpiTurnScoreStrip {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  min-width: 0;
  max-height: 18px;
  overflow: hidden;
}

.kpiTurnScoreStrip span {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 14px;
  padding: 1px 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpiTurnScoreStrip span.ok {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}

.kpiTurnScoreStrip span.warn {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}

.kpiTurnScoreStrip span.bad {
  border-color: var(--bad-line);
  background: var(--bad-soft);
  color: var(--bad);
}

.kpiTurnScoreStrip span.more {
  border-color: var(--line-strong);
  background: var(--bg-subtle);
  color: var(--muted);
}

.kpiCaseDetail {
  min-height: 0;
  overflow: auto;
  display: block;
  padding-right: 2px;
}

.kpiDetailHead {
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--panel);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.kpiDetailHead.pass { border-left-color: var(--ok); }
.kpiDetailHead.fail { border-left-color: var(--brand); }
.kpiDetailHead.pending { border-left-color: var(--warn); }

.kpiDetailHead h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.kpiDetailBlock {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  display: grid;
  gap: 8px;
}

.kpiDetailBlock h3 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.kpiDetailBlock p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.kpiDialogue {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kpiDialogue .bubble {
  max-width: min(82%, 620px);
}

.kpiDialogue .bubbleWho {
  font-size: 13px;
}

.kpiDialogue .bubbleMeta {
  font-size: 10px;
}

.kpiDialogue .bubbleBody {
  font-size: 12px;
  line-height: 1.55;
}

.kpiDialogue .bubble.in {
  align-self: flex-start;
}

.kpiDialogue .bubble.bot {
  align-self: flex-end;
}

.kpiSpeakBtn {
  margin-top: 7px;
}

.kpiAudioMissing {
  display: inline-block;
  margin-top: 7px;
  color: var(--muted-2);
  font-size: 11px;
}

.kpiDialogue .bubble.bot .kpiAudioMissing {
  margin-left: auto;
}

/* 播放鍵移到「客戶／遠傳AI客服」標籤旁邊，並縮小；覆蓋原本置底/靠右的排版。 */
.kpiDialogue .bubbleHead {
  align-items: center;
}
.kpiDialogue .bubble .bubbleHead .kpiSpeakBtnInline {
  width: 20px;
  height: 20px;
  font-size: 9px;
  margin: 0;
  padding: 0 0 0 1px;
}
.kpiDialogue .bubble .bubbleHead .kpiAudioMissingInline {
  margin: 0;
  font-size: 10px;
}

.kpiTurnCheck {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(138, 138, 138, 0.35);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
}

.kpiTurnCheck.intent {
  border-top-style: dashed;
  background: rgba(250, 250, 250, 0.68);
  border-radius: var(--r-md);
  padding: 7px;
}

.kpiTurnCheck span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.kpiTurnCheck p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kpiTurnCheck b {
  color: var(--ink);
  font-size: 11px;
  white-space: nowrap;
}

.kpiTurnStatus {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.kpiTurnStatus span {
  min-height: 20px;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.kpiTurnStatus span.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.kpiTurnStatus span.pending {
  background: var(--warn-soft);
  color: var(--warn);
}

.kpiMetricGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  max-height: 100%;
  overflow: auto;
  padding-right: 2px;
}

.kpiMetricCard {
  min-height: 162px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  display: grid;
  gap: 7px;
  align-content: start;
}

.kpiMetricCard.pass { border-top: 4px solid var(--ok); }
.kpiMetricCard.fail { border-top: 4px solid var(--brand); }
.kpiMetricCard.pending { border-top: 4px solid var(--warn); }

.kpiMetricTop,
.kpiValueRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kpiCategory,
.kpiBadge {
  min-height: 22px;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  font-size: 11px;
  line-height: 16px;
}

.kpiCategory {
  background: var(--bg-subtle);
  color: var(--info);
}

.kpiBadge {
  background: var(--bg-subtle);
  color: var(--ink-2);
}

.kpiMetricCard.pass .kpiBadge {
  background: var(--ok-soft);
  color: var(--ok);
}

.kpiMetricCard.fail .kpiBadge {
  background: var(--bad-soft);
  color: var(--bad);
}

.kpiMetricCard.pending .kpiBadge {
  background: var(--warn-soft);
  color: var(--warn);
}

.kpiMetricCard h3 {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}

.kpiValueRow strong {
  font-size: 21px;
  line-height: 1;
  color: var(--ink);
}

.kpiValueRow span {
  color: var(--muted);
  font-size: 12px;
}

.kpiMetricCard dl {
  margin: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px 8px;
  font-size: 12px;
}

.kpiMetricCard dt {
  color: var(--muted-2);
}

.kpiMetricCard dd {
  margin: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.kpiMetricCard p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* 緊湊桌機：維持三欄，但避免欄位最低寬度總和超出可視區。 */
@media (min-width: 981px) and (max-width: 1279px) {
  .kpiSplit {
    grid-template-columns: 230px minmax(300px, 0.8fr) minmax(0, 1.2fr);
  }

  .kpiMetricPanel,
  .kpiPanel {
    padding-inline: 10px;
  }

  .kpiFilters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kpiFilter {
    min-width: 0;
    padding-inline: 6px;
  }

  .kpiSelect,
  .kpiSearch {
    width: 100%;
    grid-column: 1 / -1;
  }

  .kpiDialogue .bubble {
    max-width: 94%;
  }
}

@media (max-width: 980px) {
  body.kpiConsolePage {
    overflow: auto;
  }

  .kpiWorkspace {
    height: auto;
    overflow: visible;
  }

  .kpiSplit {
    grid-template-columns: 1fr;
  }

  .kpiMetricCards {
    max-height: none;
    overflow: visible;
  }

  .kpiFilters {
    grid-template-columns: repeat(4, auto) minmax(132px, 1fr);
    overflow-x: auto;
  }

  .kpiSelect,
  .kpiSearch {
    grid-column: 1 / -1;
  }

  .kpiRiskList,
  .kpiExampleList,
  .kpiMetricGrid {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .kpiWorkspace {
    width: min(100vw - 20px, 1320px);
  }

  .kpiHero,
  .kpiRiskItem {
    align-items: flex-start;
    flex-direction: column;
  }

  .kpiHeroActions {
    width: 100%;
    justify-content: flex-start;
  }

  .kpiHeroActions .heroDateFilter {
    width: 100%;
  }

  .kpiHeroActions .heroDateFilter input {
    min-width: 0;
    width: 100%;
  }

  .kpiFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpiFilter,
  .kpiSelect,
  .kpiSearch,
  .kpiDateFilter {
    width: 100%;
  }

  .kpiSelect,
  .kpiSearch {
    grid-column: span 2;
  }

  .kpiRiskValue {
    min-width: 0;
    text-align: left;
  }
}

/* ── KPI 語音參數調整面板 ─────────────────────────────────────────── */
.kpiVoiceSettings {
  margin-top: 16px;
}
.kpiVoiceSettings > summary {
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.kpiVoiceSettings > summary::-webkit-details-marker { display: none; }
.kpiVoiceSettings > summary::before {
  content: "▸";
  transition: transform 0.15s ease;
  color: var(--muted-2);
}
.kpiVoiceSettings[open] > summary::before { transform: rotate(90deg); }
.voiceSettingsIntro {
  margin: 10px 0 4px;
  font-size: 12.5px;
  color: var(--muted);
}
.voiceSettingsBody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 12px 0;
}
.voiceSettingsGroup {
  border: 1px solid rgba(138, 138, 138, 0.35);
  border-radius: var(--r-lg);
  padding: 10px 14px 14px;
  margin: 0;
}
.voiceSettingsGroup legend {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  padding: 0 6px;
}
.voiceSettingRow {
  display: grid;
  grid-template-columns: 1fr 88px auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.voiceSettingLabel { font-size: 12.5px; color: var(--ink-2); }
.voiceSettingLabel em { color: var(--muted-2); font-style: normal; }
.voiceSettingInput {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(138, 138, 138, 0.6);
  border-radius: var(--r-md);
  font-size: 13px;
  text-align: right;
}
.voiceSettingRange { font-size: 10.5px; color: var(--muted-2); white-space: nowrap; }
.voiceSettingHint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted-2);
  line-height: 1.4;
}
.voiceSettingsActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.miniBtn.primary {
  background: var(--accent);
  color: var(--panel);
  border-color: var(--accent);
}
.voiceSettingsStatus { font-size: 12.5px; color: var(--accent); }
.voiceSettingsStatus.bad { color: var(--bad); }

@media (prefers-color-scheme: dark) {
  .voiceSettingLabel { color: #cbd5e1; }
  .voiceSettingInput { background: #1e293b; color: #e2e8f0; border-color: rgba(148,163,184,0.4); }
  .voiceSettingsIntro, .voiceSettingHint, .voiceSettingRange { color: #94a3b8; }
}

/* ── 語音參數調整：彈出小視窗（dialog）─────────────────────────────── */
.voiceSettingsDialog {
  width: min(620px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 22px 22px;
  border: none;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(32, 32, 32, 0.35);
  color: var(--ink);
  background: var(--panel);
}
.voiceSettingsDialog::backdrop {
  background: rgba(32, 32, 32, 0.45);
  backdrop-filter: blur(2px);
}
.voiceDialogHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.voiceDialogHead h3 { margin: 2px 0 0; font-size: 17px; }
.voiceDialogClose {
  border: 1px solid rgba(138, 138, 138, 0.5);
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  flex: none;
}
.voiceDialogClose:hover { background: var(--bg); }
.voiceSettingsDialog .voiceSettingsActions {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  padding-top: 12px;
  margin-top: 4px;
}

@media (prefers-color-scheme: dark) {
  .voiceSettingsDialog { background: #0f172a; color: #e2e8f0; }
  .voiceSettingsDialog .voiceSettingsActions { background: #0f172a; }
  .voiceDialogClose { background: #1e293b; color: #cbd5e1; border-color: rgba(148,163,184,0.4); }
}