/* AI 答题过程（app/ai_debug_api.py）。颜色只用 tokens.css 的变量（UI 门禁）。 */
[hidden] { display: none !important; }
body { background: var(--canvas); }
.ad-app { max-width: 1600px; margin: 0 auto; padding: 20px 16px 72px; }
.ad-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ad-head h1 { margin: 0 0 6px; font-size: 22px; color: var(--ink); }
.ad-head p { margin: 0; max-width: 860px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.ad-head .ad-links { margin-top: 4px; }
.ad-head a { color: var(--accent); }
.ad-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.ad-tools select { font: inherit; padding: 4px 6px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
/* 提问时间四个按钮（10-16 老板「日期不要下拉」）：连成一条，选中的填主色 */
.ad-span-l { white-space: nowrap; }
.ad-seg { display: inline-flex; border: 1px solid var(--border-control); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.ad-seg button { border: 0; border-left: 1px solid var(--border-control); background: var(--surface); color: var(--text-secondary); padding: 6px 12px;
  font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.ad-seg button:first-child { border-left: 0; }
.ad-seg button:hover { background: var(--surface-hover); color: var(--ink); }
.ad-seg button.on { background: var(--accent); color: var(--text-on-accent); font-weight: 600; }
.ad-btn { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; }
.ad-btn:hover { background: var(--surface-hover); }
.ad-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.ad-btn.primary:hover { background: var(--accent-hover); }
.ad-btn:disabled { opacity: .6; cursor: default; }

/* 吸顶筛选条里的数字格（2026-10-01，data-sec-pin 复制上去的）：缩成一排小药丸，只留名字和数，说明藏掉 */
.sq-secpin .ad-kpis { gap: 6px; }
.sq-secpin .ad-kpi { display: flex; align-items: baseline; gap: 6px; padding-left: 12px; padding-right: 12px; border-radius: 999px; }
.sq-secpin .ad-kpi small { font-size: 12px; }
.sq-secpin .ad-kpi b { font-size: 14px; margin: 0; }
.sq-secpin .ad-kpi span { display: none; }
.ad-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0 10px; }
.ad-kpi { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-md); padding: 10px 14px; cursor: pointer; font: inherit; color: var(--ink); }
.ad-kpi:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.ad-kpi.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ad-kpi small { display: block; font-size: 13px; color: var(--muted); }
.ad-kpi b { display: block; font-size: 26px; line-height: 1.2; margin: 4px 0 2px; }
.ad-kpi span { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
.ad-kpi.k-answered b { color: var(--success-fg); }
.ad-kpi.k-cant b { color: var(--warning-fg); }
.ad-kpi.zero b { color: var(--text-disabled); }

.ad-msg { font-size: 13px; color: var(--muted); margin: 8px 0; }
.ad-msg.err { color: var(--danger-fg); }

.ad-main { display: flex; gap: 12px; align-items: flex-start; }
.ad-list { flex: 1 1 auto; min-width: 0; }
.ad-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--surface); }
.ad-table th { position: sticky; top: 0; z-index: 2; background: var(--surface-sunken); color: var(--muted); font-weight: 600; text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ad-table th:first-child { border-top-left-radius: var(--radius-md); }
.ad-table th:last-child { border-top-right-radius: var(--radius-md); }
.ad-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); height: 20px; }
.ad-table tr { cursor: pointer; }
.ad-table tbody tr:hover td { background: var(--surface-hover); }
.ad-table tr.sel td { background: var(--surface-selected); }
.c-at { width: 92px; } .c-who { width: 72px; } .c-chat { width: 120px; } .c-sku { width: 140px; } .c-out { width: 112px; } .c-hum { width: 92px; } .c-fac { width: 64px; }
.c-q { width: 30%; } .c-why { width: auto; }
/* 10-09 加「哪个群」后：一千来宽的窗口里「为什么」被挤没，问题列让一点（问题、为什么都能悬停看全文） */
@media (max-width: 1180px) { .c-q { width: 24%; } }
td.c-at, td.c-fac { color: var(--muted); }
.ad-dot { color: var(--text-disabled); }
.ad-tag { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: 12px; line-height: 18px; }
.t-answered { background: var(--tag-1-bg); color: var(--success-fg); }
.t-cant { background: var(--tag-3-bg); color: var(--warning-fg); }
.t-timely { background: var(--tag-0-bg); color: var(--muted); }
.t-off, .t-no_ai { background: var(--surface-sunken); color: var(--muted); }
.ad-pic { color: var(--info-fg); font-size: 12px; margin-right: 4px; }
/* 老板 10-04：可视化——数字卡（shared/viz.css）放在原来数字格的位置；吸顶条里缩成一排小药丸，只留图标、名字和数 */
.ad-kpis:has(> .sqv-kpis) { display: block; }
.ad-kpis .sqv-kpis { margin: 0; }
.sq-secpin .ad-kpis .sqv-kpis { flex-wrap: nowrap; gap: 6px; margin: 0; }
.sq-secpin .ad-kpis .sqv-kpi { flex: 0 0 auto; min-width: 0; max-width: none; flex-direction: row; align-items: baseline; gap: 6px;
  padding: 2px 12px; border-radius: var(--radius-full); }
.sq-secpin .ad-kpis .sqv-kpi-v { font-size: 14px; line-height: 20px; }
.sq-secpin .ad-kpis .sqv-kpi-n, .sq-secpin .ad-kpis .sqv-kpi-v small { display: none; }
.ad-table td.c-out .sqv-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ad-table td.ad-empty { white-space: normal; cursor: default; }
.ad-verdict b .sqv-pill { margin-bottom: 4px; }
.ad-sure { max-width: 320px; margin: 4px 0; }

.ad-panel { position: sticky; top: 8px; flex: 0 0 min(560px, 46%); max-height: calc(100vh - 16px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); z-index: 20; }
/* z-index 20（2026-10-01，原来 5）：顶上钉的缩小筛选条（shared/section-tabs.js，层级 10、铺满整页宽）不能盖住面板头 */
.ad-panel-top { position: sticky; top: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ad-x { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 6px; }
.ad-x:hover { color: var(--ink); }
.ad-panel-body { padding: 4px 14px 16px; font-size: 13px; color: var(--ink); line-height: 1.65; }
.ad-sec { margin-top: 14px; }
.ad-sec h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.ad-q { white-space: pre-wrap; background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 8px 10px; }
.ad-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ad-imgs img { width: 120px; height: 90px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: zoom-in; background: var(--surface-sunken); }
.ad-read { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--info-fg); background: var(--accent-soft-bg); border-radius: var(--radius-sm); white-space: pre-wrap; }
.ad-note { font-size: 12px; color: var(--muted); }
.ad-verdict { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.ad-verdict b { display: block; }
.ad-ev { list-style: none; margin: 0; padding: 0; }
.ad-ev li { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 6px; }
.ad-ev li.used { border-color: var(--accent-soft-border); background: var(--accent-soft-bg); }
.ad-ev .ev-head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ad-ev .ev-head b { font-weight: 600; }
.ad-ev .ev-why { font-size: 12px; color: var(--muted); }
.ad-ev details summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.ad-ev pre { white-space: pre-wrap; font-family: inherit; margin: 4px 0 0; font-size: 12px; color: var(--ink-2); }
.ad-miss { margin: 4px 0 0; padding-left: 18px; color: var(--warning-fg); }
.ad-fac { white-space: pre-wrap; padding: 8px 10px; border-left: 3px solid var(--success-fg); background: var(--surface-sunken); border-radius: var(--radius-sm); margin-bottom: 6px; }
.ad-try textarea, .ad-try input { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.ad-try .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ad-try .row input[type=text] { width: 180px; }
.ad-try label.chk { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ad-try label.chk input { width: auto; margin: 0; }
.ad-try-out { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.ad-fix { margin-top: 14px; padding: 8px 10px; border: 1px solid var(--accent-soft-border); background: var(--accent-soft-bg); border-radius: var(--radius-sm); }
.ad-fix a { color: var(--accent); }

.ad-block { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; color: var(--ink); line-height: 1.7; }
.ad-block summary { cursor: pointer; font-weight: 600; }
.ad-block ul { padding-left: 18px; }

.ad-lightbox { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: var(--z-popover); cursor: zoom-out; }
.ad-lightbox img { max-width: 94vw; max-height: 94vh; background: var(--surface); }

@media (max-width: 900px) {
  .ad-main { flex-direction: column; }
  .ad-panel { position: static; flex: none; width: 100%; max-height: none; order: -1; }   /* 窄屏排在列表上面：不然点开的详情在 100 多行下面，看不见 */
  .c-who, .c-chat, .c-fac, .c-why { display: none; }
  .c-q { width: auto; }
}

/* 谁在办（10-16）：一行「谁在办 [AI 占比条] AI 80% · 人 20%  [全部 | 只看人插手过的]」 */
.ad-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.ad-share-l { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ad-share-m { width: 180px; }
.ad-share-t { white-space: nowrap; }
.ad-share-t b { color: var(--ink); }
.ad-hum-seg { margin-left: auto; }
td.c-hum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.ad-table td.c-hum .sqv-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ad-more { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px; background: var(--surface-hover); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.ad-case { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-said { padding: 6px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.ad-said:first-of-type { border-top: 0; }
.ad-said b { margin-right: 8px; }
.ad-said div { margin-top: 2px; white-space: pre-wrap; color: var(--ink); }
@media (max-width: 640px) { .ad-share-m { width: 120px; } .ad-share-t { white-space: normal; } .ad-hum-seg { margin-left: 0; } }
