/* 飞书群消息监控页——视觉规范照抄飞书桌面端（用户明确要求与飞书一致、员工零学习成本），
   故此页例外地不取 tokens.css 的语义色，而用一套飞书配色 token（--fs-*）；
   这些 token 的定义在 app/static/tokens.css 末尾的「飞书监控页专用段」——
   :root 和裸色值全站只有那一个家（tests/test_ui_standard.py）。
   布局：三栏白底通栏（会话列表 280 / 消息流 1fr / 详情页 340），页面锁死视口高度，
   滚动只发生在各栏内部。 */
html, body { height: 100%; overflow: hidden; margin: 0; }
body { background: var(--fs-bg); color: var(--fs-text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: 14px; }

.fs-app { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
:root[data-embedded="1"] .fs-nav, html[data-embedded="1"] .fs-nav { display: none; }

.fs-hint { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--fs-border); background: var(--fs-hint-bg); color: var(--fs-text-2); font-size: 12px; }

.fs-body { display: grid; grid-template-columns: 280px 1fr; flex: 1; min-height: 0; }
.fs-body.with-detail { grid-template-columns: 280px 1fr 340px; }
@media (max-width: 1024px) { .fs-body.with-detail { grid-template-columns: 280px 1fr; } .fs-body.with-detail .fs-detail { grid-column: 1 / -1; max-height: 320px; border-top: 1px solid var(--fs-border); } }
@media (max-width: 760px) { .fs-body, .fs-body.with-detail { grid-template-columns: 1fr; } .fs-chats { max-height: 220px; border-bottom: 1px solid var(--fs-border); } }

/* —— 左栏：会话列表 —— */
.fs-chats { border-right: 1px solid var(--fs-border); background: var(--fs-bg); overflow: auto; display: flex; flex-direction: column; min-height: 0; }
.fs-chats-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; font-size: 17px; font-weight: 600; color: var(--fs-text); position: sticky; top: 0; background: var(--fs-bg); z-index: 1; }
.fs-chats-head .fs-nav { margin-left: auto; display: flex; gap: 8px; }
.fs-chats-head .fs-nav a { color: var(--fs-text-3); text-decoration: none; font-size: 12px; font-weight: 400; }
.fs-chats-head .fs-nav a:hover { color: var(--fs-blue); }
.fs-chats-head button { border: 0; background: none; color: var(--fs-text-3); font-size: 12px; font-weight: 400; cursor: pointer; padding: 2px 4px; }
.fs-chats-head button:hover { color: var(--fs-blue); }

.fs-chat { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; cursor: pointer; border-radius: 8px; margin: 0 6px; width: calc(100% - 12px); box-sizing: border-box; }
.fs-chat:hover { background: var(--fs-hover); }
.fs-chat.on { background: var(--fs-blue-bg); }
.fs-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-chat-top { display: flex; align-items: center; gap: 6px; }
.fs-chat-top b { font-size: 14px; font-weight: 500; color: var(--fs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.fs-chat-top time { margin-left: auto; flex: none; font-size: 11px; color: var(--fs-text-3); }
.fs-chat-sub { font-size: 12px; color: var(--fs-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-watch { flex: none; font-style: normal; color: var(--fs-blue); background: var(--fs-blue-bg); border-radius: 4px; padding: 0 4px; font-size: 10.5px; }

/* 彩色圆头像（名字首字 + 哈希配色，处处复用） */
.fs-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; user-select: none; }

/* —— 中栏：消息流 —— */
.fs-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--fs-bg); }
.fs-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--fs-border); }
.fs-thread-head b { font-size: 16px; font-weight: 600; color: var(--fs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-poll { color: var(--fs-text-3); font-size: 12px; }
.fs-thread-head button { margin-left: auto; border: 1px solid var(--fs-border); background: var(--fs-bg); color: var(--fs-text-2); border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; flex: none; }
.fs-thread-head button:hover { border-color: var(--fs-blue); color: var(--fs-blue); }

.fs-messages { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.fs-empty { color: var(--fs-text-3); text-align: center; margin: 24px 0; font-size: 13px; }
.fs-more { align-self: center; border: 0; background: none; color: var(--fs-blue); padding: 2px 10px; font-size: 12px; cursor: pointer; }

.fs-msg { display: flex; gap: 10px; max-width: 860px; }
.fs-msg-main { min-width: 0; flex: 1; }
.fs-meta { font-size: 12px; color: var(--fs-text-2); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.fs-meta time { color: var(--fs-text-3); font-size: 11px; }
.fs-bot-tag { font-style: normal; color: var(--fs-blue); background: var(--fs-blue-bg); border-radius: 4px; padding: 0 5px; font-size: 10.5px; }
.fs-tag-recalled { font-style: normal; font-size: 11px; color: var(--fs-text-3); }

.fs-bubble { display: inline-block; max-width: 100%; box-sizing: border-box; background: var(--fs-bubble); border-radius: 2px 8px 8px 8px; padding: 8px 12px; font-size: 14px; line-height: 1.6; color: var(--fs-text); white-space: pre-wrap; word-break: break-word; }
.fs-msg.recalled .fs-bubble { text-decoration: line-through; color: var(--fs-text-3); }
.fs-msg.has-quote { cursor: pointer; }
.fs-msg.has-quote:hover .fs-bubble { background: var(--fs-bubble-hover); }
.fs-msg.picked .fs-bubble { box-shadow: 0 0 0 1.5px var(--fs-blue); }

/* 群系统提示（谁拉谁进群、改群名）：仿飞书/微信，居中一行灰字，不配头像不占气泡。
   它不是谁「说的话」——摆成消息气泡会被当成有成员在刷屏。 */
.fs-msg.fs-sys { display: block; text-align: center; max-width: none; }
.fs-msg.fs-sys > span { display: inline-block; padding: 3px 10px; border-radius: 10px;
  background: var(--fs-hint-bg); color: var(--fs-text-3); font-size: 12px; line-height: 1.6; }
.fs-msg.fs-sys time { margin-left: 6px; font-size: 11px; opacity: .8; }
.fs-at { color: var(--fs-blue); }

/* 引用行（仿飞书：气泡顶部一行灰字带竖线，单行截断） */
.fs-quote { display: block; border-left: 2px solid var(--fs-quote-bar); padding: 1px 8px; margin-bottom: 6px; font-size: 12px; color: var(--fs-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; }

.fs-task { margin-top: 6px; font-size: 12px; color: var(--fs-green); background: var(--fs-green-bg); border-radius: 4px; padding: 2px 8px; display: inline-block; }
/* 老板 10-04：可视化——任务号旁边挂一个中文状态牌（shared/viz.css 的 sqv-pill），窄屏自动换行 */
.fs-task-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.fs-task-row .fs-task { margin-top: 0; }
.fs-empty.fs-empty-viz { margin: 8px 0; }
.fs-chats .sqv-empty { padding: 20px 12px; }
.fs-groups-sum .sqv-pill { margin-left: 4px; }

/* —— 右栏：详情页（引用链） —— */
.fs-detail { border-left: 1px solid var(--fs-border); background: var(--fs-bg); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
/* 没点开引用链时必须真的不显示。
   HTML 上写了 hidden，但浏览器内置的 [hidden]{display:none} 是最低优先级，
   被上面那条 .fs-detail{display:flex} 盖掉了 —— 结果面板一直在，
   而此时 .fs-body 只有两列（没有 with-detail），它就被自动排到第二行第一列，
   变成左下角一个 280px 宽的空盒子（用户 2026-09-22 报的就是这个）。
   同一个坑 styles.css 的 .nav[hidden] 也踩过，办法一样：把 [hidden] 显式写回来。 */
.fs-detail[hidden] { display: none; }
.fs-detail-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--fs-border); }
.fs-detail-head b { font-size: 15px; font-weight: 600; flex: 1; }
.fs-detail-head button { border: 0; background: none; color: var(--fs-text-3); font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1; }
.fs-detail-head button:hover { color: var(--fs-text); }

.fs-detail-body { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.fs-d-item { display: flex; gap: 10px; padding: 8px; border-radius: 8px; }
.fs-d-item.on { background: var(--fs-blue-bg-soft); }
.fs-d-item .fs-avatar { width: 32px; height: 32px; font-size: 13px; }
.fs-d-main { min-width: 0; flex: 1; }
.fs-d-text { font-size: 13px; line-height: 1.6; color: var(--fs-text); white-space: pre-wrap; word-break: break-word; }
.fs-d-item.recalled .fs-d-text { text-decoration: line-through; color: var(--fs-text-3); }

/* —— 附件真身：图片 / 语音 / 视频 / 文件 —— */
.fs-media-img { display: inline-block; margin: 4px 6px 0 0; vertical-align: top; }
.fs-media-img img { max-width: 220px; max-height: 220px; border-radius: 8px; border: 1px solid var(--fs-border-light); display: block; background: var(--fs-bg); }
.fs-media-img:hover img { border-color: var(--fs-blue); }
.fs-d-text .fs-media-img img { max-width: 140px; max-height: 140px; }
.fs-media-audio { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; max-width: 100%; }
.fs-media-audio audio { height: 32px; max-width: 220px; }
.fs-media-audio i, .fs-media-file i { font-style: normal; color: var(--fs-text-3); font-size: 12px; }
.fs-media-audio a { font-size: 12px; color: var(--fs-blue); text-decoration: none; white-space: nowrap; }
.fs-media-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; border: 1px solid var(--fs-border); background: var(--fs-bg); border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--fs-blue); text-decoration: none; max-width: 100%; overflow: hidden; }
.fs-media-file:hover { background: var(--fs-hover); }
.fs-media-video { max-width: 260px; max-height: 220px; border-radius: 8px; margin-top: 4px; display: block; }

/* —— 超长文本折叠：默认收起，点「展开全文」放开 —— */
.fs-bubble.clamped, .fs-d-text.clamped { max-height: 140px; overflow: hidden; position: relative; }
.fs-bubble.clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(transparent, var(--fs-bubble)); }
.fs-d-text.clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(transparent, var(--fs-bg)); }
.fs-d-item.on .fs-d-text.clamped::after { background: linear-gradient(transparent, var(--fs-blue-bg-soft)); }
.fs-expand { border: 0; background: none; color: var(--fs-blue); font-size: 12px; cursor: pointer; padding: 2px 0 0; display: block; }

/* —— 提问群设置（默认折叠，展开才改；用户 2026-09-21 要求并进本页，不另开页面） ——
   色值同样只用 --fs-* 段（见本文件顶部说明），不引入新的裸色值。 */
.fs-groups { flex: none; border-bottom: 1px solid var(--fs-border); background: var(--fs-bg); }
.fs-groups > summary { display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; list-style: none; user-select: none; }
.fs-groups > summary::-webkit-details-marker { display: none; }
/* 自绘三角：展开态旋转，折叠/展开的状态要一眼看得出 */
.fs-groups > summary::before { content: "▸"; color: var(--fs-text-3); font-size: 11px; transition: transform .15s; }
.fs-groups[open] > summary::before { transform: rotate(90deg); }
.fs-groups > summary:hover { background: var(--fs-hover); }
.fs-groups > summary b { font-size: 14px; font-weight: 600; color: var(--fs-text); }
.fs-groups-sum { margin-left: auto; font-size: 12px; color: var(--fs-text-3); }
.fs-groups[open] .fs-groups-sum { color: var(--fs-blue); }

.fs-groups-body { padding: 0 16px 12px; max-height: 46vh; overflow: auto; }
.fs-groups-help { margin: 0 0 10px; padding: 10px 12px; border-radius: 6px; background: var(--fs-blue-bg-soft); color: var(--fs-text-2); font-size: 12px; line-height: 1.9; }
.fs-groups-help b { color: var(--fs-text); font-weight: 600; }
.fs-groups-warn { color: var(--fs-danger); }
.fs-groups-error { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: var(--fs-hint-bg); color: var(--fs-text-2); font-size: 12px; }
.fs-groups-foot { margin: 10px 0 0; font-size: 11.5px; color: var(--fs-text-3); }
.fs-groups-foot button { margin-left: 6px; font: inherit; font-size: 11.5px; color: var(--fs-blue); background: none; border: 1px solid var(--fs-border); border-radius: 6px; padding: 1px 8px; cursor: pointer; }
/* 机器人能看到哪些群（9-28） */
#fs-vis[hidden] { display: none; }
.fs-vis-h { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--fs-text); }
.fs-vis-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.fs-vis-table th, .fs-vis-table td { padding: 6px 8px; border-bottom: 1px solid var(--fs-border-light); text-align: left; vertical-align: top; color: var(--fs-text-2); }
.fs-vis-table th { color: var(--fs-text-3); font-weight: 600; white-space: nowrap; }
.fs-vis-table td:first-child { color: var(--fs-text); }
.fs-vis-table .n { text-align: right; white-space: nowrap; }
.fs-vis-tag { font-size: 10.5px; color: var(--fs-text-3); border: 1px solid var(--fs-border); border-radius: 4px; padding: 0 4px; margin-left: 4px; white-space: nowrap; }
.fs-vis-zero { color: var(--fs-text-3); }
.fs-vis-store { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.fs-vis-store input { accent-color: var(--fs-blue); }

.fs-group { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--fs-border-light); margin-bottom: 6px; }
.fs-group.on { border-color: var(--fs-blue); background: var(--fs-blue-bg-soft); }
.fs-group-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-group-main b { font-size: 14px; font-weight: 500; color: var(--fs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-group-main small { font-size: 11px; color: var(--fs-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-group-gone { font-style: normal; font-size: 10.5px; color: var(--fs-danger); background: var(--fs-hint-bg); border-radius: 4px; padding: 0 4px; align-self: flex-start; }

/* 触发方式三选一：各行等宽对齐成三列，扫一眼就知道哪个群是哪档 */
.fs-group-modes { flex: none; display: flex; align-items: center; }
.fs-group-opt { flex: none; width: 104px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fs-text-2); cursor: pointer; }
.fs-group-opt input { width: 15px; height: 15px; accent-color: var(--fs-blue); cursor: pointer; margin: 0; }
.fs-group-opt input:disabled { cursor: not-allowed; }
.fs-group-opt input:disabled + span { opacity: .55; }
.fs-group-opt input:checked + span { color: var(--fs-text); font-weight: 500; }
/* 「直接触发」是三档里唯一会把整群的话都转出去的，选中时标红提醒，别让它看起来和别的一样平常 */
.fs-group-opt input[value="direct"]:checked + span { color: var(--fs-danger); }
@media (max-width: 760px) {
  .fs-group { flex-wrap: wrap; }
  .fs-group-main { flex-basis: 100%; }
  .fs-group-modes { flex-wrap: wrap; }
  .fs-group-opt { width: auto; margin-right: 14px; }
}