/* ═══════════════════════════════════════════════════
   OSIP Design System  — v2
   Dark theme · Role-aware layout
   ═══════════════════════════════════════════════════ */

:root {
  /* Surface — light theme */
  --bg:          #ffffff;
  --bg-2:        #ffffff;
  --bg-3:        #f6f8fa;
  --bg-4:        #eaeef2;
  --bg-5:        #e6ebf0;

  /* Border */
  --border:      #d0d7de;
  --border-2:    #afb8c1;

  /* Text */
  --tx-1:        #1f2328;
  --tx-2:        #59636e;
  --tx-3:        #818b98;

  /* Accent */
  --blue:        #0969da;
  --blue-dim:    rgba(9,105,218,.12);
  --blue-h:      #0860ca;

  /* Status colours */
  --s-open:      #1a7f37;   /* OPEN         */
  --s-prog:      #0969da;   /* IN PROGRESS  */
  --s-test:      #9a6700;   /* TESTING      */
  --s-resolve:   #8250df;   /* RESOLVED     */
  --s-reopen:    #bc4c00;   /* REOPENED     */
  --s-closed:    #59636e;   /* CLOSED       */
  --s-reject:    #cf222e;   /* REJECTED     */

  /* Priority colours */
  --p-urgent:    #cf222e;
  --p-high:      #bc4c00;
  --p-medium:    #9a6700;
  --p-low:       #6e7781;

  /* SLA colours */
  --sla-ok:      #1a7f37;
  --sla-warn:    #9a6700;
  --sla-breach:  #cf222e;
  --sla-done:    #818b98;

  /* Responsible party tag */
  --party-mom:   #8250df;
  --party-val:   #0969da;
  --party-im:    #1a7f37;
  --party-jnn:   #bc4c00;
  --party-desay: #1f9aa8;

  /* OBF 问题定性 */
  --obf-yes:     #cf222e;   /* 是 OBF 问题     */
  --obf-no:      #1a7f37;   /* 非 OBF 问题     */
  --obf-collect: #9a6700;   /* 收集信息中...   */

  /* Agent 品牌渐变 */
  --agent-grad:  linear-gradient(135deg,#8250df,#0969da);

  /* Misc */
  --radius:      6px;
  --radius-lg:   10px;
  --radius-full: 9999px;
  --shadow:      0 4px 16px rgba(31,35,40,.12);

  --sidebar-w:   216px;
  --topbar-h:    52px;
  --font-mono:   'JetBrains Mono','Fira Code',monospace;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--tx-1);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-h); text-decoration: underline; }
button { font-family: inherit; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ══════════════════════════════════════════════════
   SHELL
   ══════════════════════════════════════════════════ */
.shell { display: flex; height: 100vh; overflow: hidden; }

/* ── Topbar ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--bg-2);
  display: flex; align-items: center;
  padding: 0 16px; gap: 10px;
  border-bottom: 1px solid var(--border);
  z-index: 200;
}

.topbar-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px;
  color: var(--tx-1); text-decoration: none;
  flex-shrink: 0;
}
.topbar-logo:hover { text-decoration: none; color: var(--tx-1); }

.logo-mark {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #2f81f7 0%, #a371f7 100%);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
}

/* Role badge in topbar */
.role-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
  border: 1px solid;
  flex-shrink: 0;
}
.role-badge.momenta  { background: rgba(130,80,223,.10); color: var(--party-mom); border-color: rgba(130,80,223,.25); }
.role-badge.valeo    { background: rgba(9,105,218,.10);  color: var(--party-val); border-color: rgba(9,105,218,.25); }
.role-badge.im       { background: rgba(26,127,55,.10);  color: var(--party-im);  border-color: rgba(26,127,55,.25); }
.role-badge.jnn      { background: rgba(188,76,0,.10);   color: var(--party-jnn); border-color: rgba(188,76,0,.25); }
.role-badge.desay    { background: rgba(31,154,168,.10); color: var(--party-desay); border-color: rgba(31,154,168,.25); }

.topbar-spacer { flex: 1; }

.topbar-right { display: flex; align-items: center; gap: 6px; }

/* Notification button */
.notif-btn {
  position: relative; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); background: transparent; border: none;
  color: var(--tx-2); cursor: pointer; transition: background .12s;
}
.notif-btn:hover { background: var(--bg-3); }
.notif-dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px;
  background: var(--p-urgent); border-radius: 50%;
  border: 2px solid var(--bg-2);
}

/* Avatar */
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  cursor: pointer; flex-shrink: 0; user-select: none; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--bg-2); border-right: 1px solid var(--border);
  margin-top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 14px 8px;
  display: flex; flex-direction: column; gap: 2px;
}

.sb-section {
  font-size: 11px; font-weight: 600;
  color: var(--tx-3); text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 8px 4px;
}

.sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius);
  color: var(--tx-2); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .1s, color .1s;
  text-decoration: none; white-space: nowrap;
}
.sb-item:hover         { background: var(--bg-3); color: var(--tx-1); text-decoration: none; }
.sb-item.active        { background: var(--blue-dim); color: var(--blue); }
.sb-item.active:hover  { background: rgba(9,105,218,.18); }
.sb-item svg           { flex-shrink: 0; opacity: .75; }

.sb-count {
  margin-left: auto; background: var(--bg-4);
  font-size: 11px; font-weight: 600; color: var(--tx-3);
  padding: 1px 7px; border-radius: var(--radius-full);
}
.sb-item.active .sb-count { background: rgba(9,105,218,.18); color: var(--blue); }

.sb-divider { height: 1px; background: var(--border); margin: 6px 4px; }

/* 黑底白字自定义提示框（跟随鼠标，代替浏览器原生 title 的白底黑字提示） */
.cat-tip {
  position: fixed; display: none; z-index: 999;
  background: #1a1a1a; color: #fff; font-size: 12px; font-weight: 500;
  padding: 5px 9px; border-radius: 6px; line-height: 1.4;
  max-width: 320px; pointer-events: none; box-shadow: var(--shadow);
}

/* ── Main content ── */
.main {
  flex: 1; min-width: 0;
  margin-top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  background: var(--bg);
}

.main-inner { padding: 24px; }

/* 问题详情：冻结头（面包屑 + 导航行随滚动固定在顶部） */
.issue-sticky-head {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  padding: 16px 24px 12px;
}
.issue-sticky-head .breadcrumb { margin-bottom: 12px; }
@media (max-width: 600px) { .issue-sticky-head { padding: 12px 14px 10px; } }

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
  text-decoration: none; white-space: nowrap;
}
.btn-primary  { background: var(--blue);  color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-h); border-color: var(--blue-h); color: #fff; text-decoration: none; }
.btn-ghost    { background: transparent; color: var(--tx-2); border-color: transparent; }
.btn-ghost:hover  { background: var(--bg-3); color: var(--tx-1); text-decoration: none; }
.btn-ghost.cf-active { color: var(--blue); background: var(--blue-dim); border-color: var(--blue); }
.btn-ghost.cf-active:hover { background: var(--blue-dim); color: var(--blue); }
.btn-outline  { background: transparent; color: var(--tx-2); border-color: var(--border); }
.btn-outline:hover { background: var(--bg-3); color: var(--tx-1); border-color: var(--border-2); text-decoration: none; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-icon { padding: 5px; width: 30px; height: 30px; justify-content: center; }
.btn-spin {
  width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite; flex-shrink: 0;
}

/* ── 附件上传进度（列表项内，见 index.html 创建工单弹窗）── */
.cpf-progress { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cpf-bar { width: 48px; height: 4px; border-radius: 2px; background: var(--bg-4); overflow: hidden; }
.cpf-bar-fill { display: block; height: 100%; background: var(--blue); transition: width .15s; }
.cpf-pct { font-size: 11px; color: var(--tx-3); width: 30px; text-align: right; }

/* Create button */
.btn-create {
  display: flex; align-items: center; gap: 6px;
  background: var(--blue); color: #fff; border: none;
  border-radius: var(--radius); padding: 6px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s; text-decoration: none;
}
.btn-create:hover { background: var(--blue-h); color: #fff; text-decoration: none; }

/* ══════════════════════════════════════════════════
   STATUS / PRIORITY / SLA / PARTY BADGES
   ══════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  white-space: nowrap;
}

/* OBF 懒加载附件（只存直链引用不落盘）来源标签 */
.b-obf      { background: rgba(9,105,218,.10);   color: var(--s-prog);    border: 1px solid rgba(9,105,218,.25); }

/* Status */
.s-open     { background: rgba(26,127,55,.10);   color: var(--s-open);    border: 1px solid rgba(26,127,55,.25); }
.s-prog     { background: rgba(9,105,218,.10);   color: var(--s-prog);    border: 1px solid rgba(9,105,218,.25); }
.s-test     { background: rgba(154,103,0,.10);   color: var(--s-test);    border: 1px solid rgba(154,103,0,.25); }
.s-resolve  { background: rgba(130,80,223,.10);  color: var(--s-resolve); border: 1px solid rgba(130,80,223,.25); }
.s-reopen   { background: rgba(188,76,0,.10);    color: var(--s-reopen);  border: 1px solid rgba(188,76,0,.25); }
.s-closed   { background: rgba(89,99,110,.10);   color: var(--s-closed);  border: 1px solid rgba(89,99,110,.25); }
.s-reject   { background: rgba(207,34,46,.10);   color: var(--s-reject);  border: 1px solid rgba(207,34,46,.25); }

/* Priority */
.p-urgent { color: var(--p-urgent); }
.p-high   { color: var(--p-high); }
.p-medium { color: var(--p-medium); }
.p-low    { color: var(--p-low); }

.prio-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.prio-dot.urgent { background: var(--p-urgent); }
.prio-dot.high   { background: var(--p-high); }
.prio-dot.medium { background: var(--p-medium); }
.prio-dot.low    { background: var(--p-low); }

/* 模块标签 */
.module-tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--bg-4); color: var(--tx-2); border: 1px solid var(--border);
}

/* 类型标签（售后/研发）*/
.type-tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.type-tag.t-after   { background: rgba(188,76,0,.10);  color: var(--s-reopen);  border: 1px solid rgba(188,76,0,.25); }
.type-tag.t-dev     { background: rgba(9,105,218,.10); color: var(--s-prog);    border: 1px solid rgba(9,105,218,.25); }
.type-tag.t-unset   { background: var(--bg-4); color: var(--tx-2); border: 1px solid var(--border); }

/* Responsible party */
.party-tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; border: 1px solid;
}
.party-mom { background: rgba(130,80,223,.10); color: var(--party-mom); border-color: rgba(130,80,223,.25); }
.party-val { background: rgba(9,105,218,.10);  color: var(--party-val); border-color: rgba(9,105,218,.25); }
.party-im  { background: rgba(26,127,55,.10);  color: var(--party-im);  border-color: rgba(26,127,55,.25); }
.party-unset { background: var(--bg-4); color: var(--tx-2); border-color: var(--border); }
.party-jnn { background: rgba(188,76,0,.10);   color: var(--party-jnn); border-color: rgba(188,76,0,.25); }
.party-desay { background: rgba(31,154,168,.10); color: var(--party-desay); border-color: rgba(31,154,168,.25); }

/* ══════════════════════════════════════════════════
   ISSUE LIST PAGE
   ══════════════════════════════════════════════════ */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.page-title { font-size: 18px; font-weight: 700; }
.page-sub   { font-size: 13px; color: var(--tx-3); margin-top: 2px; }

/* Search + filter bar */
.search-filter-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}

.search-wrap {
  position: relative; flex: 1; min-width: 200px; max-width: 400px;
}
.search-wrap svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--tx-3);
}
.search-input {
  width: 100%; padding: 7px 12px 7px 34px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--tx-1); font-size: 13px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.search-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.search-input::placeholder { color: var(--tx-3); }

.filter-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  font-size: 13px; color: var(--tx-2);
  transition: border-color .12s, color .12s;
  user-select: none; position: relative;
}
.filter-chip:hover { border-color: var(--border-2); color: var(--tx-1); }
.filter-chip.active { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
.filter-chip select {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}

/* 多选筛选下拉面板（勾选 + 可搜索）*/
.filter-chip .ms-count {
  font-size: 11px; font-weight: 700; background: var(--blue); color: #fff;
  border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center;
}
.ms-pop {
  display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 60;
  width: 220px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  cursor: default;
}
.filter-chip.open .ms-pop { display: block; }
.ms-search { padding: 8px; border-bottom: 1px solid var(--border); }
.ms-search input {
  width: 100%; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--bg-3); color: var(--tx-1); outline: none;
}
.ms-search input:focus { border-color: var(--blue); }
/* 选项列表：最多显示约 5 项，超出滚动（span 需显式 block，否则 max-height 不生效）*/
.ms-list { display: block; max-height: 170px; overflow-y: auto; padding: 4px; }
.ms-opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  font-size: 13px; color: var(--tx-1); cursor: pointer; border-radius: 5px;
  min-height: 30px; box-sizing: border-box;
}
.ms-opt:hover { background: var(--bg-4); }
.ms-opt input { accent-color: var(--blue); width: 14px; height: 14px; flex-shrink: 0; }
.ms-empty { padding: 12px; text-align: center; font-size: 12px; color: var(--tx-3); }
.ms-group-label {
  padding: 6px 10px 2px 16px; font-size: 11px; font-weight: 600; color: var(--tx-3);
  letter-spacing: .02em;
}
.ms-group-label:first-child { padding-top: 2px; }
.ms-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-top: 1px solid var(--border); font-size: 12px;
}
.ms-foot a { color: var(--tx-3); cursor: pointer; }
.ms-foot a:hover { color: var(--blue); text-decoration: none; }

/* chip 上已选值预览（不点开即可见）*/
.filter-chip .ms-trigger { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ms-selchip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--blue); color: #fff; border-radius: 4px;
  padding: 1px 5px; font-size: 11px; max-width: 120px;
}
.ms-selchip .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-selchip .x { cursor: pointer; display: inline-flex; opacity: .8; }
.ms-selchip .x:hover { opacity: 1; }
.filter-chip.active { flex-wrap: wrap; }

/* "排序"按钮：#chipSort 只借 .filter-chip 的展开/收起面板机制，视觉完全交给内部真实
   <button class="btn btn-ghost btn-sm">（与清除筛选按钮同款），故清空 chip 默认视觉 */
#chipSort { padding: 0; border: none; background: none; cursor: default; }
#chipSort:hover { border-color: transparent; color: inherit; }
#chipSort .ms-pop { left: auto; right: 0; width: 200px; }

/* Result count row */
.result-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; font-size: 13px; color: var(--tx-3);
}

/* 分页栏 */
.pager {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13px; color: var(--tx-2);
}
.pager-info { color: var(--tx-3); }
.pager-size { display: flex; align-items: center; gap: 6px; }
.pager-size select {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--tx-1); font-size: 13px; padding: 4px 8px; cursor: pointer; outline: none;
}
.pager-size select:hover { border-color: var(--border-2); }
.pager-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pager-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--tx-2); font-size: 13px; cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.pager-btn:hover:not(:disabled) { border-color: var(--border-2); color: var(--tx-1); }
.pager-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.pager-ellipsis { color: var(--tx-3); padding: 0 4px; }

/* ── Table ── */
.table-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* 横向滚动交给吸底镜像条 .table-hscroll 一处操作即可，这里隐藏 .table-scroll 自身的原生滚动条，
   避免和镜像条同时出现两条重复的横向滚动条（overflow-x:auto 仍保留，滚轮/触屏横滑不受影响）。*/
.table-scroll {
  overflow-x: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 旧版 Edge/IE */
}
.table-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari/新版 Edge */

/* 常驻底部的横向滚动镜像条：随 .main 纵向滚动吸底，避免大表格需要滚到最底才能找到横向滚动条。
   仅当表格实际超宽（JS 判定 scrollWidth > clientWidth）才 .show 出来。必须是 .table-card 的
   兄弟节点而非子节点——sticky 的"最近滚动祖先"是任意 overflow!=visible 的祖先，.table-card 的
   overflow:hidden 会抢先被当成祖先，而它本身高度贴合内容、没有多余滚动空间，导致吸底失效。*/
.table-hscroll {
  display: none;
  position: sticky; bottom: 0; z-index: 3;
  overflow-x: auto; overflow-y: hidden;
  height: 16px;
  margin-top: -1px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.table-hscroll:hover { scrollbar-color: var(--tx-1) transparent; }
.table-hscroll.show { display: block; }

.table-hscroll::-webkit-scrollbar { height: 10px; }
.table-hscroll::-webkit-scrollbar-track { background: transparent; }
.table-hscroll::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 99px;
}
.table-hscroll::-webkit-scrollbar-thumb:hover { background: var(--tx-1); }
.table-hscroll-inner { height: 1px; }

table { width: 100%; min-width: max-content; border-collapse: collapse; }

thead tr { background: var(--bg-3); }
thead th {
  padding: 10px 14px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--tx-3);
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; user-select: none;
  position: relative;
}
thead th .th-inner {
  display: flex; align-items: center; gap: 4px;
}
thead th .th-label { flex: 1; }
thead th .th-more {
  display: none; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 3px;
  cursor: pointer; flex-shrink: 0;
  color: var(--tx-3); transition: background .1s, color .1s;
}
thead th:hover .th-more,
thead th.th-menu-open .th-more { display: flex; }
thead th .th-more:hover,
thead th.th-menu-open .th-more { background: var(--bg-4); color: var(--tx-1); }
thead th.sortable { cursor: pointer; }
thead th.sortable:hover .th-label { color: var(--tx-2); }
thead th.sort-asc .th-label::after  { content: ' ↑'; }
thead th.sort-desc .th-label::after { content: ' ↓'; }

thead th.th-frozen .th-label { color: var(--blue); }
thead th.th-frozen { background: rgba(9,105,218,.06); }

thead th.th-filtered .th-label { color: var(--blue); }
thead th.th-filtered { background: rgba(9,105,218,.06); }

/* Column header dropdown menu */
.th-dropdown {
  position: fixed; z-index: 9999;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 4px; min-width: 168px;
  font-size: 13px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--tx-1);
}
.th-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 4px;
  cursor: pointer; white-space: nowrap;
  transition: background .08s;
}
.th-dropdown-item:hover { background: var(--bg-3); }
.th-dropdown-item.active { color: var(--blue); }
.th-dropdown-item.danger { color: var(--s-reject); }
.th-dropdown-item.danger:hover { background: rgba(207,34,46,.08); }
.th-dropdown-item.disabled { opacity: .4; pointer-events: none; }
.th-dropdown-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Insert-column sub-panel (appears inside .th-dropdown) */
.th-insert-panel {
  padding: 6px 8px 4px;
}
.th-insert-panel .th-insert-title {
  font-size: 11px; color: var(--tx-3); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.th-insert-list {
  max-height: 180px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.th-insert-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 4px; cursor: pointer;
  font-size: 13px; color: var(--tx-1); transition: background .08s;
}
.th-insert-opt:hover { background: var(--bg-3); }
.th-insert-empty { padding: 8px; color: var(--tx-3); font-size: 13px; text-align: center; }

tbody tr {
  transition: background .08s; cursor: pointer;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-3); }

tbody td {
  padding: 10px 14px; font-size: 13px;
  color: var(--tx-1); vertical-align: middle;
}

.td-id {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--tx-2); white-space: nowrap;
}
.td-id:hover { color: var(--blue); }

.td-title { max-width: 320px; }
.td-title-text {
  font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
tr:hover .td-title-text { color: var(--blue); }
.ai-sum-tag { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; line-height: 1.3; }
.ai-sum-conf { color: var(--tx-3); }

.td-prio { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Checkbox column */
.cb-col { width: 40px; }
input[type="checkbox"] { accent-color: var(--blue); width: 14px; height: 14px; cursor: pointer; }

/* Bulk bar */
.bulk-bar {
  display: none; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--blue-dim);
  border-bottom: 1px solid rgba(9,105,218,.2);
  font-size: 13px; color: var(--tx-2);
}
.bulk-bar.show { display: flex; }

/* Empty state */
.empty {
  padding: 64px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--tx-3);
}
.empty-icon { font-size: 36px; opacity: .35; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--tx-2); }
.empty-sub   { font-size: 13px; text-align: center; max-width: 300px; }

/* ══════════════════════════════════════════════════
   ISSUE DETAIL PAGE
   ══════════════════════════════════════════════════ */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 272px;
  gap: 20px; align-items: flex-start;
}
@media (max-width: 960px) { .detail-grid { grid-template-columns: 1fr; } }

.breadcrumb {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--tx-3); margin-bottom: 14px;
}
.breadcrumb a { color: var(--tx-3); }
.breadcrumb a:hover { color: var(--tx-1); text-decoration: none; }
.breadcrumb-sep { opacity: .4; }

.issue-title { font-size: 22px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.issue-meta  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--tx-3); font-size: 13px; margin-bottom: 20px; }
.issue-meta-sep { color: var(--border); }

/* Tabs */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab {
  padding: 9px 16px; font-size: 13px; font-weight: 500;
  color: var(--tx-3); cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
  user-select: none;
}
.tab:hover { color: var(--tx-1); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* Description */
.desc-body {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  font-size: 13px; color: var(--tx-2); line-height: 1.75;
  margin-bottom: 20px;
}
.desc-body p { margin-bottom: 10px; }
.desc-body p:last-child { margin-bottom: 0; }
.desc-body code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-5); padding: 1px 5px; border-radius: 3px; color: var(--blue);
}
.desc-body pre {
  background: var(--bg-5); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin: 8px 0;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--tx-2); overflow-x: auto; line-height: 1.6;
}

/* Attachments */
.attach-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.attach-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: var(--bg-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color .12s; font-size: 12px; color: var(--tx-2);
}
.attach-item:hover { border-color: var(--border-2); color: var(--tx-1); }
.attach-icon {
  width: 26px; height: 26px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}

/* Comments */
.comment { display: flex; gap: 10px; margin-bottom: 16px; }
.comment-box {
  flex: 1; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.comment-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.comment-author { font-size: 13px; font-weight: 600; }
.comment-time   { font-size: 12px; color: var(--tx-3); }
.comment-body   { padding: 12px; font-size: 13px; color: var(--tx-2); line-height: 1.65; white-space: pre-wrap; }

.editor-wrap {
  display: flex; gap: 10px; margin-top: 8px;
}
.editor-inner {
  flex: 1; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .15s;
}
.editor-inner:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }
.mention-dropdown {
  position: absolute; left: 12px; top: calc(100% + 2px); z-index: 30;
  min-width: 220px; max-width: 320px; max-height: 220px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.mention-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  cursor: pointer; font-size: 13px; color: var(--tx-2);
}
.mention-item:hover, .mention-item.active { background: var(--bg-3); }
.mention-item .mention-avatar {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#2f81f7,#4493f8); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; overflow: hidden;
}
.mention-item .mention-org { margin-left: auto; font-size: 11px; color: var(--tx-3); }
.editor-toolbar {
  display: flex; align-items: center; gap: 2px; padding: 5px 10px;
}
.editor-toolbar button {
  padding: 3px 6px; background: transparent; border: none;
  color: var(--tx-3); cursor: pointer; border-radius: 4px;
  font-size: 12px; font-weight: 700; transition: background .1s; font-family: inherit;
}
.editor-toolbar button:hover { background: var(--bg-5); color: var(--tx-1); }
.editor-area {
  width: 100%; min-height: 90px; max-height: 240px; overflow-y: auto;
  padding: 10px 12px;
  background: transparent; border: none; outline: none;
  color: var(--tx-1); font-size: 13px;
  font-family: inherit; line-height: 1.6;
  overflow-wrap: break-word; white-space: pre-wrap;
}
.editor-area:empty::before {
  content: attr(data-placeholder); color: var(--tx-3); pointer-events: none;
}
.mention-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px 1px 3px; border-radius: var(--radius-full);
  background: var(--blue-dim); color: var(--blue);
  font-size: inherit; line-height: inherit; white-space: nowrap;
}
.mention-chip-avatar {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#2f81f7,#4493f8); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; overflow: hidden;
}
.mention-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.editor-footer {
  padding: 7px 12px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 6px;
}

/* Properties panel */
.props {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  position: sticky; top: calc(var(--topbar-h) + 20px);
}
.props-section {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.props-section:last-child { border-bottom: none; }
.props-title {
  font-size: 11px; font-weight: 600; color: var(--tx-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
}
/* 属性行：统一固定行高 + 垂直居中，所有控件对齐到同一基准 */
.prop-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  min-height: 32px; margin: 0;                 /* 行距用 min-height 统一，不再用 margin */
  padding: 2px 0;
}
.prop-label { font-size: 12px; color: var(--tx-3); flex-shrink: 0; }
.prop-val   { font-size: 13px; text-align: right; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; min-height: 24px; }
.prop-val.click { cursor: pointer; transition: color .1s; }
.prop-val.click:hover { color: var(--blue); }

/* 属性卡内联可编辑控件 */
.prop-select {
  font-size: 13px; color: var(--tx-1); font-family: inherit;
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: 2px 4px; cursor: pointer; text-align: center; text-align-last: center;
  max-width: 150px; transition: border-color .12s, background .12s;
}
.prop-select:hover  { border-color: var(--border); background: var(--bg-3); }
.prop-select:focus  { border-color: var(--blue); background: var(--bg-2); outline: none; }

/* 可搜索下拉（基本信息字段用）*/
.combo { position: relative; display: inline-block; }
.combo-trigger {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 13px; color: var(--tx-1);
  border: 1px solid transparent; border-radius: 5px; padding: 2px 6px;
  transition: border-color .12s, background .12s; max-width: 160px;
}
.combo-trigger:hover { border-color: var(--border); background: var(--bg-3); }
.combo.open .combo-trigger { border-color: var(--blue); background: var(--bg-2); }
.combo-trigger .cv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-trigger .caret { color: var(--tx-3); flex-shrink: 0; }
.combo-pop {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
  width: 200px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.combo.open .combo-pop { display: block; }
.combo-search { padding: 8px; border-bottom: 1px solid var(--border); }
.combo-search input {
  width: 100%; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--bg-3); color: var(--tx-1); outline: none;
}
.combo-search input:focus { border-color: var(--blue); }
/* span 需显式 block，否则 max-height/overflow 不生效；约 5 项高度，超出滚动 */
.combo-list { display: block; max-height: 176px; overflow-y: auto; padding: 4px; }
.combo-opt {
  padding: 6px 10px; font-size: 13px; color: var(--tx-1); cursor: pointer;
  border-radius: 5px; display: flex; align-items: center; gap: 7px; text-align: left;
}
.combo-opt:hover, .combo-opt.hi { background: var(--bg-4); }
.combo-opt.sel { color: var(--blue); font-weight: 600; }
.combo-empty { padding: 12px; text-align: center; font-size: 12px; color: var(--tx-3); }
.combo-group-label {
  padding: 6px 10px 2px 16px; font-size: 11px; font-weight: 600; color: var(--tx-3);
  letter-spacing: .02em;
}
.combo-group-label:first-child { padding-top: 2px; }

/* 复盘 Tab 里的 combo（.review-item 内，宽行左侧触发按钮）：默认 .combo-pop 的
   right:0 是给窄侧栏（.prop-row，紧贴视口右边）设计的，向左展开；这里触发按钮本身就
   靠宽行左侧，向左展开会越过内容区左边界，被固定侧边栏盖住导致左侧文字被遮挡——改成
   left:0 向右展开，宽行右侧有足够空白 */
.review-item .combo-pop { left: 0; right: auto; }

/* 必填项校验：红框高亮（创建 OBF ISSUE 等表单外校验场景复用） */
.field-flash-error {
  border-radius: 6px;
  outline: 2px solid var(--p-urgent) !important;
  outline-offset: 2px;
  animation: fieldFlash 1.4s ease-in-out 2;
}
@keyframes fieldFlash {
  0%, 100% { outline-color: var(--p-urgent); }
  50% { outline-color: transparent; }
}

/* 居中提示条：必填项未填时的醒目提醒 */
.center-toast {
  position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(.96);
  z-index: 999; background: var(--bg-2); border: 1px solid var(--p-urgent);
  color: var(--tx-1); font-size: 14px; font-weight: 500; line-height: 1.5;
  padding: 14px 22px; border-radius: 10px; box-shadow: var(--shadow);
  max-width: 360px; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .18s, transform .18s;
}
.center-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.prop-input {
  font-size: 12px; font-family: var(--font-mono); color: var(--tx-1);
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: 2px 6px; text-align: right; width: 120px; transition: border-color .12s, background .12s;
}
.prop-input:hover { border-color: var(--border); background: var(--bg-3); }
.prop-input:focus { border-color: var(--blue); background: var(--bg-2); outline: none; }
.prop-input::placeholder { color: var(--tx-3); }
/* 处理人多人标签输入：边框容器 + 已选人芯片 + 末尾搜索框，一体显示 */
.assignee-editor {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--bg-2);
  padding: 3px 5px; max-width: 100%;
}
.assignee-editor:focus-within { border-color: var(--blue); }
.assignee-chip {
  display: inline-flex; align-items: center; cursor: pointer;
  border-radius: var(--radius-full); transition: box-shadow .1s;
}
.assignee-chip.selected { box-shadow: 0 0 0 2px var(--blue); }
.assignee-input {
  flex: 1; min-width: 50px; border: none; background: transparent; outline: none;
  font-size: 12px; color: var(--tx-1); font-family: inherit;
}
.assignee-input::placeholder { color: var(--tx-3); }
/* 可编辑版本标签容器 */
.ver-edit { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; }
.ver-edit .ver-x { cursor: pointer; opacity: .55; margin-left: 2px; display: inline-flex; }
.ver-edit .ver-x:hover { opacity: 1; }
.ver-edit-input {
  width: 56px; font-size: 11px; font-family: var(--font-mono); border: 1px dashed var(--border);
  border-radius: 4px; background: transparent; color: var(--tx-1); padding: 1px 4px; text-align: center;
}
.ver-edit-input:focus { border-color: var(--blue); border-style: solid; outline: none; }

/* Status quick-change */
.status-select-wrap { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.status-select-wrap select {
  width: 100%; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--tx-1); font-size: 13px;
  padding: 7px 10px; outline: none; cursor: pointer; font-family: inherit;
  transition: border-color .15s;
}
.status-select-wrap select:focus { border-color: var(--blue); }

/* History */
.history-line { display: flex; gap: 10px; padding: 5px 0; font-size: 12px; color: var(--tx-3); }
.h-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; margin-top: 5px; }
.h-text strong { color: var(--tx-2); }

/* ══════════════════════════════════════════════════
   SLA DASHBOARD
   ══════════════════════════════════════════════════ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }

.stat-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s;
}
.stat-card:hover { border-color: var(--border-2); }
.stat-label { font-size: 12px; color: var(--tx-3); font-weight: 500; }
.stat-val   { font-size: 28px; font-weight: 700; line-height: 1; }
.stat-sub   { font-size: 12px; color: var(--tx-3); }
.stat-card.c-ok      .stat-val { color: var(--sla-ok); }
.stat-card.c-warn    .stat-val { color: var(--sla-warn); }
.stat-card.c-breach  .stat-val { color: var(--sla-breach); }
.stat-card.c-blue    .stat-val { color: var(--blue); }
.stat-card.c-purple  .stat-val { color: var(--party-mom); }

.section-title {
  font-size: 14px; font-weight: 600; margin-bottom: 14px;
  display: flex; align-items: center; gap: 7px;
}

.card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px;
}

/* Bar chart */
.bar-chart { display: flex; gap: 8px; align-items: flex-end; height: 140px; padding: 0 4px; }
.bar-col { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.bar-wrap { flex: 1; display: flex; gap: 3px; align-items: flex-end; width: 100%; }
.bar {
  flex: 1; border-radius: 3px 3px 0 0;
  min-height: 4px; transition: opacity .15s;
}
.bar:hover { opacity: .75; }
.bar-label { font-size: 11px; color: var(--tx-3); }

/* Progress row */
.prog-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.prog-row:last-child { margin-bottom: 0; }
.prog-name  { font-size: 13px; flex: 0 0 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-track { flex: 1; height: 6px; background: var(--bg-4); border-radius: 99px; overflow: hidden; }
.prog-fill  { height: 100%; border-radius: 99px; transition: width .3s; }
.prog-pct   { font-size: 12px; color: var(--tx-3); width: 32px; text-align: right; }

/* Party overview table (SLA page) */
.party-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.party-row:last-child { border-bottom: none; }
.party-name { font-size: 13px; font-weight: 600; flex: 0 0 80px; }

/* ══════════════════════════════════════════════════
   PARTNERS PAGE
   ══════════════════════════════════════════════════ */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.partner-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  transition: border-color .15s, box-shadow .15s; cursor: pointer;
}
.partner-card:hover { border-color: var(--border-2); box-shadow: 0 4px 12px rgba(0,0,0,.4); }

.partner-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.partner-logo {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.partner-name { font-size: 15px; font-weight: 600; }
.partner-type { font-size: 12px; color: var(--tx-3); }

.contact-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.contact-item:last-child { border-bottom: none; }
.contact-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; font-size: 11px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; }
.contact-info { flex: 1; }
.contact-name { font-weight: 500; }
.contact-role { font-size: 11px; color: var(--tx-3); }

/* ══════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; padding: 20px;
}
/* 创建问题弹窗顶对齐（而非垂直居中）：给「专题」原生 select 腾出更多下方视口空间，
   避免选项变多时下拉列表因下方空间不足而翻转成向上弹出 */
#createOverlay { align-items: flex-start; }
.modal {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow);
}
.modal-head {
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 16px; font-weight: 600; }
.modal-body  { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot  { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* Form */
.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 13px; font-weight: 500; color: var(--tx-2); }
.form-label .req { color: var(--p-urgent); }
.form-row.warn .form-label { color: var(--s-reject); }
.priority-hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 4px;
  border-radius: 50%; border: 1.5px solid var(--tx-3); color: var(--tx-3);
  font-size: 10px; font-weight: 700; line-height: 1; cursor: help; user-select: none;
}
.priority-hint-icon:hover { border-color: var(--blue); color: var(--blue); }
.form-row.warn input[type="file"] { outline: 1px solid var(--s-reject); border-radius: var(--radius); }
.form-input, .form-select, .form-select-dept, .form-textarea {
  width: 100%; padding: 8px 10px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--tx-1); font-size: 13px;
  outline: none; transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.form-select, .form-select-dept {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2359636e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 16px 16px;
}
.form-input:focus, .form-select:focus, .form-select-dept:focus, .form-textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 问题发生时间：输入框宽度跟其它字段保持一致 width:100%（不收窄），但浏览器原生日历图标
   固定贴在输入框最右侧，框越宽图标离已输入的日期文字就越远、容易被忽略——这里隐藏原生
   图标（它仍在最右侧占位，点击仍可用），换成紧贴日期文字右侧的自定义图标，点击调用
   showPicker() 弹出同一个原生日期选择器。（此前用 color-scheme:dark 想让原生图标在浅色
   背景下更清晰，反而让图标整个变成白色、在本站的浅色输入框背景上完全看不见，故去掉）*/
.date-input-wrap { position: relative; display: block; }
.date-input-wrap .form-input::-webkit-calendar-picker-indicator { opacity: 0; }
.date-input-icon {
  position: absolute; left: 94px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--tx-3); cursor: pointer; pointer-events: auto;
}

/* ══════════════════════════════════════════════════
   ROLE SWITCHER (demo only)
   ══════════════════════════════════════════════════ */
.role-switcher {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.role-btn {
  padding: 4px 12px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--tx-2);
  transition: all .12s;
}
.role-btn:hover { border-color: var(--border-2); color: var(--tx-1); }
.role-btn.active-momenta { background: rgba(130,80,223,.10); color: var(--party-mom); border-color: rgba(130,80,223,.3); }
.role-btn.active-valeo   { background: rgba(9,105,218,.10);  color: var(--party-val); border-color: rgba(9,105,218,.3); }
.role-btn.active-im      { background: rgba(26,127,55,.10);  color: var(--party-im);  border-color: rgba(26,127,55,.3); }
.role-btn.active-jnn     { background: rgba(188,76,0,.10);   color: var(--party-jnn); border-color: rgba(188,76,0,.3); }
.role-btn.active-desay   { background: rgba(31,154,168,.10); color: var(--party-desay); border-color: rgba(31,154,168,.3); }

/* ══════════════════════════════════════════════════
   MISC UTILS
   ══════════════════════════════════════════════════ */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.gap2  { gap: 8px; }
.gap3  { gap: 12px; }
.mb2   { margin-bottom: 8px; }
.mb3   { margin-bottom: 12px; }
.mb4   { margin-bottom: 16px; }
.mb6   { margin-bottom: 24px; }
.mt2   { margin-top: 8px; }
.text-muted  { color: var(--tx-3); }
.text-sm     { font-size: 12px; }
.text-xs     { font-size: 11px; }
.font-mono   { font-family: var(--font-mono); }
.font-semi   { font-weight: 600; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.divider { height: 1px; background: var(--border); margin: 8px 0; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .main-inner { padding: 14px; }
  .stat-grid  { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════
   AI 售后 AGENT — 消息气泡 / 建议 / 输入（供 agent.html 整页会话复用）
   ══════════════════════════════════════════════════ */
.msg { display: flex; gap: 8px; max-width: 88%; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
}
.msg-bubble {
  padding: 9px 12px; border-radius: 12px;
  font-size: 13px; line-height: 1.55;
}

/* Agent (left) */
.msg.bot { align-self: flex-start; }
.msg.bot .msg-avatar { background: linear-gradient(135deg,#8250df,#0969da); }
.msg.bot .msg-bubble {
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--tx-1); border-top-left-radius: 3px;
}

/* User (right) */
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .msg-avatar { background: var(--tx-2); }
.msg.user .msg-bubble {
  background: var(--blue); color: #fff; border-top-right-radius: 3px;
}

/* Typing indicator */
.msg-typing { display: flex; gap: 4px; padding: 4px 2px; }
.msg-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tx-3);
  animation: typing 1.2s infinite ease-in-out;
}
.msg-typing span:nth-child(2) { animation-delay: .18s; }
.msg-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Source / doc reference card inside a bot message */
.msg-source {
  margin-top: 8px; padding: 8px 10px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px; color: var(--tx-2);
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  transition: border-color .12s;
}
.msg-source:hover { border-color: var(--blue); color: var(--blue); }

/* Quick-reply suggestion chips (布局由 agent.html 定义容器) */
.suggest-chip {
  padding: 6px 11px; font-size: 12px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-full); color: var(--tx-2);
  transition: border-color .12s, color .12s;
}
.suggest-chip:hover { border-color: var(--blue); color: var(--blue); }

/* Escalate-to-ticket banner inside chat */
.agent-escalate {
  margin: 0; padding: 10px 12px;
  background: var(--blue-dim); border: 1px solid rgba(9,105,218,.25);
  border-radius: 8px; font-size: 12px; color: var(--tx-2);
  display: flex; align-items: center; gap: 8px;
}
.agent-escalate .btn { flex-shrink: 0; margin-left: auto; }
.agent-body::-webkit-scrollbar { width: 6px; }

/* 流式回复容器：思考中的工具调用卡片 + 打字光标（agent.js 边收边渲染场景用，之前完全没有样式，
   .tc-output 里的原始日志没有换行/裁切控制，长行会溢出气泡边界，被下面/旁边的白色元素盖住） */
.stream-wrap  { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stream-cards { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stream-text  { min-width: 0; }
.stream-cursor {
  display: inline-block; width: 2px; height: 13px; margin-left: 1px;
  background: var(--tx-2); vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

.tool-call-card {
  min-width: 0; max-width: 100%;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-3); padding: 7px 10px; font-size: 12px;
}
.tool-call-card.error { border-color: rgba(207,34,46,.3); }
.tc-row { display: flex; align-items: center; gap: 6px; color: var(--tx-2); }
.tc-icon { flex-shrink: 0; }
.tc-name { font-weight: 600; color: var(--tx-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-status { margin-left: auto; flex-shrink: 0; color: var(--tx-3); }
.tool-call-card.error .tc-status { color: var(--obf-yes); }
.tc-cmd {
  margin-top: 5px; padding: 5px 8px; border-radius: 5px;
  max-width: 100%; overflow-x: auto; white-space: pre;
  background: var(--bg-4); color: var(--tx-2);
  font-family: var(--font-mono); font-size: 11px;
}
.tc-output-toggle { display: inline-block; margin-top: 5px; font-size: 11px; color: var(--blue); cursor: pointer; }
.tc-output {
  display: none; margin-top: 5px; padding: 8px 10px; border-radius: 5px;
  max-width: 100%; overflow-x: auto; white-space: pre;
  background: var(--bg-4); color: var(--tx-2);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
}
.tc-output.open { display: block; }

/* ── 创建流拦截：Agent 先行解答 ── */
.deflect-box {
  background: var(--blue-dim);
  border: 1px solid rgba(9,105,218,.25);
  border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 4px;
  display: flex; gap: 12px; align-items: flex-start;
}
.deflect-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg,#8250df,#0969da);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.deflect-body { flex: 1; }
.deflect-title { font-size: 13px; font-weight: 600; color: var(--tx-1); margin-bottom: 3px; }
.deflect-desc  { font-size: 12px; color: var(--tx-2); line-height: 1.5; }
.deflect-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ══════════════════════════════════════════════════
   售后 AGENT 工作台 — 会话诊断
   ══════════════════════════════════════════════════ */

/* ── OBF 定性标签（标题栏旁，动态更新）── */
.obf-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap;
}
.obf-tag .obf-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.obf-yes     { background: rgba(207,34,46,.10);  color: var(--obf-yes);     border-color: rgba(207,34,46,.28); }
.obf-yes     .obf-dot { background: var(--obf-yes); }
.obf-no      { background: rgba(26,127,55,.10);  color: var(--obf-no);      border-color: rgba(26,127,55,.28); }
.obf-no      .obf-dot { background: var(--obf-no); }
.obf-collect { background: rgba(154,103,0,.10);  color: var(--obf-collect); border-color: rgba(154,103,0,.28); }
.obf-collect .obf-dot { background: var(--obf-collect); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* 已闭环徽标 */
.closed-loop-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
  background: rgba(130,80,223,.10); color: var(--party-mom); border: 1px solid rgba(130,80,223,.28);
}

/* ── 可编辑标题 ── */
.chat-title-edit {
  font-size: 15px; font-weight: 600; color: var(--tx-1);
  border: 1px solid transparent; border-radius: 6px;
  padding: 3px 8px; margin: -3px -8px; background: transparent;
  outline: none; font-family: inherit; min-width: 120px; max-width: 420px;
  transition: border-color .12s, background .12s;
}
.chat-title-edit:hover  { background: var(--bg-3); }
.chat-title-edit:focus  { border-color: var(--blue); background: var(--bg-2); box-shadow: 0 0 0 3px var(--blue-dim); }

/* ── 专题修正下拉 ── */
.topic-fix {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius); cursor: pointer;
  font-size: 12px; color: var(--tx-2); border: 1px solid var(--border);
  background: var(--bg-2); transition: border-color .12s, color .12s;
}
.topic-fix:hover { border-color: var(--border-2); color: var(--tx-1); }
.topic-fix select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* ── 会话侧栏项（升级：标题编辑 + 星标 + 状态点）── */
.conv-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: var(--radius);
  cursor: pointer; margin-bottom: 2px; transition: background .1s;
  position: relative;
}
.conv-item:hover { background: var(--bg-4); }
.conv-item.active { background: var(--blue-dim); }
.conv-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.conv-status-dot.yes     { background: var(--obf-yes); }
.conv-status-dot.no      { background: var(--obf-no); }
.conv-status-dot.collect { background: var(--obf-collect); }
.conv-status-dot.loop    { background: var(--party-mom); }
.conv-main { flex: 1; min-width: 0; }
.conv-title {
  font-size: 13px; color: var(--tx-1); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-item:not(.active) .conv-title { color: var(--tx-2); }
.conv-sub { font-size: 11px; color: var(--tx-3); margin-top: 1px; }
.conv-star {
  flex-shrink: 0; color: var(--tx-3); cursor: pointer;
  opacity: 0; transition: opacity .12s, color .12s;
}
.conv-item:hover .conv-star { opacity: 1; }
.conv-star.starred { opacity: 1; color: #d4a017; }
.conv-star:hover { color: #d4a017; }
.conv-del {
  flex-shrink: 0; color: var(--tx-3); cursor: pointer;
  display: inline-flex; align-items: center;
  opacity: 0; transition: opacity .12s, color .12s;
}
.conv-item:hover .conv-del { opacity: 1; }
.conv-del:hover { color: var(--p-urgent); }

/* ── 思考实时流 ── */
.think-stream {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 4px;
}
.think-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; cursor: pointer; user-select: none;
  font-size: 12px; font-weight: 600; color: var(--tx-2);
}
.think-head .think-spin {
  width: 13px; height: 13px; border: 2px solid var(--border-2);
  border-top-color: var(--blue); border-radius: 50%;
  animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.think-head .think-chevron { margin-left: auto; transition: transform .18s; }
.think-stream.collapsed .think-chevron { transform: rotate(-90deg); }
.think-body {
  padding: 4px 12px 12px 32px; font-size: 12px; color: var(--tx-3);
  line-height: 1.7; font-family: var(--font-mono);
  max-height: 240px; overflow-y: auto;
}
.think-stream.collapsed .think-body { display: none; }
.think-step { opacity: 0; animation: fadeIn .3s forwards; padding: 2px 0; }
.think-step::before { content: '› '; color: var(--blue); }
@keyframes fadeIn { to { opacity: 1; } }

/* ── OBF 结论卡（强制判定）── */
.obf-verdict {
  border-radius: var(--radius-lg); border: 1px solid;
  overflow: hidden; margin-top: 4px;
}
.obf-verdict.is-yes { border-color: rgba(207,34,46,.3); }
.obf-verdict.is-no  { border-color: rgba(26,127,55,.3); }
.obf-verdict-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; font-size: 14px; font-weight: 700;
}
.obf-verdict.is-yes .obf-verdict-head { background: rgba(207,34,46,.08); color: var(--obf-yes); }
.obf-verdict.is-no  .obf-verdict-head { background: rgba(26,127,55,.08); color: var(--obf-no); }
.obf-verdict-body { padding: 12px 14px; background: var(--bg-2); }
.obf-evidence-title { font-size: 11px; font-weight: 600; color: var(--tx-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.obf-evidence-item {
  display: flex; gap: 8px; margin-bottom: 7px; font-size: 13px; color: var(--tx-2); line-height: 1.5;
}
.obf-evidence-item:last-child { margin-bottom: 0; }
.obf-evidence-item .ev-key {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 11px;
  color: var(--tx-3); padding-top: 2px; min-width: 62px;
}
.obf-evidence-item code {
  font-family: var(--font-mono); font-size: 12px; background: var(--bg-4);
  padding: 1px 5px; border-radius: 3px; color: var(--obf-yes);
}

/* ── 无日志引导 ── */
.nolog-guide {
  background: var(--bg-3); border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.nolog-title { font-size: 13px; font-weight: 600; color: var(--tx-1); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.nolog-desc  { font-size: 12px; color: var(--tx-2); line-height: 1.5; margin-bottom: 10px; }
.cmd-block {
  position: relative; background: #1f2328; color: #e6edf3;
  border-radius: var(--radius); padding: 12px 40px 12px 14px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  overflow-x: auto; white-space: pre;
}
.cmd-block + .cmd-block { margin-top: 8px; }
.cmd-label { font-size: 11px; color: var(--tx-3); margin: 8px 0 4px; }
.cmd-copy {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 5px; border: none; cursor: pointer;
  background: rgba(255,255,255,.1); color: #e6edf3;
  display: flex; align-items: center; justify-content: center; transition: background .12s;
}
.cmd-copy:hover { background: rgba(255,255,255,.2); }

/* ── 文件上传 ── */
.upload-item {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; margin-top: 8px;
}
.upload-row { display: flex; align-items: center; gap: 10px; }
.upload-icon {
  width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
  background: var(--blue-dim); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.upload-info { flex: 1; min-width: 0; }
.upload-name { font-size: 13px; font-weight: 500; color: var(--tx-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-meta { font-size: 11px; color: var(--tx-3); margin-top: 1px; }
.upload-track { height: 5px; background: var(--bg-4); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.upload-fill  { height: 100%; background: var(--blue); border-radius: 99px; transition: width .2s; }
.upload-fill.done { background: var(--obf-no); }
.upload-dupe {
  margin-top: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.5;
  background: rgba(154,103,0,.08); border: 1px solid rgba(154,103,0,.25);
  border-radius: 6px; color: var(--obf-collect);
}

/* ── 飞书项目联动 ── */
.feishu-panel {
  margin-top: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2);
}
.feishu-head {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; background: var(--bg-3); border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--tx-2);
}
.feishu-badge { margin-left: auto; font-size: 11px; color: var(--tx-3); font-weight: 500; }
.feishu-group { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.feishu-group:last-child { border-bottom: none; }
.feishu-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px;
  padding: 1px 7px; border-radius: 4px;
}
.fg-obf  { background: rgba(207,34,46,.10);  color: var(--obf-yes); }
.fg-orm  { background: rgba(9,105,218,.10);  color: var(--blue); }
.fg-otm  { background: rgba(26,127,55,.10);  color: var(--obf-no); }
.fg-osip { background: rgba(130,80,223,.10); color: var(--party-mom); }
.feishu-link {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 13px; text-decoration: none; color: var(--tx-2);
}
.feishu-link:last-child { border-bottom: none; }
.feishu-link:hover { color: var(--blue); text-decoration: none; }
.feishu-link .fl-id { font-family: var(--font-mono); font-size: 12px; color: var(--tx-3); flex-shrink: 0; }
.feishu-link:hover .fl-id { color: var(--blue); }
.feishu-link .fl-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 消息时间戳 ── */
.msg-time { font-size: 11px; color: var(--tx-3); margin-top: 5px; font-family: var(--font-mono); }
.msg-time.done-flag { color: var(--obf-no); }

/* ── 断点续答提示 ── */
.resume-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 14px;
  background: rgba(26,127,55,.08); border: 1px solid rgba(26,127,55,.25);
  border-radius: 8px; font-size: 12px; color: var(--obf-no);
}

/* ── 状态变更日志（审计）── */
.audit-log {
  margin-top: 4px; border-top: 1px dashed var(--border); padding-top: 8px;
}
.audit-item { display: flex; gap: 8px; font-size: 11px; color: var(--tx-3); padding: 2px 0; line-height: 1.5; }
.audit-item .audit-time { font-family: var(--font-mono); flex-shrink: 0; }

/* ── 只读分享横幅 ── */
.share-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; background: var(--bg-4);
  border-bottom: 1px solid var(--border); font-size: 13px; color: var(--tx-2);
}
.share-banner svg { flex-shrink: 0; color: var(--tx-3); }
.share-banner b { color: var(--tx-1); }

/* ── 会话搜索框 ── */
.conv-search {
  position: relative; padding: 0 8px 8px;
}
.conv-search input {
  width: 100%; padding: 6px 10px 6px 30px; font-size: 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--tx-1); outline: none; transition: border-color .12s;
}
.conv-search input:focus { border-color: var(--blue); }
.conv-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(calc(-50% - 4px)); color: var(--tx-3); pointer-events: none; }

/* ══════════════════════════════════════════════════
   问题 AI 分析报告（详情页 Tab 内）
   ══════════════════════════════════════════════════ */
.report-hero {
  background: linear-gradient(135deg, rgba(130,80,223,.06), rgba(9,105,218,.06));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 18px; display: flex; align-items: center; gap: 14px;
}
.report-hero-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--agent-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.report-hero-title { font-size: 14px; font-weight: 700; }
.report-hero-sub { font-size: 12px; color: var(--tx-3); margin-top: 2px; }

.rep-section { margin-bottom: 20px; }
.rep-section:last-child { margin-bottom: 0; }
.rep-section-title {
  font-size: 12px; font-weight: 600; color: var(--tx-3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.rep-text { font-size: 14px; color: var(--tx-1); line-height: 1.75; }
.rep-text code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-4); padding: 1px 5px; border-radius: 3px; color: var(--obf-yes); }

/* 处理建议清单 */
.rec-item {
  display: flex; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.rec-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-dim); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.rec-body { font-size: 13px; color: var(--tx-2); line-height: 1.6; }
.rec-body b { color: var(--tx-1); }

/* 日志证据块 */
.log-evidence {
  background: #1f2328; color: #e6edf3; border-radius: var(--radius);
  padding: 12px 14px; font-family: var(--font-mono); font-size: 12px;
  line-height: 1.7; overflow-x: auto; white-space: pre;
}
.log-evidence .hl { color: #ff7b72; font-weight: 600; }
.log-evidence .dim { color: #8b949e; }

/* 人工复核卡片（AI 分析报告卡片上方） */
.fb-card {
  border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 16px;
  border: 1px solid var(--border);
}
.fb-card.is-pending {
  background: linear-gradient(135deg, rgba(130,80,223,.07), rgba(9,105,218,.07));
}
.fb-card.is-correct {
  background: linear-gradient(135deg, rgba(26,127,55,.09), rgba(26,127,55,.03));
  border-color: rgba(26,127,55,.3);
}
.fb-card.is-incorrect {
  background: linear-gradient(135deg, rgba(207,34,46,.09), rgba(207,34,46,.03));
  border-color: rgba(207,34,46,.3);
}
.fb-card-label {
  font-size: 11px; font-weight: 600; color: var(--tx-3);
  text-transform: uppercase; letter-spacing: .05em;
}
.fb-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--radius); border: 1px solid transparent;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  background: var(--bg-2); transition: opacity .12s;
}
.fb-btn:hover { opacity: .8; }
.fb-btn.fb-btn-correct { border-color: rgba(26,127,55,.4); color: var(--obf-no); }
.fb-btn.fb-btn-incorrect { border-color: rgba(207,34,46,.4); color: var(--obf-yes); }
.fb-verdict-line { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.fb-verdict-line.is-correct { color: var(--obf-no); }
.fb-verdict-line.is-incorrect { color: var(--obf-yes); }
.fb-reason-text { margin-top: 6px; color: var(--tx-2); font-size: 13px; padding-left: 20px; line-height: 1.6; }

/* 报告元信息条 */
.report-meta-bar {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
}
.report-meta-item { font-size: 12px; color: var(--tx-3); }
.report-meta-item b { color: var(--tx-1); font-weight: 600; }
.report-meta-item .conf { color: var(--obf-yes); font-weight: 700; font-size: 14px; }

/* ══════════════════════════════════════════════════
   版本标签（问题版本，可多个）
   ══════════════════════════════════════════════════ */
.ver-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  background: rgba(154,103,0,.10); color: var(--obf-collect);
  border: 1px solid rgba(154,103,0,.28); white-space: nowrap;
}
.ver-tag .ver-x {
  cursor: pointer; display: inline-flex; opacity: .6;
  transition: opacity .12s;
}
.ver-tag .ver-x:hover { opacity: 1; }

/* 修复版本用绿色系区分 */
.ver-tag.fixed { background: rgba(26,127,55,.10); color: var(--obf-no); border-color: rgba(26,127,55,.28); }

/* 版本标签容器（属性栏展示用，右对齐换行） */
.ver-tag-list { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }

/* 版本标签输入框（创建弹窗用） */
.ver-input-box {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 38px; padding: 6px 8px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.ver-input-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }
.ver-input-box input {
  flex: 1; min-width: 90px; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--tx-1); padding: 2px;
}

/* ── 分析过程 Markdown 渲染 ── */
.analysis-detail { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 10px; }
.analysis-summary {
  cursor: pointer; padding: 8px 12px; background: var(--bg-3);
  font-size: 12px; font-weight: 600; color: var(--tx-2);
  list-style: none; display: flex; align-items: center; gap: 6px;
  user-select: none;
}
.analysis-summary::-webkit-details-marker { display: none; }
.analysis-body { padding: 12px 14px; max-height: 480px; overflow-y: auto; }
.md-body { font-size: 13px; line-height: 1.75; color: var(--tx-1); }
.md-h1, .md-h2 { font-size: 15px; font-weight: 700; margin: 12px 0 4px; color: var(--tx-1); }
.md-h3 { font-size: 14px; font-weight: 700; margin: 10px 0 3px; padding-bottom: 3px; border-bottom: 1px solid var(--border); color: var(--tx-1); }
.md-h4 { font-size: 13px; font-weight: 700; margin: 8px 0 2px; color: var(--tx-2); }
.md-li { padding: 2px 0 2px 18px; color: var(--tx-2); }
.md-p { margin: 3px 0; color: var(--tx-2); }
.md-gap { height: 6px; }
.md-hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.md-pre {
  background: #1f2328; color: #e6edf3;
  border-radius: var(--radius); padding: 10px 14px;
  overflow-x: auto; margin: 6px 0;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  white-space: pre;
}
.cb-lang { font-size: 10px; color: #8b949e; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.md-table {
  border-collapse: collapse; width: 100%; margin: 8px 0;
  font-size: 12px;
}
.md-table th, .md-table td {
  border: 1px solid var(--border); padding: 5px 10px; text-align: left;
}
.md-table th { background: var(--bg-3); font-weight: 600; color: var(--tx-1); }
.md-table td { color: var(--tx-2); }
.md-code {
  background: var(--bg-4); padding: 1px 5px; border-radius: 3px;
  font-size: 11px; font-family: var(--font-mono); color: var(--tx-2);
}
/* marked.js 默认输出的是裸的 <pre><code>，不带 .md-pre/.md-code 这些类名（那两个类实际没人生成），
   之前完全没样式：长日志行不换行也不裁切，会把气泡撑破、溢出到旁边的白色背景元素下面，
   看起来就像"代码文字被一层白色盖住" —— 这里补上溢出裁切，兜住 AI 回复里引用的日志/代码块 */
.md-body pre {
  background: #1f2328; color: #e6edf3;
  border-radius: var(--radius); padding: 10px 14px; margin: 6px 0;
  max-width: 100%; overflow-x: auto;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
}
.md-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.md-body code {
  background: var(--bg-4); padding: 1px 5px; border-radius: 3px;
  font-size: 12px; font-family: var(--font-mono); color: var(--tx-2);
}

/* ─── 列设置弹窗（个性化列）──────────────────────────────────────────────── */
.col-setting-label { font-size: 12px; color: var(--tx-3); margin-bottom: 8px; font-weight: 600; }
.col-list { display: flex; flex-direction: column; gap: 6px; }
.col-list-avail { flex-direction: row; flex-wrap: wrap; }
.col-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--bd-1); border-radius: 8px;
  background: var(--bg-2); cursor: grab; user-select: none;
}
.col-item.dragging { opacity: .5; }
.col-item .col-grip { color: var(--tx-3); font-size: 12px; letter-spacing: -2px; cursor: grab; }
.col-item .col-name { flex: 1; font-size: 13px; color: var(--tx-1); }
.col-item .col-x {
  border: none; background: transparent; color: var(--tx-3); cursor: pointer;
  font-size: 12px; padding: 2px 6px; border-radius: 4px;
}
.col-item .col-x:hover { background: var(--bd-1); color: var(--p-urgent); }
.col-add {
  border: 1px dashed var(--bd-1); background: transparent; color: var(--tx-2);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.col-add:hover { border-color: var(--blue); color: var(--blue); }
.col-empty { font-size: 13px; color: var(--tx-3); padding: 8px 2px; }

/* ─── 关联链接（JIRA/OBF）：可点击单号 chip + 修改按钮 ──────────────────── */
.link-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  background: var(--blue-dim); color: var(--blue);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
}
.link-chip:hover { border-color: var(--blue); text-decoration: none; }
.link-chip svg { opacity: .7; }
.link-chip-disabled {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  background: var(--bd-1); color: var(--tx-3);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  cursor: default;
}
.link-edit {
  margin-left: 6px; border: none; background: transparent;
  color: var(--tx-3); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px;
}
.link-edit:hover { background: var(--bd-1); color: var(--tx-1); }

/* ─── 复盘分析 Tab：每项一行卡片，默认单行省略，点击展开编辑 ───────────────── */
.review-item {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px; margin-bottom: 8px;   /* 所有项固定同一行高 */
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2); transition: border-color .12s;
}
.review-item:last-child { margin-bottom: 0; }
.review-item:hover { border-color: var(--bd-1); }
.review-item.clickable { cursor: pointer; }
.review-item.clickable:hover { border-color: var(--blue); }
.review-item-label { flex: 0 0 80px; font-size: 12px; font-weight: 600; color: var(--tx-2); line-height: 20px; }
.review-item .review-field { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; }
/* 默认单行显示：超出省略，与下拉同高 */
.review-val.single {
  max-width: 100%; font-size: 13px; line-height: 20px; color: var(--tx-1); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review-val.single.is-empty { color: var(--tx-3); }
.review-val.click { cursor: text; }
.review-val.click:hover { color: var(--blue); }
/* 是否横展下拉：贴合单行文本，不撑高卡片 */
.review-item .review-select {
  height: 20px; line-height: 20px; font-size: 13px; text-align: right;
  padding: 0 4px; border: none; background: transparent; color: var(--tx-1); cursor: pointer;
}
/* 问题发现场景等下拉：整行铺满的选择框，而非贴右侧的小控件 */
.review-item.select-full .review-field { justify-content: stretch; }
.review-item .review-select-full {
  flex: 1; width: 100%; height: 28px; text-align: left;
  padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-3);
}
/* 是否横展/是否需要换件——布尔下拉，居中显示「是/否」 */
.review-item .review-select.review-select-full { text-align: center; text-align-last: center; }
/* 编辑态：整项展开为「标签在上、编辑器整行」，高度自适应 */
.review-item.editing { flex-direction: column; align-items: stretch; gap: 6px; height: auto; padding: 10px 12px; border-color: var(--blue); }
.review-item.editing .review-item-label { flex: none; }
.review-item.editing .review-field { display: block; }
/* 编辑控件 */
.review-input, .review-select {
  font-family: inherit; font-size: 13px; padding: 5px 8px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-3); color: var(--tx-1);
}
.review-editor {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; line-height: 1.6;
  padding: 7px 9px; border: 1px solid var(--blue); border-radius: var(--radius);
  background: var(--bg-3); color: var(--tx-1); resize: vertical;
}
.review-edit-actions { margin-top: 8px; display: flex; gap: 6px; }
.review-link { color: var(--blue); text-decoration: none; cursor: pointer; }
.review-link:hover { text-decoration: underline; }

/* 根本原因单框：无标签、自适应高度、文本左对齐多行显示 */
.review-item.rc-single { height: auto; min-height: 40px; padding: 10px 12px; align-items: flex-start; }
.review-item.rc-single .review-field { justify-content: flex-start; width: 100%; }
.review-val.rc-text {
  font-size: 13px; line-height: 1.6; color: var(--tx-1);
  white-space: pre-wrap; word-break: break-all; text-align: left; width: 100%;
}

/* 影响面评估：固定 3 行小卡片，嵌在复盘 Tab 主列表下方 */
.review-subcard {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2); padding: 12px; margin-top: 16px;
}
.review-subcard-title {
  font-size: 12px; font-weight: 600; color: var(--tx-3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.review-subcard .review-item:last-child { margin-bottom: 0; }
.review-subcard .review-item-label { flex: 0 0 auto; white-space: nowrap; }

/* ─── 时间线 Stepper：固定 8 节点，横向圆点+连线，已完成部分高亮 ───────────── */
.review-timeline {
  display: flex; align-items: flex-start; gap: 0;
  padding: 6px 4px 20px; margin-bottom: 8px; overflow-x: auto;
}
.tl-node { flex: 1 1 0; min-width: 124px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tl-dot-row { display: flex; align-items: center; width: 100%; }
.tl-line { flex: 1; height: 2px; background: var(--border); }
.tl-line.done { background: var(--blue); }
.tl-line.invisible { background: transparent; }
.tl-dot {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--tx-3); background: var(--bg-2);
  box-sizing: border-box;
}
.tl-dot.done { border-color: var(--blue); background: var(--blue); }
.tl-label {
  font-size: 12px; color: var(--tx-2); margin-top: 8px; line-height: 1.4;
  max-width: 132px;
  min-height: 51px; display: flex; align-items: center; justify-content: center;
}
.tl-date-input {
  font-family: inherit; font-size: 12px; padding: 0 6px;
  height: 22px; line-height: 20px; box-sizing: border-box;
  width: 108px; margin-top: 3px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-3); color: var(--tx-1); color-scheme: dark;
}

/* 右侧属性区行内小控件：与文字同高、不撑高行 */
/* 右侧属性区所有行内控件统一高度 22px，保证每行等高对齐 */
.prop-row .prop-select,
.prop-row .combo-trigger,
.prop-date, .prop-inline-input,
.prop-row .link-chip,
.prop-row .ver-edit {
  height: 22px; line-height: 20px; box-sizing: border-box;
}
.prop-date, .prop-inline-input {
  font-family: inherit; font-size: 13px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-3); color: var(--tx-1); max-width: 140px;
}
.prop-date { color-scheme: dark; }
.prop-row .link-chip { padding: 0 8px; }

/* 项目/车型选择树（下拉面板 + 展开收起节点）：OBF 导入页、创建问题弹窗共用 */
.tree-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px;
  border-radius: var(--radius); cursor: pointer; transition: background .1s;
}
.tree-row:hover { background: var(--bg-3); }
.tree-toggle {
  flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--tx-2); transition: transform .15s; cursor: pointer;
}
.tree-toggle.collapsed { transform: rotate(-90deg); }
.tree-toggle.leaf { visibility: hidden; }
.tree-label { flex: 1; font-size: 13px; }
.tree-children.collapsed { display: none; }
.tree-row.selected { background: var(--bg-4); color: var(--primary); font-weight: 600; }

/* 单选目标树：按钮 + 绝对定位下拉面板 */
.target-tree-wrap { position: relative; }
.target-tree-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  width: 280px; max-height: 360px; overflow-y: auto; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.target-tree-panel.open { display: block; }
/* 项目/车型触发框即搜索框（.tree-trigger-input）：右侧放一个下拉小箭头提示可展开，
   点击聚焦自动清空进入搜索态，输入即过滤面板里的树（.tree-list）。
   .tree-empty 在过滤无匹配时展示空态。 */
.tree-trigger-input {
  padding-right: 28px; cursor: text;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2359636e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 14px;
}
.tree-trigger-input.warn { border-color: var(--s-reject); }
.tree-empty { padding: 14px 6px; text-align: center; font-size: 12px; color: var(--tx-3); }
.tree-group-label { padding: 6px 0 3px; font-size: 10px; font-weight: 700; color: var(--tx-3); text-transform: uppercase; letter-spacing: .05em; }
/* 问题版本下拉（OBF版本/SAI版本分组）：真实版本行缩进为普通 .tree-row 的 2 倍（6px → 12px），
   跟分组标签的 10px 内边距区分出层级 */
#createVersionList .tree-row { padding-left: 12px; }
/* 专题下拉复用同一套面板样式，但字段所在列比项目/车型窄，面板改成跟字段等宽（而不是固定
   280px），避免在创建问题弹窗的两列表单里往右溢出模态框边缘；面板固定向下展开+超高滚动，
   不会像原生 select 那样在空间不够时翻转向上弹出 */
.module-select-panel { width: 100%; max-height: 280px; }
.issuetype-select-panel { width: 100%; max-height: 280px; }
.tree-select-btn.warn { border-color: var(--s-reject); color: var(--s-reject); }
/* 表单内的"项目/车型"选择按钮：外观与同一表单里的其它 select 保持一致（创建问题弹窗） */
.form-row .tree-select-btn {
  width: 100%; justify-content: space-between;
  padding: 8px 10px; font-size: 13px; font-weight: 400;
  background: var(--bg-3); border-color: var(--border); color: var(--tx-1);
}
.form-row .tree-select-btn:hover { background: var(--bg-3); border-color: var(--border-2); color: var(--tx-1); }
.form-row .tree-select-btn:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }
.form-row .tree-select-btn.warn { background: var(--bg-3); }
.prop-row .ver-edit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; height: auto; min-height: 22px; }

/* 售后助手"请先上传日志"引导卡片（agent.html 聊天气泡 / issue-detail.html AI 分析报告区共用） */
.upload-guide-msg { font-size: 13px; line-height: 1.75; }
.upload-guide-msg code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }