/*!
 * design.css — NORINCO 穿透式监管助手 V2.0 · 共享组件层
 *
 * 职责: 按钮 / 区块 / 输入 / 表格 / 徽章 / 骨架 / 聊天 / 步骤条 / 空状态 / 入场
 * 规则: 所有值来自 tokens.css var(), 禁止 hardcode HEX (语义色配对除外)
 *
 * V2.0 变化:
 *   - 阴影仅 2 级 (subtle / float), 数据表面不再有阴影
 *   - 卡片 hover 不再位移, 改为 border-color 微变 (更克制)
 *   - 圆角全部对齐 4pt 阶梯
 *   - 按钮尺寸微调
 */

/* ================================================================
 * 安全区
 * ================================================================ */
body {
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
}

/* ================================================================
 * 排版预设 (V2.0 精简为 7 个实际用的类)
 * ================================================================ */
.text-display { font-size:var(--text-display); font-weight:700; line-height:1.12; letter-spacing:-0.03em; }
.text-xl { font-size:var(--text-xl); font-weight:600; line-height:1.25; letter-spacing:-0.02em; }
.text-lg { font-size:var(--text-lg); font-weight:600; line-height:1.35; letter-spacing:-0.01em; }
.text-base { font-size:var(--text-base); font-weight:400; line-height:1.6; }
.text-sm { font-size:var(--text-sm); font-weight:400; line-height:1.5; color:var(--color-ink-3); }
.text-metric { font-size:var(--text-metric); font-weight:700; line-height:1.08; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.eyebrow { font-size:var(--text-xs); font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:var(--color-ink-3); }

/* ================================================================
 * 按钮 (V2.0: 统一尺寸 / 圆角 / 极小阴影)
 * ================================================================ */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    border:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600;
    border-radius:var(--radius-sm); padding:8px 16px;
    transition: all var(--duration-fast) var(--ease-out-expo);
    text-decoration:none; line-height:1.4;
}
.btn:active { transform:scale(0.97); }
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none; }

.btn-primary {
    background:var(--color-accent); color:#fff;
    box-shadow: 0 2px 8px -2px rgba(var(--shadow-tint-rgb), 0.28);
}
.btn-primary:hover { background:var(--color-accent-hover); }
.btn-primary:active { transform:scale(0.96); }

.btn-secondary {
    background:var(--color-surface); color:var(--color-ink-2);
    border:1px solid var(--color-border); font-weight:500;
}
.btn-secondary:hover { border-color:var(--color-accent); color:var(--color-accent); }

.btn-ghost {
    background:transparent; color:var(--color-ink-2); border:1px solid transparent;
    padding:7px 12px; font-size:12px; font-weight:500;
}
.btn-ghost:hover { color:var(--color-accent); background:var(--color-accent-soft); border-color:var(--color-accent-soft); }

.btn-success { background:var(--color-success); color:#fff; }
.btn-success:hover { filter:brightness(1.06); }
.btn-danger { background:var(--color-danger); color:#fff; }
.btn-danger:hover { filter:brightness(1.06); }

/* ================================================================
 * 区块 (替代旧 .card: 只有 border, 无阴影)
 * ================================================================ */
.block {
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-md); padding:var(--space-4);
    transition: border-color var(--duration-fast);
}
.block-interactive { cursor:pointer; }
.block-interactive:hover { border-color:var(--color-border-2); }
.block-interactive:active { border-color:var(--color-accent); }

/* 保留 .card 作为别名, 但移除阴影和 hover 位移 */
.card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-6); }
.card-interactive { cursor:pointer; }
.card-interactive:hover { border-color:var(--color-border-2); }

/* ================================================================
 * 输入
 * ================================================================ */
.input {
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-sm); padding:8px 12px; font-size:var(--text-base);
    font-family:inherit; color:var(--color-ink);
    transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
    outline:none;
}
.input::placeholder { color:var(--color-ink-4); }
.input:focus { border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-accent-soft); }
select.input {
    cursor:pointer; appearance:none; -webkit-appearance:none; padding-right:28px;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat:no-repeat; background-position:right 8px center; background-size:14px;
}

/* ================================================================
 * 徽章 / Pills
 * ================================================================ */
.badge {
    display:inline-flex; align-items:center; gap:3px; padding:2px 8px;
    border-radius:var(--radius-xs); font-size:var(--text-xs); font-weight:600;
    letter-spacing:0.01em; white-space:nowrap;
}
.badge-success { background:var(--color-success-bg); color:var(--color-success); }
.badge-warning { background:var(--color-warning-bg); color:var(--color-warning); }
.badge-danger  { background:var(--color-danger-bg);  color:var(--color-danger); }
.badge-accent  { background:var(--color-accent-soft); color:var(--color-accent); }
.badge-neutral { background:var(--color-surface-2); color:var(--color-ink-3); border:1px solid var(--color-border); }

/* ================================================================
 * 表格
 * ================================================================ */
.table { width:100%; border-collapse:collapse; }
.table th {
    font-size:var(--text-xs); font-weight:600; color:var(--color-ink-3);
    text-align:left; padding:10px 12px; border-bottom:1px solid var(--color-border);
    position:sticky; top:0; background:var(--color-surface); z-index:1; white-space:nowrap;
}
.table td { padding:10px 12px; font-size:var(--text-sm); color:var(--color-ink-2); border-bottom:1px solid var(--color-border); font-variant-numeric:tabular-nums; }
.table tbody tr { transition:background var(--duration-fast); }
.table tbody tr:hover td { background:var(--color-surface-2); }
.table-wrap { overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); }

/* ================================================================
 * 骨架屏
 * ================================================================ */
.skeleton { position:relative; overflow:hidden; background:var(--color-surface-2); border-radius:4px; color:transparent !important; user-select:none; }
.skeleton::after {
    content:''; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation:shimmer 1.5s infinite;
}
@keyframes shimmer { 100% { transform:translateX(100%); } }

/* ================================================================
 * 入场动效 (IntersectionObserver 添加 .revealed)
 * ================================================================ */
.reveal { opacity:0; transform:translateY(8px); transition: opacity 0.25s var(--ease-out-expo), transform 0.25s var(--ease-out-expo); }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* ================================================================
 * 空状态
 * ================================================================ */
.empty-state { text-align:center; padding:var(--space-12) var(--space-4); color:var(--color-ink-4); }
.empty-state i { font-size:40px; margin-bottom:var(--space-4); opacity:0.3; display:block; }
.empty-state-text { font-size:var(--text-base); color:var(--color-ink-3); }
.empty-state-hint { font-size:var(--text-sm); margin-top:var(--space-2); opacity:0.7; }

/* ================================================================
 * 聊天组件
 * ================================================================ */
.chat-msg { max-width:85%; padding:10px 14px; font-size:var(--text-base); line-height:1.6; word-break:break-word; }
.chat-msg.user { align-self:flex-end; background:var(--color-accent); color:#fff; border-radius:14px 14px 4px 14px; }
.chat-msg.assistant { align-self:flex-start; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-ink); border-radius:14px 14px 14px 4px; box-shadow:var(--shadow-subtle); }
.chat-msg.assistant .sources { font-size:var(--text-xs); color:var(--color-ink-4); margin-top:8px; border-top:1px solid var(--color-border); padding-top:6px; line-height:1.5; }
.chat-msg.error { background:var(--color-danger-bg); color:var(--color-danger); border:1px solid var(--color-danger); border-radius:10px; }

/* 流式光标 */
.stream-cursor { display:inline-block; width:6px; height:14px; margin-left:2px; vertical-align:-2px; background:var(--color-accent); border-radius:1px; animation:cursor-blink 0.8s steps(2) infinite; }
@keyframes cursor-blink { 50% { opacity:0; } }

/* 打字指示器 */
.typing-indicator { display:inline-flex; gap:4px; align-items:center; padding:4px 2px; }
.typing-indicator span { width:5px; height:5px; border-radius:50%; background:var(--color-ink-4); animation:typing-pulse 1.2s infinite ease-in-out; }
.typing-indicator span:nth-child(2) { animation-delay:0.15s; }
.typing-indicator span:nth-child(3) { animation-delay:0.3s; }
@keyframes typing-pulse { 0%,60%,100% { opacity:0.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-2px); } }

/* AI 导航提示按钮 */
.nav-hints { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px solid var(--color-border); }
.nav-hint-btn {
    padding:4px 10px; border-radius:var(--radius-xs); border:1px solid var(--color-accent-soft);
    background:var(--color-accent-soft); color:var(--color-accent); font-size:var(--text-xs);
    font-weight:600; cursor:pointer; transition:all var(--duration-fast);
    display:inline-flex; align-items:center; gap:4px;
}
.nav-hint-btn:hover { background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.nav-hint-btn:active { transform:scale(0.96); }

/* 脉冲高亮 */
@keyframes highlight-pulse {
    0%,100% { box-shadow:0 0 0 0 var(--color-accent-soft); }
    50% { box-shadow:0 0 0 8px transparent; }
}
.highlight-pulse { animation:highlight-pulse 2s var(--ease-out-expo); }

/* ================================================================
 * 步骤条 (admin 上传)
 * ================================================================ */
.step-bar { display:flex; align-items:flex-start; justify-content:center; gap:0; margin-bottom:var(--space-6); padding:0; }
.step { display:flex; align-items:center; gap:8px; position:relative; }
.step-dot {
    width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:var(--text-xs); font-weight:700; border:2px solid var(--color-border);
    background:var(--color-surface); color:var(--color-ink-4); transition:all var(--duration-fast);
}
.step.active .step-dot { border-color:var(--color-accent); background:var(--color-accent); color:#fff; }
.step.done .step-dot { border-color:var(--color-success); background:var(--color-success); color:#fff; }
.step-label { font-size:var(--text-xs); color:var(--color-ink-4); white-space:nowrap; }
.step.active .step-label { color:var(--color-accent); font-weight:600; }
.step.done .step-label { color:var(--color-success); }
.step-connector { width:32px; height:0; border-top:2px solid var(--color-border); align-self:center; margin:0 4px; }
.step.done + .step-connector { border-color:var(--color-success); }

/* ================================================================
 * 分隔线工具
 * ================================================================ */
.hr { border:none; border-top:1px solid var(--color-border); margin:var(--space-6) 0; }

/* Toast (snackbar) */
.toast {
    position:fixed; bottom:var(--space-4); left:50%; transform:translateX(-50%); z-index:var(--z-toast);
    padding:10px 20px; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:500;
    color:#fff; background:var(--color-ink); box-shadow:var(--shadow-float);
    transition:all var(--duration-base); max-width:calc(100vw - 32px);
}
.toast.success { background:var(--color-success); }
.toast.error { background:var(--color-danger); }
.toast.hidden { opacity:0; transform:translateX(-50%) translateY(20px); pointer-events:none; }

/* ================================================================
 * Tab 栏
 * ================================================================ */
.tab-bar { position:relative; display:flex; gap:0; border-bottom:1px solid var(--color-border); padding-bottom:0; }
.tab {
    position:relative; padding:10px 16px; font-size:var(--text-sm); font-weight:500;
    color:var(--color-ink-3); background:none; border:none; cursor:pointer;
    transition:color var(--duration-fast); border-radius:0; font-family:inherit;
    min-height:44px; touch-action:manipulation;
}
.tab:hover { color:var(--color-ink-2); }
.tab.active { color:var(--color-accent); font-weight:600; }
.tab-indicator {
    position:absolute; bottom:-1px; height:2px; border-radius:1px;
    background:var(--color-accent); transition:left var(--duration-base) var(--ease-out-expo), width var(--duration-base) var(--ease-out-expo);
}

/* ================================================================
 * Flow stat pill (流程节点摘要)
 * ================================================================ */
.flow-stat-pill {
    display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
    border-radius:var(--radius-xs); background:var(--color-surface-2);
    border:1px solid var(--color-border); font-size:var(--text-xs);
    color:var(--color-ink-3); font-weight:500;
}

/* ================================================================
 * implies-reduced-motion (全局, 不覆盖组件自身) 
 * ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  .skeleton::after { animation:none; }
  .reveal { opacity:1; transform:none; }
}