.chat {
  width: 300px;
  padding: 10px;
  /* d-flex flex-column border border-light classes applied in template */
}

.message-new {
  border-radius: 20px;
  padding: 8px 15px;
  /* display, position, mw-75, text-break handled by Bootstrap classes */
}

/* Individual message bubbles - no longer needed since each message is separate */

/* Profile circles */
.profile-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* font-weight, position, lh-1, flex-shrink-0 handled by Bootstrap classes */
  font-size: 14px;
  bottom: 0;
  z-index: 2; /* Ensure circles are above messages */
}

/* Profile circle positioning */
.profile-circle.yours {
  left: 4px; /* Far left edge */
}

.profile-circle.mine {
  right: 4px; /* Far right edge */
}

.messages-new.yours {
  margin-left: 35px; /* Space for left circle */
}

.messages-new.mine {
  margin-right: 10px; /* Space for right circle */
}

/* Country-specific profile circle colors */
.profile-circle.austria { background-color: var(--austria-color); }
.profile-circle.england { background-color: var(--england-color); }
.profile-circle.france { background-color: var(--france-color); }
.profile-circle.germany { background-color: var(--germany-color); }
.profile-circle.italy { background-color: var(--italy-color); }
.profile-circle.russia { background-color: var(--russia-color); }
.profile-circle.turkey { background-color: var(--turkey-color); }
.profile-circle.gamemaster,
.profile-circle.master { background-color: var(--master-color); }
.profile-circle.gamemaster { background-color: var(--master-color); }

/* Country-specific backgrounds for other players' messages */
/* AIDEV-NOTE: Fixed incorrect var(--country-color) usage - replaced with specific country variables */
.yours.austria .message-new { background: var(--austria-color); }
.yours.austria .message-new:before { background: var(--austria-color); }
.yours.england .message-new { background: var(--england-color); }
.yours.england .message-new:before { background: var(--england-color); }
.yours.france .message-new { background: var(--france-color); }
.yours.france .message-new:before { background: var(--france-color); }
.yours.germany .message-new { background: var(--germany-color); }
.yours.germany .message-new:before { background: var(--germany-color); }
.yours.italy .message-new { background: var(--italy-color); }
.yours.italy .message-new:before { background: var(--italy-color); }
.yours.russia .message-new { background: var(--russia-color); }
.yours.russia .message-new:before { background: var(--russia-color); }
.yours.turkey .message-new { background: var(--turkey-color); }
.yours.turkey .message-new:before { background: var(--turkey-color); }
.yours.gamemaster .message-new { background: var(--master-color); }
.yours.gamemaster .message-new:before { background: var(--master-color); }
.yours.master .message-new { background: var(--master-color); }
.yours.master .message-new:before { background: var(--master-color); }

/* Generic tail styles for other players' messages */
.yours .message-new:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -7px;
  height: 20px;
  width: 20px;
  border-bottom-right-radius: 15px;
}
.yours .message-new:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 20px;
  background: var(--bs-card-bg, #ffffff);
  border-bottom-right-radius: 10px;
}

/* Country-specific backgrounds for user's own messages */
.mine.austria .message-new { background: var(--austria-color); }
.mine.austria .message-new:before { background: var(--austria-color); }
.mine.england .message-new { background: var(--england-color); }
.mine.england .message-new:before { background: var(--england-color); }
.mine.france .message-new { background: var(--france-color); }
.mine.france .message-new:before { background: var(--france-color); }
.mine.germany .message-new { background: var(--germany-color); }
.mine.germany .message-new:before { background: var(--germany-color); }
.mine.italy .message-new { background: var(--italy-color); }
.mine.italy .message-new:before { background: var(--italy-color); }
.mine.russia .message-new { background: var(--russia-color); }
.mine.russia .message-new:before { background: var(--russia-color); }
.mine.turkey .message-new { background: var(--turkey-color); }
.mine.turkey .message-new:before { background: var(--turkey-color); }
.mine.gamemaster .message-new { background: var(--master-color); }
.mine.gamemaster .message-new:before { background: var(--master-color); }
.mine.master .message-new { background: var(--master-color); }
.mine.master .message-new:before { background: var(--master-color); }

/* Generic tail styles for user's messages */
.mine .message-new:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -8px;
  height: 20px;
  width: 20px;
  border-bottom-left-radius: 15px;
}

.mine .message-new:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -10px;
  width: 10px;
  height: 20px;
  background: var(--bs-card-bg, #ffffff);
  border-bottom-left-radius: 10px;
}

#press-thread-body {
  max-height: 50vh;
}

/* AIDEV-NOTE: Sender name styling for condensed layout above chat bubbles */
.sender-name {
  line-height: 1;
  margin-bottom: 2px;
  padding-left: 15px;
  padding-right: 15px;
}

/* AIDEV-NOTE: Mobile optimizations to reduce chat bubble whitespace */
@media (max-width: 576px) {
  /* Reduce profile circle size on mobile */
  .profile-circle {
    width: 28px;
    height: 28px;
    font-size: 13px;
    z-index: 2; /* Ensure circles are above messages */
  }

  /* Reduce profile icon gutters on mobile */
  .profile-circle.yours {
    left: 2px;
  }

  .profile-circle.mine {
    right: 2px;
  }

  .messages-new.yours {
    margin-left: 32px; /* 28px circle + 4px spacing */
  }

  .messages-new.mine {
    margin-right: 4px; /* no circle + 4px spacing */
  }

  /* Reduce message bubble padding on mobile */
  .message-new {
    padding: 4px 10px;
  }

  /* Reduce text margins inside bubbles on mobile */
  .message-new .body {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Even more condensed sender name on mobile */
  .sender-name {
    font-size: 0.7rem;
    margin-bottom: 1px;
  }
}