/* ==========================================================================
   S8 客服系统样式（聊天 / 工作台 / 工单 / FAQ）
   ========================================================================== */

.cs-wrap {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 12px;
  height: calc(100vh - 150px);
  min-height: 520px;
}
.cs-wrap.agent { grid-template-columns: 236px minmax(0, 1fr) 300px; }

/* ---------- 左栏 ---------- */
.cs-rail {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; min-height: 0;
}
.cs-rail-h {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); background: #fbfcfe; flex-wrap: wrap;
}
.cs-rail-h b { font-size: 13px; }
.cs-rail-h .btn { margin-left: auto; }
.cs-rail-list { flex: 1; overflow-y: auto; min-height: 0; }
.cs-rail-foot { border-top: 1px solid var(--line); padding: 10px 12px; background: #fbfcfe; }
.cs-hint { font-size: 11px; color: var(--faint); line-height: 1.7; }
.cs-hint b { color: var(--muted); font-weight: 600; }

.cs-conv {
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; border-left: 3px solid transparent; transition: background .15s;
}
.cs-conv:hover { background: #f7fafd; }
.cs-conv.on { background: #eef4fb; border-left-color: var(--navy); }
.cs-conv-t { font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.cs-conv-s { font-size: 11.5px; color: var(--muted); margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-conv-m { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--faint); }
.cs-dot { width: 6px; height: 6px; border-radius: 50%; background: #cfd8e3; display: inline-block; }
.cs-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(164, 106, 18, .12); }

.cs-tabs { display: flex; gap: 4px; width: 100%; margin-top: 6px; }
.cs-tab {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  font-size: 11.5px; padding: 3px 8px; border-radius: 6px;
}
.cs-tab:hover { background: #eef2f8; }
.cs-tab.on { background: var(--navy); color: #fff; }
.cs-tabs.big { margin: 0; width: auto; }
.cs-tabs.big .cs-tab { font-size: 12px; padding: 5px 11px; }
.cs-tabs.big .cs-tab.on { background: var(--navy); }

/* ---------- 中栏 ---------- */
.cs-panel {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; min-height: 0;
}
.cs-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); background: #fbfcfe; flex-wrap: wrap;
}
.cs-head b { font-size: 14px; }
.cs-head .spacer { flex: 1; }

.cs-msgs { flex: 1; overflow-y: auto; padding: 16px 16px 8px; background: #fafbfd; min-height: 0; }

.cs-msg { display: flex; gap: 9px; margin-bottom: 14px; align-items: flex-start; }
.cs-msg.mine { flex-direction: row-reverse; }
.cs-ava {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #fff; background: #8fa3b8;
}
.cs-ava.ai { background: linear-gradient(135deg, #2f8f83, #1f6f66); }
.cs-ava.agent { background: var(--navy); }
.cs-ava.member { background: #8b97a8; }
.cs-bubble {
  max-width: min(640px, 76%); background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px; box-shadow: 0 1px 2px rgba(16, 30, 48, .03);
}
.cs-msg.mine .cs-bubble { background: var(--navy); border-color: var(--navy); color: #fff; }
.cs-msg.mine.ai .cs-bubble { background: #f0f7f5; border-color: #cfe4de; color: var(--text); }
.cs-who {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px;
  color: var(--faint); margin-bottom: 3px; flex-wrap: wrap;
}
.cs-msg.mine .cs-who { color: rgba(255, 255, 255, .7); }
.cs-msg.mine.ai .cs-who { color: var(--faint); }
.cs-time { margin-left: auto; font-size: 10px; opacity: .8; }
.cs-body { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.72; }
.cs-body.typing::after { content: '▍'; color: var(--accent); animation: cs-blink 1s steps(2) infinite; }
@keyframes cs-blink { 50% { opacity: 0; } }

.cs-conf { font-size: 9.5px; padding: 1px 5px; border-radius: 4px; background: #e8f5ee; color: var(--green); }
.cs-conf.low { background: var(--amber-bg); color: var(--amber); }
.cs-flag { font-size: 9.5px; padding: 1px 5px; border-radius: 4px; background: var(--red-bg); color: var(--red); }

.cs-sys {
  text-align: center; font-size: 11px; color: var(--faint);
  margin: 8px 0 14px; padding: 4px 10px;
}
.cs-sys::before { content: '· '; }
.cs-sys::after { content: ' ·'; }

.cs-empty { text-align: center; color: var(--faint); font-size: 12px; padding: 50px 10px; }
.cs-empty-i { font-size: 26px; opacity: .5; margin-bottom: 4px; }

/* 引用与订单卡 */
.cs-cites { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.cs-cites summary {
  font-size: 11px; color: var(--muted); cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.cs-cites summary::-webkit-details-marker { display: none; }
.cs-cites summary::before { content: '▸'; font-size: 9px; transition: transform .15s; }
.cs-cites[open] summary::before { transform: rotate(90deg); }
.cs-cite {
  display: flex; flex-direction: column; gap: 1px; margin-top: 6px;
  padding: 6px 8px; background: #f6f8fb; border-radius: 6px; border-left: 2px solid #c3d3e2;
}
.cs-cite b { font-size: 11.5px; color: var(--navy); }
.cs-cite span { font-size: 11px; color: var(--muted); white-space: pre-wrap; }

.cs-order {
  display: block; margin-top: 8px; border: 1px solid #cfe0ee; border-radius: 8px;
  background: #f7fbff; padding: 8px 10px; color: var(--text);
}
.cs-order:hover { border-color: #a9c8e0; background: #fff; }
.cs-order-h { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cs-order-h b { font-family: var(--mono); color: var(--navy); }
.cs-order-b { display: flex; gap: 14px; font-size: 10.5px; color: var(--muted); margin-top: 3px; flex-wrap: wrap; }

.cs-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cs-acts .btn { font-size: 11.5px; padding: 4px 10px; }

/* 输入区 */
.cs-quick { display: flex; gap: 6px; padding: 0 14px 8px; flex-wrap: wrap; }
.cs-chip {
  border: 1px solid #d6e0ec; background: #fff; color: var(--navy);
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px;
}
.cs-chip:hover { background: #eef4fb; border-color: #b9cde0; }
.cs-input {
  display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 12px;
  border-top: 1px solid var(--line); background: #fff;
}
.cs-input textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; line-height: 1.6; max-height: 140px; outline: none; background: #fcfdff;
}
.cs-input textarea:focus { border-color: #a9c4dc; background: #fff; box-shadow: 0 0 0 3px rgba(31, 78, 121, .07); }
.cs-input .btn { height: 34px; }

.cs-typing { display: flex; gap: 4px; padding: 6px 0 14px 38px; }
.cs-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #b7c4d3;
  animation: cs-bounce 1.1s infinite ease-in-out;
}
.cs-typing span:nth-child(2) { animation-delay: .15s; }
.cs-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cs-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- 右栏：客户 360 ---------- */
.cs-side {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow-y: auto;
}
.cs-side-in { padding: 12px; }
.cs-side-h { display: flex; align-items: center; gap: 9px; }
.cs-avatar {
  width: 34px; height: 34px; border-radius: 9px; background: #e6eef7; color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.cs-side-h b { font-size: 13px; }
.cs-side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0 4px; }
.cs-side-grid > div { background: #f7f9fc; border-radius: 7px; padding: 6px 8px; }
.cs-side-grid span { display: block; font-size: 10px; color: var(--faint); }
.cs-side-grid b { font-size: 12px; }
.cs-side-sec {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); margin: 14px 0 6px; display: flex; align-items: center; gap: 6px;
}
.cs-side-sec::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.cs-contact { padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.cs-contact b { font-size: 12px; margin-right: 6px; }
.cs-contact span { font-size: 10.5px; color: var(--faint); }
.cs-mini {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--line-soft); margin-bottom: 5px; color: var(--text); font-size: 11.5px;
}
.cs-mini:hover { background: #f7fafd; border-color: #d3dfeb; }
.cs-mini b { font-family: var(--mono); color: var(--navy); font-size: 11px; }
.cs-mini span:last-child { margin-left: auto; color: var(--muted); font-size: 10.5px; }
.cs-note { font-size: 10.5px; color: var(--faint); margin-top: 14px; line-height: 1.6; border-top: 1px solid var(--line-soft); padding-top: 8px; }

/* ---------- KPI 条 ---------- */
.cs-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cs-kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 13px; box-shadow: var(--shadow);
}
.cs-kpi span { display: block; font-size: 10.5px; color: var(--faint); }
.cs-kpi b { font-size: 21px; letter-spacing: -.02em; line-height: 1.3; }
.cs-kpi em { font-style: normal; display: block; font-size: 10.5px; color: var(--muted); }
.danger-text { color: var(--red); }
.ok-text { color: var(--green); }

/* ---------- 工单详情 ---------- */
.cs-ticket-msgs { max-height: 460px; overflow-y: auto; }
.cs-internal {
  background: var(--amber-bg); border: 1px solid #f0dcb8; border-left: 3px solid var(--gold);
  border-radius: 7px; padding: 8px 11px; margin: 10px 0; font-size: 12px; color: #6b4d12;
}
.cs-internal b { display: block; font-size: 10.5px; color: var(--amber); margin-bottom: 2px; }
.cs-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cs-check input { width: 14px; height: 14px; }
.cs-faq { border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.cs-csat-big { font-size: 26px; color: var(--gold); letter-spacing: 2px; }
.cs-csat-big span { color: #dde4ec; }
.cs-stars { display: flex; gap: 4px; }
.cs-stars button {
  border: none; background: none; font-size: 24px; color: #dde4ec; line-height: 1; padding: 0 2px;
}
.cs-stars button:hover, .cs-stars button.on { color: var(--gold); }

.cs-pick { max-height: 150px; overflow-y: auto; margin-top: 6px; }
.cs-pick-i {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px;
  border: 1px solid var(--line-soft); margin-bottom: 4px; cursor: pointer; font-size: 12px;
}
.cs-pick-i span { color: var(--faint); font-size: 11px; }
.cs-pick-i:hover { background: #f7fafd; }
.cs-pick-i.on { border-color: var(--navy); background: #eef4fb; }

.mb8 { margin-bottom: 8px; }
.mt4 { margin-top: 4px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1280px) {
  .cs-wrap.agent { grid-template-columns: 210px minmax(0, 1fr) 264px; }
  .cs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .cs-wrap, .cs-wrap.agent { grid-template-columns: 200px minmax(0, 1fr); height: auto; }
  .cs-side { display: none; }
  .cs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-msgs { min-height: 360px; }
}
@media (max-width: 780px) {
  .cs-wrap, .cs-wrap.agent { grid-template-columns: 1fr; }
  .cs-rail { max-height: 180px; }
  .cs-bubble { max-width: 86%; }
}

/* ---------- 跨语言：机器翻译标注 ----------
   译文当正文、原文折叠。视觉上要让客户一眼分清「谁说的话」和「这是翻译」，
   所以标注刻意做得轻：小字 + 虚线，不抢正文。 */
.cs-tr { margin-top: 4px; }
.cs-tr > summary {
  cursor: pointer; font-size: 11px; color: var(--muted);
  list-style: none; display: inline-flex; align-items: center; gap: 4px;
  border-bottom: 1px dashed var(--line); padding-bottom: 1px;
}
.cs-tr > summary::-webkit-details-marker { display: none; }
.cs-tr > summary::before { content: "文"; font-size: 10px; opacity: .6; }
.cs-orig {
  margin-top: 5px; padding: 6px 9px; border-left: 2px solid var(--line);
  background: rgba(0,0,0,.02); color: var(--muted); font-size: 12px;
  white-space: pre-wrap; border-radius: 0 4px 4px 0;
}
.cs-tr-note {
  margin-top: 4px; font-size: 11px; color: #b45309;
  background: #fef3c7; display: inline-block; padding: 1px 7px; border-radius: 10px;
}