/* ═══════════════════════════════════════════════════════
   WatchFlow — 全局样式
   ═══════════════════════════════════════════════════════ */

:root {
  --wf-card-radius: 0.75rem;
  --wf-transition: 0.2s ease;
}

/* ─── 卡片 ───────────────────────────────────────────── */
.task-card {
  border-radius: var(--wf-card-radius);
  transition: transform var(--wf-transition), box-shadow var(--wf-transition);
}

.task-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12) !important;
}

.last-content-preview {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── diff 块 ─────────────────────────────────────────── */
.diff-block {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow-y: auto;
}

.diff-block .line-add  { color: #4ec9b0; }
.diff-block .line-del  { color: #f44747; }

/* ─── 结果预览 ────────────────────────────────────────── */
.result-pre {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem;
  max-height: 500px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.85rem;
}

/* ─── 时间线 ──────────────────────────────────────────── */
.timeline .card {
  border-radius: var(--wf-card-radius);
}

/* ─── Navbar ─────────────────────────────────────────── */
.navbar-brand {
  letter-spacing: 0.5px;
}

/* ─── Markdown prose 区域 ─────────────────────────────── */
.prose h1, .prose h2, .prose h3, .prose h4 { margin-top: 1rem; margin-bottom: .5rem; font-weight: 600; }
.prose p  { margin-bottom: .75rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: .75rem; }
.prose code { background: #f0f0f0; padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.88em; }
.prose pre  { background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.85rem; }
.prose blockquote { border-left: 3px solid #dee2e6; padding-left: 1rem; color: #6c757d; }
.prose a { color: var(--bs-primary); }
.prose img { max-width: 100%; border-radius: 0.5rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.prose th, .prose td { border: 1px solid #dee2e6; padding: .4rem .75rem; }
.prose th { background: #f8f9fa; }

/* ─── 响应式辅助 ──────────────────────────────────────── */
@media (max-width: 576px) {
  .table-responsive th, .table-responsive td {
    font-size: 0.82rem;
  }
}