/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


/* Code blocks styling */
pre .prettyprint,
pre code.prettyprint {
  background-color: #1e1e2e; /* base */
  color: #cdd6f4; /* text */
  padding: 20px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  line-height: 1.5;
  tab-size: 2;
  overflow-x: auto;
  display: block;
  white-space: pre;
  word-wrap: normal;
  word-break: normal;
  border: none;
  font-size: 12px;
}

/* Inline code styling */
:not(pre) > code.prettyprint {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  background-color: #f6f8fa;  /* GitHub-like background */
  color: #24292f;            /* GitHub-like text color */
  padding: 0.2em 0.4em;
  font-size: 85%;
  border-radius: 6px;
  border: 1px solid #d0d7de;
  white-space: nowrap;
}

/* Pre tag reset */
pre {
  margin: 0;
  padding: 4px;
  background: inherit;
}

/* Code block syntax highlighting */
pre .prettyprint .pln,
pre code.prettyprint .pln { color: #cdd6f4; } /* text */
pre .prettyprint .str,
pre code.prettyprint .str { color: #a6e3a1; } /* green */
pre .prettyprint .kwd,
pre code.prettyprint .kwd { color: #cba6f7; } /* mauve */
pre .prettyprint .com,
pre code.prettyprint .com { color: #6c7086; } /* surface2 - comments */
pre .prettyprint .typ,
pre code.prettyprint .typ { color: #89b4fa; } /* blue */
pre .prettyprint .lit,
pre code.prettyprint .lit { color: #fab387; } /* peach */
pre .prettyprint .pun,
pre code.prettyprint .pun { color: #94e2d5; } /* teal */
pre .prettyprint .opn,
pre code.prettyprint .opn { color: #94e2d5; } /* teal */
pre .prettyprint .clo,
pre code.prettyprint .clo { color: #94e2d5; } /* teal */
pre .prettyprint .tag,
pre code.prettyprint .tag { color: #f38ba8; } /* red */
pre .prettyprint .atn,
pre code.prettyprint .atn { color: #f9e2af; } /* yellow */
pre .prettyprint .atv,
pre code.prettyprint .atv { color: #a6e3a1; } /* green */
pre .prettyprint .dec,
pre code.prettyprint .dec { color: #fab387; } /* peach */
pre .prettyprint .var,
pre code.prettyprint .var { color: #f5c2e7; } /* pink */
pre .prettyprint .fun,
pre code.prettyprint .fun { color: #89b4fa; } /* blue */

/* Selection styling for code blocks */
pre .prettyprint ::selection,
pre code.prettyprint ::selection {
  background-color: #45475a; /* surface1 */
  color: inherit;
}

/* When inline code is inside links */
a > code.prettyprint {
  color: inherit;
}

/* Hover effect for inline code */
:not(pre) > code.prettyprint:hover {
  background-color: #f3f4f6;
}


/* Typography */
.ai-response h1, 
.ai-response h2, 
.ai-response h3, 
.ai-response h4, 
.ai-response h5, 
.ai-response h6 {
  margin-bottom: 0.8em;
  font-weight: 700;
  line-height: 1.2;
  color: #222;
}
.ai-response h1 {
  font-size: 1.75em;
  border-bottom: 2px solid #ddd;
  padding-bottom: 0.3em;
}

.ai-response h2 {
  font-size: 1.5em;
}

.ai-response h3 {
  font-size: 1.25em;
}

.ai-response h4 {
  font-size: 1.125em;
}

.ai-response h5 {
  font-size: 0.875em;
}

.ai-response h6 {
  font-size: 0.75em;
}

/* Paragraphs */
.ai-response p {
  margin-bottom: 1em;
}

/* Links */
.ai-response a {
  color: #0066cc;
  text-decoration: none;
}

.ai-response a:hover {
  text-decoration: underline;
  color: #004080;
}

/* Lists */
.ai-response ul, 
.ai-response ol {
  margin: 0 0 1em 2em;
}

.ai-response ul {
  list-style-type: disc;
}

.ai-response ul ul {
  list-style-type: circle;
}

.ai-response ul ul ul {
  list-style-type: square;
}

.ai-response ol {
  list-style-type: decimal;
}

.ai-response ol ol {
  list-style-type: lower-alpha;
}

.ai-response ol ol ol {
  list-style-type: lower-roman;
}

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

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

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

.ai-response th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.ai-response tr:hover {
  background-color: #f5f5f5;
}

/* Horizontal Rule */
.ai-response hr {
  border: 0;
  height: 1px;
  background-color: #ddd;
  margin: 2em 0;
}