/* Markdown styling inside chat bubbles */

 /* .bubble {
    border-radius:12px;
    max-width: 72%;
    max-height: 100%;
    line-height:1.4;
    font-size:14px;
  }
    */

.bubble {
  /* white-space: pre-wrap;  */
  word-wrap: break-word; /* wraps long words */
  border-radius:12px;
    max-width: 72%;
    max-height: 100%;
  line-height: 1.5; /* general line spacing */
  font-size: 14px;
}

  .bubble.user { background: var(--secondary-color); color: var(--text-color); margin-left:auto; font-size: 17px; padding:8px 12px;}
  .bubble.bot  { background: var(--primary-color); color: var(--text-color); font-size: 17px; max-width: 100%; line-height: 1.75;} 

/* Paragraphs */
.bubble p {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.5;
}


/* .bubble pre {
  margin: 0px 0;
} */

/* Top-level unordered list (parent bullets) */
.bubble.bot ul {
  list-style-type: disc;   /* filled bullets */
  margin-left: 20px;       /* base indent */
  padding-left: 0;
  font-size: 17px;
  font-weight: 350;
}

/* Top-level list items only */
.bubble.bot ul > li {
  margin-bottom: 4px;     /* big space between top-level items */
  padding: 4px 0;          /* optional: small top/bottom padding inside each bullet */
  list-style-type: disc;
}

/* Nested unordered lists (child bullets) */
.bubble.bot ul ul {
  list-style-type: circle; /* hollow bullets */
  margin-left: 25px;       /* extra indent for nested list */
  padding: 0;              /* remove extra padding so they stay tight */
}

/* Nested list items */
.bubble.bot ul ul > li {
  margin-bottom: 4px;      /* small space between nested bullets */
  padding: 2px 0;          /* tiny padding inside nested bullets */
  font-size: 17px;
  font-weight: 300px;
}

/* Third-level lists */
.bubble.bot ul ul ul {
  list-style-type: square;
  margin-left: 30px;
}

.bubble.bot ul ul ul > li {
  margin-bottom: 2px;
  padding: 1px 0;
}

/* Top-level ordered list items */
.bubble.bot ol > li {
  margin-bottom: 20px;     /* big space between top-level OL items */
  margin-left: 25px;
  font-size: 17px;
  font-weight: 400px;
}

/* Nested ordered list items */
.bubble.bot ol ol > li {
  margin-bottom: 4px;      /* small spacing for child OL items */
  padding: 2px 0;
}




/* li p = paragraph inside a list data point */
/* .bubble li p { 
  margin: 0;
  padding: 0;
} */

/* Headings */
.bubble h1,
.bubble h2,
.bubble h3,
.bubble h4,
.bubble h5,
.bubble h6 {
  padding-top: 15px;
  /* padding-bottom: 3px; */
  font-weight: 600;
}

/* Code blocks */
.bubble pre {
  background-color: color-mix(in lab, var(--primary-color) 99%, black);
  color: #f5f5f5;
  padding-top: 12px;
  padding-bottom: 2px;
  border-radius: 12px;
  /* overflow-x: auto; */
  margin-top: 6px;
  margin-bottom: 20px;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Inline code */
.bubble ol code {
  background-color: #3e3e3e;
  color: var(--inline-color);
  padding: 2px 3px;
  border-radius: 4px;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
}

.bubble ul code {
  background-color: #3e3e3e;
  color: var(--inline-color);
  padding: 2px 3px;
  border-radius: 4px;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  /* margin: 0 4px;           */
  display: inline-block;  /* ensures margin works nicely */
}



/* Horizontal rules */
/* .bubble hr {
  border: 0;
  border-top: 1px solid #555;
  margin: 0px 0;
} */