.message-widget-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  width: 100%;
}

.message-window {
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.message {
  display: flex;
  margin-bottom: 12px;
}

.message.incoming {
  justify-content: flex-start;
}

.message.outgoing {
  justify-content: flex-end;
}

.bubble {
  max-width: 60%;
  padding: 10px 14px;
  border-radius: 20px;
  word-wrap: break-word;
  line-height: 1.4;
  position: relative;
}

.incoming .bubble {
  background-color: #F8EFE4;
  color: #0C231E;
}

.outgoing .bubble {
  background-color: #13322B;
  color: #FBF4EB;
}

.timestamp {
  font-size: 0.75em;
  margin-top: 4px;
  text-align: right;
  opacity: 0.8;
}

.sender-name {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 0.9em;
  color: #BF8B4B;
}

a.image-link {
  display: block;
  position: relative;
}

img.message-image,
video.message-video {
  width: 100%;
  max-height: 200px;
  border-radius: 18px;
  display: block;
}

audio.message-audio {
  width: 250px;
}

.bubble.media-bubble {
  padding: 0;
  background-color: transparent;
}

.image-indicator {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 0.8em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.image-indicator svg {
  width: 16px;
  height: 16px;
}

.message-system-message {
  align-self: center;
  background-color: #e0e0e0;
  color: #555;
  font-style: italic;
  font-size: 0.8em;
  padding: 5px 10px;
  border-radius: 12px;
  margin-bottom: 15px;
}



.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  font-size: 0.8em;
}

.status--answer {
  background-color: #28a745;
}

.status--inprogress {
  background-color: #007bff;
}

.status--busy {
  background-color: #ffc107;
  color: #333;
}

.status--cancel {
  background-color: #6c757d;
}

.status--ring {
  background-color: #17a2b8;
}

.status--recordingready {
  background-color: #dc3545;
}

.status--congestion {
  background-color: #873e23;
}

.status--chanunavail {
  background-color: #dc3545;
  color: #fff;
}

.status--default {
  background-color: #f8f9fa;
  color: #333;
}

/* --- NUEVOS ESTILOS PARA ÍCONOS DE DIRECCIÓN --- */
.call-direction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.call-direction-icon svg {
  width: 16px;
  height: 16px;
}

.call-direction--in {
  background-color: #e4f1f1;
  /* Fondo verde pálido/neutro */
}

.call-direction--in svg {
  stroke: #17a2b8;
  /* Ícono color cian/verde */
}

.call-direction--out {
  background-color: #eaeff3;
  /* Fondo gris/azul pálido/neutro */
}

.call-direction--out svg {
  stroke: #6c757d;
  /* Ícono color gris */
}

.call-recording {
  background-color: #E8F5E9;
}

/* --- FIN DE NUEVOS ESTILOS --- */