/* Message container */
.message-container {
  padding: 0 20px;
}

.message-bubble {
  padding: 6px 7px 8px 7px;
  position: relative;
  display: inline-block;
  max-width: 65%;
  word-wrap: break-word;
}

/* Message bubbles like WhatsApp Web */
.user-message {
  background-color: #d1f4cc !important; /* More accurate WhatsApp light green */
  color: #111b21 !important;
  border-radius: 7.5px 7.5px 0 7.5px !important;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13) !important;
}

.assistant-message {
  background-color: #ffffff !important; /* White for assistant */
  color: #111b21 !important;
  border-radius: 7.5px 7.5px 7.5px 0 !important;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13) !important;
}

.message-content {
  line-height: 1.4;
  font-size: 14px;
  display: block;
  padding-right: 60px; /* Reserve space for time+checkmarks */
  position: relative;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  position: absolute;
  right: 0;
  bottom: 0;
  padding-right: 8px;
  padding-bottom: 2px;
}

/* RTL support for message meta */
[dir="rtl"] .message-content {
  padding-right: 0;
  padding-left: 60px;
}

[dir="rtl"] .message-meta {
  right: auto;
  left: 0;
  padding-right: 0;
  padding-left: 8px;
}

.message-time {
  color: rgba(102, 119, 129, 0.8);
  font-size: 11px;
  white-space: nowrap;
  line-height: 1;
}

/* Message read receipts */
.message-receipt {
  display: inline-flex;
  align-items: center;
}

.message-receipt svg {
  width: 12px;
  height: 9px;
}

/* Base styling for all receipt states - default (light backgrounds) */
.read-receipt-pending {
  color: #9ca3af;
  opacity: 0.7;
}

.read-receipt-sent {
  color: #9ca3af;
}

.read-receipt-delivered {
  color: #9ca3af;
}

.read-receipt-read {
  color: #4fc3f7; /* WhatsApp blue for read receipts */
}

/* SVG styling */
.message-receipt svg {
  display: block;
}

/* User message receipts (on light green) */
.user-message .read-receipt-pending,
.user-message .read-receipt-sent, 
.user-message .read-receipt-delivered {
  color: #666666 !important;
}

.user-message .read-receipt-read {
  color: #4fc3f7 !important; /* WhatsApp blue on light green */
}

/* Assistant message receipts (on white) */
.assistant-message .read-receipt-pending,
.assistant-message .read-receipt-sent,
.assistant-message .read-receipt-delivered {
  color: #9ca3af !important;
}

.assistant-message .read-receipt-read {
  color: #4fc3f7 !important; /* WhatsApp blue on white */
}

/* Smooth transitions */
.message-receipt span {
  transition: color 0.3s ease;
}

/* Debug message info */
.message-debug {
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.7;
  clear: both;
}

/* Admin debug links styling */
.llm-log-link,
.memories-link,
.reminders-link {
  font-size: 11px !important;
  margin-right: 8px;
}

/* RTL support for admin links */
[dir="rtl"] .llm-log-link,
[dir="rtl"] .memories-link,
[dir="rtl"] .reminders-link {
  margin-right: 0;
  margin-left: 8px;
}

/* Chat background - subtle like WhatsApp Web */
.chat-background {
  background-color: #f0f2f5;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><defs><pattern id="chat-pattern" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="0.5" fill="%23e9edef" opacity="0.6"/><circle cx="45" cy="45" r="0.5" fill="%23e9edef" opacity="0.4"/><circle cx="30" cy="5" r="0.3" fill="%23e9edef" opacity="0.5"/><circle cx="5" cy="35" r="0.4" fill="%23e9edef" opacity="0.3"/><circle cx="50" cy="20" r="0.3" fill="%23e9edef" opacity="0.7"/></pattern></defs><rect width="60" height="60" fill="url(%23chat-pattern)"/></svg>');
  background-size: 60px 60px;
}