/* material-links.css */

/* Material link styling */
.material-link {
  display: inline-block;
  background-color: rgba(0, 102, 255, 0.1);
  color: #0066cc;
  padding: 2px 8px;
  margin: 0 2px;
  border-radius: 4px;
  text-decoration: none;
  border-bottom: 2px solid #0066cc;
  transition: all 0.2s ease-in-out;
  position: relative;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.material-link:hover {
  background-color: rgba(0, 102, 255, 0.2);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.material-link:active {
  transform: translateY(0);
  box-shadow: none;
}

.material-link::before {
  content: "📄"; /* Document icon */
  margin-right: 6px;
  opacity: 0.8;
}

/* Code block container styling */
.code-block-container {
  position: relative;
  margin: 1.5em 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Basic code block styling */
pre.code-block {
  margin: 0;
  padding: 1em;
  overflow-x: auto;
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  tab-size: 4;
  background-color: #1e1e1e; /* Dark background */
  color: #d4d4d4; /* Light text */
  border-radius: 6px;
}

/* Code copy button */
.code-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
  z-index: 10;
}

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

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

/* Python specific syntax highlighting */
.python-code {
  border-left: 3px solid #3572A5; /* Python color */
}

.py-keyword { color: #c586c0; } /* Pink/Purple */
.py-function { color: #dcdcaa; } /* Yellow */
.py-library { color: #4ec9b0; } /* Green */
.py-string { color: #ce9178; } /* Orange/Red */
.py-number { color: #b5cea8; } /* Light Green */
.py-comment { color: #6a9955; font-style: italic; } /* Green */

/* JavaScript specific syntax highlighting */
.javascript-code {
  border-left: 3px solid #f7df1e; /* JavaScript color */
}

.js-keyword { color: #c586c0; } /* Pink/Purple */
.js-builtin { color: #4ec9b0; } /* Green */
.js-string { color: #ce9178; } /* Orange/Red */
.js-number { color: #b5cea8; } /* Light Green */
.js-comment { color: #6a9955; font-style: italic; } /* Green */

/* Other language types */
.html-code {
  border-left: 3px solid #e34c26; /* HTML color */
}

.css-code {
  border-left: 3px solid #563d7c; /* CSS color */
}

.sql-code {
  border-left: 3px solid #f29111; /* SQL color */
}

.markdown-code {
  border-left: 3px solid #083fa1; /* Markdown color */
}

/* Responsive design for small screens */
@media (max-width: 768px) {
  pre.code-block {
    font-size: 0.8rem;
    padding: 0.8em;
  }
  
  .code-copy-button {
    padding: 2px 6px;
    font-size: 0.7rem;
  }
}

/* Add these styles to your material-links.css or create a new file called markdown-styles.css */

/* Heading styles */
.response h1, .comment h1, #refinedResponseText h1 {
  font-size: 1.8em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

.response h2, .comment h2, #refinedResponseText h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: #333;
}

.response h3, .comment h3, #refinedResponseText h3 {
  font-size: 1.3em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.response h4, .comment h4, #refinedResponseText h4 {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.response h5, .comment h5, #refinedResponseText h5 {
  font-size: 1em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.response h6, .comment h6, #refinedResponseText h6 {
  font-size: 0.9em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: #555;
}

/* Other markdown styles */
.response p, .comment p, #refinedResponseText p {
  margin-bottom: 1em;
  line-height: 1.6;
}

.response strong, .comment strong, #refinedResponseText strong {
  font-weight: bold;
}

.response em, .comment em, #refinedResponseText em {
  font-style: italic;
}

.response ul, .comment ul, #refinedResponseText ul {
  list-style-type: disc;
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.response ol, .comment ol, #refinedResponseText ol {
  list-style-type: decimal;
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.response li, .comment li, #refinedResponseText li {
  margin-bottom: 0.5em;
}

.response blockquote, .comment blockquote, #refinedResponseText blockquote {
  border-left: 4px solid #ddd;
  padding-left: 1em;
  color: #555;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1em;
}

.response hr, .comment hr, #refinedResponseText hr {
  height: 1px;
  border: none;
  background-color: #ddd;
  margin: 1.5em 0;
}

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

.response th, .comment th, #refinedResponseText th,
.response td, .comment td, #refinedResponseText td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.response th, .comment th, #refinedResponseText th {
  background-color: #f2f2f2;
  font-weight: bold;
}