/*
 * chat-news.css
 * Token-based styles for news/summary/analysis chunks in AI chat output.
 *
 * Actual DOM class names (per app.js SSE handlers):
 *   - summary_chunk  → .ai-summary-typing  (later .typing-done)
 *   - analysis_chunk → .ai-analysis-typing (later .typing-done)
 *   - news_chunk     → .news-header-bar + .news-results-content (on .ai-analysis-typing container)
 *   - News feed card → .news-card / .news-card-title / .news-card-summary / .news-card-time
 */

.message-content .ai-summary-typing,
.message-content .ai-analysis-typing,
.message-content .news-results-content,
.message-content .news-card {
  font-family: var(--font-reading);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-3) 0;
  box-shadow: var(--shadow-xs);
}

/* News header bar sits flush above .news-results-content */
.message-content .news-header-bar {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 0 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.message-content .news-header-bar + .news-results-content {
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-top: 0;
}

.message-content .news-header-title {
  font-size: var(--type-h2);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.message-content .news-card-title {
  font-size: var(--type-h2);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.message-content .news-card-summary {
  color: var(--color-text-secondary);
}

.message-content .news-card-time {
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.message-content .news-card + .news-card {
  margin-top: var(--space-3);
}