/* ===== Grill to PRD — SPA Custom Styles ===== */

/* Scrollbar */
#chat-messages::-webkit-scrollbar,
#prd-content::-webkit-scrollbar {
  width: 6px;
}
#chat-messages::-webkit-scrollbar-track,
#prd-content::-webkit-scrollbar-track {
  background: transparent;
}
#chat-messages::-webkit-scrollbar-thumb,
#prd-content::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}

/* Chat input auto-grow */
#chat-input {
  transition: height 0.1s ease;
}

/* Typing dots animation */
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}
#typing-el .animate-bounce {
  animation: bounce 1.4s infinite ease-in-out;
}
#typing-el .animate-bounce:nth-child(2) { animation-delay: 0.2s; }
#typing-el .animate-bounce:nth-child(3) { animation-delay: 0.4s; }

/* Markdown via marked.js */
.markdown-body h1 { font-size: 1.75rem; font-weight: 800; margin: 1.5rem 0 0.75rem; color: #f1f5f9; }
.markdown-body h2 { font-size: 1.375rem; font-weight: 700; margin: 1.25rem 0 0.5rem; color: #e2e8f0; padding-bottom: 0.25rem; border-bottom: 1px solid #334155; }
.markdown-body h3 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.5rem; color: #cbd5e1; }
.markdown-body p { margin: 0.5rem 0; line-height: 1.7; color: #94a3b8; }
.markdown-body ul, .markdown-body ol { margin: 0.5rem 0; padding-left: 1.5rem; color: #94a3b8; }
.markdown-body li { margin: 0.25rem 0; }
.markdown-body code { background: #1e293b; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.8125rem; color: #f59e0b; }
.markdown-body pre { background: #0b1120; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 0.75rem 0; }
.markdown-body pre code { background: none; padding: 0; color: #e2e8f0; font-size: 0.8125rem; }
.markdown-body blockquote { border-left: 3px solid #ea580c; padding-left: 1rem; margin: 0.75rem 0; color: #94a3b8; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; }
.markdown-body th, .markdown-body td { padding: 0.5rem 0.75rem; border: 1px solid #334155; text-align: left; font-size: 0.875rem; }
.markdown-body th { background: #1e293b; color: #e2e8f0; font-weight: 600; }
.markdown-body td { color: #94a3b8; }
.markdown-body hr { border: none; border-top: 1px solid #334155; margin: 1.5rem 0; }
.markdown-body a { color: #ea580c; }
.markdown-body strong { color: #e2e8f0; }

/* Mobile responsive */
@media (max-width: 640px) {
  #chat-sidebar { display: none; }
  .markdown-body h1 { font-size: 1.375rem; }
  .markdown-body h2 { font-size: 1.125rem; }
}