/* Chat page specific styles (keeps consistency with base.css) */
.hero-visual img { border-radius: var(--radius-lg); }

.feature-card ul { padding-left: 1rem; color: var(--color-text-muted); }

/* Chat demo component */
.chat-demo { display: grid; grid-template-rows: 1fr auto; min-height: 360px; }
.message-list { display: grid; gap: 12px; max-height: 420px; overflow-y: auto; padding: 4px; margin: 0; }
.message { display: flex; }
.message__bubble { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); padding: 10px 14px; border-radius: 14px; max-width: 70ch; box-shadow: var(--shadow-xs); }
.message--me { justify-content: flex-end; }
.message--me .message__bubble { background: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface-2)); border-color: color-mix(in oklab, var(--color-primary) 35%, var(--color-border)); }

.chat-input { display: grid; gap: 10px; margin-top: var(--space-16); }
.chat-actions { display: flex; justify-content: flex-start; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

/* Emoji panel */
.emoji-panel { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); padding: 10px; box-shadow: var(--shadow-sm); }
.emoji-group { display: flex; flex-wrap: wrap; gap: 8px; }
.emoji-btn { padding: 8px 10px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--color-border); }
.emoji-btn:hover { background: rgba(255,255,255,0.06); }

/* Minor layout tweaks */
#demo-title { scroll-margin-top: 96px; }

@media (max-width: 900px) {
  .chat-demo { min-height: 300px; }
}