.markdown-hint {
    background-color: #f7f9fc;
    color: #0066ff;
    margin-top: 20px;
    padding: 15px;
    margin-right: 40px;
    background-color: #f8f9fa;
    border-left: 4px solid #0066ff;
    border-radius: 4px;
}
/* Comment Markdown styles */
.comment em {
    font-style: italic;
}

.comment strong {
    font-weight: 600;
}

.comment h3 {
    font-size: 1.1rem;
    margin: 12px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
}

.comment h4 {
    font-size: 1rem;
    margin: 10px 0 6px 0;
}

.comment ul {
    margin: 8px 0;
    padding-left: 20px;
}

.comment li {
    margin-bottom: 4px;
}

.comment a {
    color: #0066ff;
    text-decoration: none;
}

.comment a:hover {
    text-decoration: underline;
}
.code-block {
    background: #010726; /* Dark background */
    color: #e0e0e0; /* Light text color for better contrast */
    padding: 15px;
    margin: 0;
    overflow-x: auto;
    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 1.1rem;
    line-height: 1.5;
    border: 1px solid #3e4451;
    /* Add subtle grid background */
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: -1px -1px;
}



/* Add this CSS to improve comment formatting */

/* Base styles for comments */
.comment {
    padding: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

/* Refinement comments need special formatting */
.refinement-comment {
    background-color: #f7f9fc; /* Light blue background to distinguish */
    border-radius: 6px;
    border-left: 4px solid #0066ff;
    margin-bottom: 20px;
}

.refinement-comment .comment-header {
    margin-bottom: 10px;
}

/* Refinement request styling */
.refinement-request {
    background-color: #f0f4f8;
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-style: italic;
}

/* Refinement answer styling */
.refinement-answer {
    background-color: #fafcff;
    padding: 15px;
    border-radius: 5px;
    border-left: 3px solid #0066ff;
}

.refinement-answer h4 {
    margin-top: 0;
    color: #0066ff;
    font-size: 1.1rem;
}

.topic-link {
    display: inline-block;
    padding: 5px 12px;
    background-color: #e8f5e9;
    color: #2e7d32;
    border-radius: 16px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.topic-link:hover {
    background-color: #2e7d32;
    color: white;
    text-decoration: none;
}

/* Style the follow-up questions section */
.followup-questions {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-left: 4px solid #0066ff;
    border-radius: 4px;
}

.followup-questions h3 {
    margin-top: 0;
    color: #333;
}

.followup-questions ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.followup-questions li {
    margin-bottom: 8px;
    color: #444;
}

/* Ensure Markdown headers in the enhanced response look good */
.response h2, .response h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* For dark theme compatibility */
@media (prefers-color-scheme: dark) {
    .topic-link {
        background-color: #1b3a1e;
        color: #a5d6a7;
    }
    
    .topic-link:hover {
        background-color: #2e7d32;
        color: white;
    }
    
    .followup-questions {
        background-color: #1e1e1e;
        border-left-color: #0066ff;
    }
    
    .followup-questions h3 {
        color: #e0e0e0;
    }
    
    .followup-questions li {
        color: #c0c0c0;
    }
    
    .response h2, .response h3 {
        color: #e0e0e0;
        border-bottom-color: #333;
    }
}
/* Code block update */

/* Fixed syntax highlighting styles with unique class names */

/* Python-specific styling */

/* Syntax highlighting with py- prefix to avoid conflicts */
.py-keyword { color: #ff79c6; } /* Bright pink */
.py-function { color: #6fb3f2; } /* Blue * #61afef/
.py-library { color: #bd93f9; } /* Purple */
.py-class { color: #8be9fd; } /* Cyan */
.py-string { color: #9ee34f; } /* Brighter green */
.py-number { color: #f08d49; } /* Brighter orange */
.py-comment { color: #a7a2a9; font-style: italic; } /* Lighter gray */

/* Add a subtle grid background to code blocks for better readability */

/* Make sure code block text itself is always visible */
.code-block code {
    color: #e0e0e0; /* Ensure code text is light on dark background */
    background: transparent; /* Override any other background */
    display: block;
    white-space: pre;
}

/* Add a "copy" button to code blocks */
.code-block-container {
    position: relative;
}

.code-copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 3px;
    color: #e0e0e0;
    padding: 2px 6px;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

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

.code-copy-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.code-copy-button:active {
    background: rgba(255, 255, 255, 0.3);
}
/**/
/* Code block styling - Dark Theme */
.code-block-container {
    position: relative;
    margin-bottom: 15px;
    border-radius: 6px;
    overflow: hidden;
}


/* Python-specific styling */
.python-code {
    border-left: 3px solid #4B8BBE; /* Python blue */
}

.code-block::before {
    content: "Code";
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.python-code::before {
    content: "Python";
    color: #4B8BBE;
}

.code-copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 3px;
    color: #e0e0e0;
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
}

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

.code-copy-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.code-copy-button:active {
    background: rgba(255, 255, 255, 0.3);
}


/* Fix for selection styling */
.code-block ::selection {
    background-color: #4d4d4d; /* Darker gray for selection */
    color: #ffffff; /* White text when selected */
}

/* For Firefox */
.code-block ::-moz-selection {
    background-color: #4d4d4d;
    color: #ffffff;
}

/* Make sure code block text is always visible */


/* Material link styling - keep consistent */
.material-link {
    background-color: #e6f7ff;
    color: #0066cc;
    padding: 2px 5px;
    border-radius: 4px;
    text-decoration: none;
    border-left: 2px solid #0066cc;
    transition: all 0.2s ease;
    display: inline-block;
}

.material-link:hover {
    background-color: #d1ecff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.material-link::before {
    content: "📋 ";
    margin-right: 3px;
}





/* Add some style to indicate language type */
.code-block::before {
    content: "Code";
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.python-code::before {
    content: "Python";
    color: #4B8BBE;
}

/* Fix for selection styling in code blocks */
.code-block ::selection {
    background-color: #4d4d4d; /* Darker gray for selection */
    color: #ffffff; /* White text when selected */
}

/* For Firefox */
.code-block ::-moz-selection {
    background-color: #4d4d4d;
    color: #ffffff;
}


/* Make sure code block text itself is always visible */
.code-block code {
    color: #e0e0e0; /* Ensure code text is light on dark background */
    background: transparent; /* Override any other background */
}


/* Prevent horizontal overflow */
.response pre {
    max-width: 100%;
    overflow-x: auto;
}


/* Add a subtle grid background to code blocks for better readability */
.code-block {
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: -1px -1px;
}


.code-copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 3px;
    color: #e0e0e0;
    padding: 2px 6px;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

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

.code-copy-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.code-copy-button:active {
    background: rgba(255, 255, 255, 0.3);
}
/* Material link styling */
.material-link {
    background-color: #e6f7ff;
    color: #0066cc;
    padding: 2px 5px;
    border-radius: 4px;
    text-decoration: none;
    border-left: 2px solid #0066cc;
    transition: all 0.2s ease;
    display: inline-block;
}

.material-link:hover {
    background-color: #d1ecff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.material-link::before {
    content: "📋 ";
    margin-right: 3px;
}

/* Code block container with copy button */
.code-block-container {
    position: relative;
    margin-bottom: 15px;
    background: #f8f8f8;
    border-radius: 6px;
    overflow: hidden;
}

.code-block {
    padding: 15px;
    margin: 0;
    overflow-x: auto;
    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 14px;
    line-height: 1.5;
    background: transparent;
}

.code-copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #f8f9fa;
    color: #333;
    border: 1px solid #ddd;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    z-index: 5;
}

.code-copy-button:hover {
    background: #e9ecef;
}

/* Python syntax highlighting */
.python-code {
    background-color: #f8f8f8;
    color: #333;
}

.py-keyword {
    color: #0033b3;
    font-weight: bold;
}

.py-function {
    color: #7d5bb
}


.py-library {
    color: #2c8595;
    font-weight: bold;
}

.py-string {
    color: #067d17;
}

.py-number {
    color: #1750eb;
}

.py-comment {
    color: #8c8c8c;
    font-style: italic;
}

/* Refinement section */
.refinement-section { 
    margin-top: 30px; 
    border-top: 1px solid #eee; 
    padding-top: 20px; 
}

.refinement-input { 
    min-height: 80px; 
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.refine-btn { 
    margin-top: 10px;
    background: #0066ff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.refinement-result { 
    margin-top: 20px; 
    border-left: 3px solid #0066ff; 
    padding-left: 15px; 
}

.refinement-loading { 
    text-align: center; 
    margin-top: 20px; 
}

.loading-spinner { 
    display: inline-block; 
    width: 24px; 
    height: 24px; 
    border: 3px solid #f3f3f3; 
    border-top: 3px solid #0066ff; 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Comments section */
.comments-section {
    margin-top: 30px;
}

.comment {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #666;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.comment-form {
    margin-top: 20px;
}

.empty-comments {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Add this to your style.css file */
.response h1, .response h2, .response h3, .response h4 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 500;
}

.response h1 { font-size: 1.6em; }
.response h2 { font-size: 1.4em; }
.response h3 { font-size: 1.2em; }
.response h4 { font-size: 1.1em; }

.response p {
  margin-bottom: 1em;
}

.response ul, .response ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.response li {
  margin-bottom: 0.5em;
}

.response strong {
  font-weight: 600;
}

.response em {
  font-style: italic;
}

.response blockquote {
  border-left: 3px solid #ddd;
  padding-left: 1em;
  margin-left: 0;
  color: #666;
}

.response table {
  border-collapse: collapse;
  margin-bottom: 1em;
  width: 100%;
}

.response table, .response th, .response td {
  border: 1px solid #ddd;
}

.response th, .response td {
  padding: 8px;
  text-align: left;
}

.response th {
  background-color: #f2f2f2;
}

/* Markdown heading styles */
.response h1 {
    font-size: 1.8em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.2em;
}

.response h2 {
    font-size: 1.5em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.2em;
}

.response h3 {
    font-size: 1.3em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.response h4 {
    font-size: 1.1em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.response ul, .response ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.response li {
    margin-bottom: 0.3em;
}

.response blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1em;
    margin-left: 0;
    color: #666;
}

/* Add these style overrides to your style.css file */
.response p {
  margin-bottom: 0.7em; /* Reduce from 1em to 0.7em */
  line-height: 1.4; /* Control line height within paragraphs */
}

/* Fix for paragraphs that might be nested or have extra spacing */
.response p + p {
  margin-top: 0; /* Remove top margin when paragraphs are adjacent */
}

/* Ensure consistent spacing in lists */
.response ul, .response ol {
  margin-top: 0.5em;
  margin-bottom: 0.7em; /* Match paragraph bottom margin */
}

/* Control spacing after headings */
.response h1 + p, 
.response h2 + p, 
.response h3 + p, 
.response h4 + p {
  margin-top: 0.3em; /* Tighter spacing after headings */
}


/* Add this to your CSS */
.response {
    white-space: normal !important; /* Override pre-wrap if it's causing issues */
    line-height: 1.4;
}

/* Control paragraph spacing in response */
.response p {
    margin-bottom: 0.5em !important; /* Use !important to override any other styles */
    margin-top: 0 !important;
}

/* Fix for certain markdown renderers that add divs instead of paragraphs */
.response > div:not(.code-block-container) {
    margin-bottom: 0.5em !important;
}

/* Ensure proper spacing after code blocks */
.code-block-container {
    margin-bottom: 1em !important;
    margin-top: 1em !important;
}

/* Fix for spacing in lists */
.response li p {
    margin-bottom: 0.2em !important;
}