frontend/src/Components/AiComponents/ChatComponents/Streaming.css

/* Tables and Pre blocks spacing */
.streaming-content pre + p,
.streaming-content pre + ul,
.streaming-content pre + ol,
.streaming-content pre + blockquote,
.streaming-content pre + h1,
.streaming-content pre + h2,
.streaming-content pre + h3,
.streaming-content pre + h4,
.streaming-content pre + h5,
.streaming-content pre + h6,
.table-container + p,
.table-container + ul,
.table-container + ol,
.table-container + blockquote,
.table-container + h1,
.table-container + h2,
.table-container + h3,
.table-container + h4,
.table-container + h5,
.table-container + h6 {
  margin-top: 1rem !important;
}

/* Streaming cursor effect */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.streaming-content .streaming-cursor {
  animation: blink 1s infinite;
  font-weight: normal;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .streaming-content {
    font-size: 0.95rem;
  }
  
  .code-block-container {
    margin: 0.75rem 0.5rem !important;
    border-radius: 0 !important;
  }
  
  .streaming-content code {
    font-size: 0.8em;
  }
  
  .table-container {
    margin: 0.75rem -0.5rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* Base streaming content container */
.streaming-content {
  font-family: inherit;
  line-height: 2rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;          
  padding: 0;
}

/* Reset margin/padding for all descendants */
.streaming-content * {
  margin: 0;
  padding: 0;
}

/* Paragraphs */
.streaming-content p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* First paragraph should have no top margin */
.streaming-content p:first-child {
  margin-top: 0 !important;
}

/* Consecutive paragraphs */
.streaming-content p + p {
  margin-top: 0.25rem !important;
}

/* Headings */
.streaming-content h1,
.streaming-content h2,
.streaming-content h3,
.streaming-content h4,
.streaming-content h5,
.streaming-content h6 {
  margin-top: 1rem !important;
  margin-bottom: 0.75rem !important;
  font-weight: bold;
}

/* First heading should have no top margin */
.streaming-content h1:first-child,
.streaming-content h2:first-child,
.streaming-content h3:first-child,
.streaming-content h4:first-child,
.streaming-content h5:first-child,
.streaming-content h6:first-child {
  margin-top: 0 !important;
}

/* Heading sizes */
.streaming-content h1 { font-size: 2em; }
.streaming-content h2 { font-size: 1.5em; }
.streaming-content h3 { font-size: 1.17em; }
.streaming-content h4 { font-size: 1em; }
.streaming-content h5 { font-size: 0.83em; }
.streaming-content h6 { font-size: 0.67em; }

/* Lists */
.streaming-content ul,
.streaming-content ol {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  padding-left: 1.5rem !important;   
  white-space: normal !important;     
}

/* Unordered list styling */
.streaming-content ul {
  list-style-type: disc;
}

/* Nested unordered lists */
.streaming-content ul ul {
  list-style-type: circle;
}

.streaming-content ul ul ul {
  list-style-type: square;
}

/* Ordered list styling */
.streaming-content ol {
  list-style-type: decimal;
}

/* Nested ordered lists */
.streaming-content ol ol {
  list-style-type: lower-alpha;
}

.streaming-content ol ol ol {
  list-style-type: lower-roman;
}

/* Lists after paragraphs need less top margin */
.streaming-content p + ul,
.streaming-content p + ol {
  margin-top: -0.25rem !important;
}

/* Lists after headings */
.streaming-content h1 + ul,
.streaming-content h2 + ul,
.streaming-content h3 + ul,
.streaming-content h4 + ul,
.streaming-content h5 + ul,
.streaming-content h6 + ul,
.streaming-content h1 + ol,
.streaming-content h2 + ol,
.streaming-content h3 + ol,
.streaming-content h4 + ol,
.streaming-content h5 + ol,
.streaming-content h6 + ol {
  margin-top: -0.25rem !important;
}

/* List items */
.streaming-content li {
  margin-bottom: 0.6rem !important;
  line-height: 2rem;
}

/* Last item in a list needs less margin */
.streaming-content li:last-child {
  margin-bottom: 0.3rem !important;
}

/* Nested lists */
.streaming-content li ul,
.streaming-content li ol {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Nested list items */
.streaming-content li ul li,
.streaming-content li ol li {
  margin-bottom: 0.4rem !important;
  line-height: 2rem;
}

/* Deep nested list items */
.streaming-content li ul li ul li,
.streaming-content li ol li ol li,
.streaming-content li ul li ol li,
.streaming-content li ol li ul li {
  margin-bottom: 0.3rem !important;
  line-height: 2rem;
}

/* Code Blocks */
.code-block-container {
  margin: 1rem 0 0 0 !important;
  border-radius: 8px !important;
  background-color: #0d1117 !important;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.code-block-header {
  background-color: #161b22;
  color: #e6edf3;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(48, 54, 61, 0.3);
}

/* Copy button */
.code-copy-button {
  background-color: transparent;
  color: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: inherit;
  font-size: 1.05rem;
  position: relative;
}

.code-copy-button:hover {
  opacity: 1;
}

.code-copy-button:hover svg {
  filter: brightness(0.65);
}

.code-copy-button.copied {
  color: inherit;
  font-size: 1.05rem;
}

.code-copy-button.copied:hover {
  opacity: 1;
}

/* Code block content */
.code-block-container pre {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto;
}

/* The actual syntax highlighter container */
.code-block-container > div:last-child {
  background-color: #0d1117 !important;
  max-height: 65rem !important;
  max-width: 45rem !important;
  overflow: auto !important;
}

/* Plain pre blocks (without syntax highlighting) */
.streaming-content pre {
  background-color: #0d1117;
  color: #e6edf3;
  padding: 0;
  border-radius: 0.75rem;
  overflow-x: auto;
  margin-top: 1rem;
  margin-bottom: -1.25rem;
  font-family: 'inherit';
  font-size: 1.17rem;
  line-height: 2rem;
  border: 0.3rem solid #30363d4d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Pre blocks inside code blocks */
.streaming-content pre code {
  padding: 1rem !important;
  display: block;
}

/* Syntax highlighter specific styles */
.code-block-container pre > div {
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875em;
  line-height: 2rem;
}

/* Custom scrollbar for code blocks */
.code-block-container::-webkit-scrollbar,
.code-block-container pre::-webkit-scrollbar,
.code-block-container > div::-webkit-scrollbar,
.streaming-content pre::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.code-block-container::-webkit-scrollbar-track,
.code-block-container pre::-webkit-scrollbar-track,
.code-block-container > div::-webkit-scrollbar-track,
.streaming-content pre::-webkit-scrollbar-track {
  background: rgba(139, 148, 158, 0.1);
  border-radius: 4px;
}

.code-block-container::-webkit-scrollbar-thumb,
.code-block-container pre::-webkit-scrollbar-thumb,
.code-block-container > div::-webkit-scrollbar-thumb,
.streaming-content pre::-webkit-scrollbar-thumb {
  background: rgba(139, 148, 158, 0.4);
  border-radius: 4px;
}

.code-block-container::-webkit-scrollbar-thumb:hover,
.code-block-container pre::-webkit-scrollbar-thumb:hover,
.code-block-container > div::-webkit-scrollbar-thumb:hover,
.streaming-content pre::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 148, 158, 0.6);
}

/* Inline code */
.streaming-content code {
  background-color: rgba(175, 184, 193, 0.2);
  color: #0969da;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.85em;
  font-weight: 600;
  white-space: pre-wrap;
}

/* Dark mode support for inline code */
@media (prefers-color-scheme: dark) {
  .streaming-content code {
    background-color: rgba(110, 118, 129, 0.4);
    color: #79c0ff;
    font-weight: 100;
  }
}

/* Code inside pre blocks */
.streaming-content pre code,
.code-block-container code,
.code-block-container pre code {
  background-color: transparent !important;
  color: inherit;
  padding: 0;
  font-weight: normal;
  font-size: 0.95rem !important;
}

/* Ensure code in blockquotes still has styling */
.markdown-blockquote code {
  background-color: rgba(31, 35, 40, 0.12);
  color: #0969da;
  font-weight: 600;
}

/* Table Container */
.table-container {
  margin: 1rem 0 0.5rem 0;
  max-width: 45rem !important;
  position: relative;
  border: none;
  border-radius: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb80;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0,0.05);
  overflow-x: auto;
}

.table-container th,
.table-container td {
  border: 1px solid #e5e7eb80;
  padding: 0.2rem 0.4rem;
  text-align: center !important;
  font-size: 0.95rem;
  vertical-align: middle;
  white-space: wrap;
}

.table-container th {
  background-color: #2b181bb7;
  font-weight: 700;
  color: inherit;
}

/* Table copy button */
.table-copy-button {
  background-color: transparent;
  color: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.table-container:hover .table-copy-button {
  opacity: 1;
}

.table-copy-button:hover {
  opacity: 1;
}

.table-copy-button:hover svg {
  filter: brightness(0.65);
}

.table-copy-button.copied {
  color: inherit;
  opacity: 1 !important;
  font-size: 1.05rem;
}

.table-copy-button.fading {
  opacity: 0 !important;
}

/* Table download button */
.table-download-button {
  background-color: transparent;
  color: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  font-size: 1.05rem;
  margin-top: 0.5rem;
  position: relative;
}

.table-container:hover .table-download-button {
  opacity: 1;
}

.table-download-button:hover {
  opacity: 1;
}

.table-download-button:hover svg {
  filter: brightness(0.65);
}

.table-download-button.downloaded {
  color: inherit;
  opacity: 1 !important;
  font-size: 1.05rem;
}

.table-download-button.fading {
  opacity: 0 !important;
}

/* Math expressions */
.inline-math {
  display: inline;
  margin: 0;
}

.block-math {
  display: block;
  margin: 0;
  text-align: left;
  overflow-x: auto;
  overflow-y: hidden;
}

/* KaTeX specific adjustments */
.katex {
  font-size: 1.1rem;
  vertical-align: baseline;
}

.katex-display {
  margin: 0;
  text-align: left;
}

/* Ensure math expressions don't break responsive layout */
.block-math .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
}

.block-math .katex-display > .katex {
  text-align: left;
  padding-left: 0;
}

/* Make inline math blend with text */
.streaming-content .inline-math .katex {
  display: inline;
  line-height: inherit;
}

/* Make block math blend with paragraphs */
.streaming-content .block-math {
  line-height: 2rem;
  font-size: inherit;
}

/* Fix fraction sizing */
.streaming-content .katex .frac-line {
  border-bottom-width: 0.06em; /* Fraction line */
}

.streaming-content .katex .mfrac {
  font-size: 1.2rem; /* Nested fractions */
}

/* Complex math elements */
.streaming-content .katex .mord,
.streaming-content .katex .mbin,
.streaming-content .katex .mrel,
.streaming-content .katex .minner,
.streaming-content .katex .mop {
  font-size: inherit; /* Ensure all math elements scale with text */
}

/* Tooltip styling */
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.9);
  transform-origin: bottom center;
  margin-bottom: 0.65rem;
  padding: 0.3rem 0.6rem;
  background-color: #2b2b2b;
  color: #e0e0e0;
  border-radius: 0.25rem;
  white-space: nowrap;
  font-size: 0.85rem;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Show the tooltip on hover */
.code-copy-button:hover .tooltip,
.table-copy-button:hover .tooltip,
.table-download-button:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Links */
.markdown-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.markdown-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Blockquotes */
.markdown-blockquote {
  border-left: 4px solid #3b82f6;
  padding-left: 1rem;
  margin: 1rem 0; 
  color: #4b5563;
  font-style: italic;
  background-color: #f0f9ff;
  padding: 1rem;
  border-radius: 0 8px 8px 0;
}

/* Strong/Bold text */
.streaming-content strong {
  font-weight: bold;
}

/* Emphasis/Italic text */
.streaming-content em {
  font-style: italic;
}

/* Horizontal rule */
.streaming-content hr {
  margin: 1.5rem 0;
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #e5e7eb, transparent);
}

/* Images */
.streaming-content img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Line breaks */
.streaming-content br {
  margin: 0;
}

/* Source reference styling (for citations) */
.source-reference {
  color: #2563eb;
  cursor: pointer;
  font-size: 0.75em;
  padding: 0 0.2rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.source-reference:hover {
  text-decoration: underline;
  background-color: #dbeafe;
  border-radius: 3px;
}

/* Ensure proper spacing when mixing elements */
.streaming-content > :first-child {
  margin-top: 0 !important;
}

.streaming-content > :last-child {
  margin-bottom: 0 !important;
}

/* Adjacent element spacing rules */
.streaming-content p + h1,
.streaming-content p + h2,
.streaming-content p + h3,
.streaming-content p + h4,
.streaming-content p + h5,
.streaming-content p + h6,
.streaming-content ul + h1,
.streaming-content ul + h2,
.streaming-content ul + h3,
.streaming-content ul + h4,
.streaming-content ul + h5,
.streaming-content ul + h6,
.streaming-content ol + h1,
.streaming-content ol + h2,
.streaming-content ol + h3,
.streaming-content ol + h4,
.streaming-content ol + h5,
.streaming-content ol + h6 {
  margin-top: 1.5rem !important;
}

/* Blockquote spacing */
.streaming-content blockquote + p,
.streaming-content p + blockquote {
  margin-top: 0.75rem !important;
}

/* Code block spacing */
.code-block-container + p,
.code-block-container + ul,
.code-block-container + ol,
.code-block-container + blockquote,
.code-block-container + h1,
.code-block-container + h2,
.code-block-container + h3,
.code-block-container + h4,
.code-block-container + h5,
.code-block-container + h6 {
  margin-top: 0 !important;
}

.streaming-content p + .code-block-container,
.streaming-content ul + .code-block-container,
.streaming-content ol + .code-block-container,
.streaming-content blockquote + .code-block-container,
.streaming-content h1 + .code-block-container,
.streaming-content h2 + .code-block-container,
.streaming-content h3 + .code-block-container,
.streaming-content h4 + .code-block-container,
.streaming-content h5 + .code-block-container,
.streaming-content h6 + .code-block-container {
  margin-top: 1rem !important;
}