/* assets/css/components/mock.css — 界面示意：用纯 CSS 画出产品工作台的骨架。
   全站不放任何产品截图，所有"界面"都由这套组件拼出来——它跟随令牌换色、
   在高分屏下永远清晰、体积以字节计，且不涉及第三方界面的复制。
   刻意只画骨架（列表、气泡、标签、进度），不画细节文字，因为读者要看的是结构不是文案。 */

.mock{
  background:var(--surface); border:1px solid var(--line);
  overflow:hidden;
}

/* ============ 顶栏 ============ */
.mock-bar{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.mock-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-dark); flex:none; }
.mock-title{ margin-left:8px; font-size:12.5px; color:var(--muted); }
.mock-tag{
  margin-left:auto; padding:2px 8px; background:var(--cinnabar-s); color:var(--cinnabar);
  font-size:11.5px; font-weight:500;
}
.mock-tag--ok{ background:var(--ok-s); color:var(--ok-on-light); }

/* ============ 主体：左右两栏 ============ */
.mock-body{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); min-height:210px; }
.mock-side{ border-right:1px solid var(--line); padding:12px 0; }
.mock-main{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; }

/* ============ 会话行 ============ */
.mock-row{ display:flex; align-items:center; gap:9px; padding:9px 14px; }
.mock-row.is-active{ background:var(--surface-2); box-shadow:inset 3px 0 0 var(--cinnabar); }
.mock-avatar{ width:22px; height:22px; background:var(--line); flex:none; }
.mock-row.is-active .mock-avatar{ background:var(--ink); }
.mock-lines{ flex:1; min-width:0; }
.mock-line{ height:7px; background:var(--line); }
.mock-line + .mock-line{ margin-top:6px; }
.mock-line--w60{ width:60%; }
.mock-line--w80{ width:80%; }
.mock-line--w40{ width:40%; }
.mock-row.is-active .mock-line:first-child{ background:var(--line-dark); }

/* ============ 对话气泡 ============ */
.bubble{ max-width:82%; padding:9px 12px; font-size:12.5px; line-height:1.6; }
.bubble--in{ background:var(--surface-2); border:1px solid var(--line); color:var(--muted); }
.bubble--ai{ background:var(--ink); color:#fff; align-self:flex-end; }
.bubble--ai b{ color:#fff; font-weight:500; }
.bubble-meta{ font-size:11.5px; color:var(--muted); }
.bubble-meta--right{ align-self:flex-end; }

/* 输入中：三个点依次亮 */
.mock-typing{ display:inline-flex; gap:3px; vertical-align:middle; }
.mock-typing i{ width:4px; height:4px; background:currentColor; opacity:.35; }
@media (prefers-reduced-motion: no-preference){
  .mock-typing i{ animation:typing 1.2s ease-in-out infinite; }
  .mock-typing i:nth-child(2){ animation-delay:.2s; }
  .mock-typing i:nth-child(3){ animation-delay:.4s; }
  @keyframes typing{ 0%,60%,100%{ opacity:.3; } 30%{ opacity:1; } }
}

/* ============ 底部：知识命中提示 ============ */
.mock-foot{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-top:1px solid var(--line); background:var(--surface-2);
  font-size:12px; color:var(--muted);
}
.mock-foot .tag{ padding:2px 8px; font-size:11.5px; }

/* ============ 窄屏：示意图收成单栏，只留对话 ============ */
@media (max-width:680px){
  .mock-side{ display:none; }
  .mock-body{ grid-template-columns:1fr; min-height:170px; }
}