/* -------------------- Base -------------------- */
body {
  font-family: "Latin Modern Sans", Arial, sans-serif;
  background: #ffffff;
  margin: 0;
  padding: 20px;
}

.chat-container {
  max-width: 600px;
  margin: auto;
}

/* -------------------- Message Row -------------------- */
.message-row {
  display: flex;
  margin-bottom: 8px;
  align-items: flex-end; /* avatar aligns with last bubble */
}

.message-row.left {
  justify-content: flex-start;
}

.message-row.right {
  justify-content: flex-end;
}

/* -------------------- Bubble Group -------------------- */
.bubble-group {
  display: flex;
  flex-direction: column; /* stack bubbles vertically */
}

/* Align bubbles in group */
.message-row.left .bubble-group {
  align-items: flex-start;
}

.message-row.right .bubble-group {
  align-items: flex-end;
}

/* -------------------- Individual Bubbles -------------------- */
.bubble {
  display: block;         /* stack vertically */
  padding: 8px 12px;
  margin: 2px 0;
  border-radius: 12px;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.4;
}

/* Bubble colors */
.bubble.gray  { background-color: #f1f0f0; color: #000; }
.bubble.green { background-color: #67b868; color: #fff; }
.bubble.blue  { background-color: #03a2e9; color: #fff; }

/* -------------------- Top/Middle/Bottom Corners -------------------- */
/* LEFT BUBBLES */
.bubble.first-left  { border-radius: 12px 12px 12px 6px; }
.bubble.middle-left { border-radius: 12px; }
.bubble.last-left   { border-radius: 6px 12px 12px 12px; }

/* RIGHT BUBBLES */
.bubble.first-right  { border-radius: 12px 12px 6px 12px; }
.bubble.middle-right { border-radius: 12px; }
.bubble.last-right   { border-radius: 12px 6px 12px 12px; }

/* -------------------- Avatar -------------------- */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 8px;
}

.timestamp {
  text-align: center;
  color: gray;
  font-size: 12px;
  margin: 25px 0;
}

.heading1 {
  text-align: center;
  color: gray;
  font-size: 18px;
  margin: 2px 0;
}

.heading2 {
  text-align: center;
  color: gray;
  font-size: 16px;
  margin: 2px 0;
  font-weight: normal;
}

.header-image-container {
  display: flex;
  justify-content: center; /* center the image horizontally */
  margin: 10px 0;          /* space above and below */
}

.header-image {
  width: 100px;             /* adjust size as needed */
  height: 100px;
  object-fit: cover;        /* crop the image to fit the square */
  border-radius: 50%;       /* makes it circular */
}

.bubble img.bubble-image {
  max-width: 100%;       /* fit inside the bubble width */
  border-radius: 8px;    /* rounded corners like the bubble */
  margin-top: 4px;       /* spacing above image */
  display: block;        /* ensures it starts on a new line */
}

/* -------------------- Bottom Info Box -------------------- */
.bottom-box {
  max-width: 600px;
  margin: 30px auto;          /* center like chat */
  padding: 15px;
  border: 2px solid gray;     /* gray outline */
  border-radius: 12px;
  background: #fff;
}

/* Columns */
.bottom-columns {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.column {
  flex: 1;
  font-size: 16px;
  color: gray;
  text-align: center;
}

@media print {
  * {
    -webkit-print-color-adjust: exact; /* Chrome, Safari */
    color-adjust: exact;               /* Firefox */
  }
  
  .bubble {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}