/* InimaServices UI 7C-B v1.1 · Experiencia de mensajes */
/* No modifica la geometría estabilizada por 7C-A v1.2. */

#messagesList {
  padding-bottom: 4px !important;
}

#messagesList > li {
  margin-bottom: 15px !important;
}

#messagesList .message-data {
  margin-bottom: 4px !important;
  padding: 0 5px !important;
  color: var(--inima-muted) !important;
}

#messagesList .message-data-time {
  padding: 0 !important;
  color: var(--inima-muted) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}

#messagesList .message {
  max-width: min(76%, 720px) !important;
  padding: 11px 14px !important;
  border: 1px solid var(--inima-border) !important;
  border-radius: 14px !important;
  line-height: 1.45 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(27,44,65,.05) !important;
  word-break: break-word;
}

#messagesList .message::after {
  display: none !important;
}

#messagesList .my-message {
  background: var(--inima-surface) !important;
  color: var(--inima-text) !important;
}

#messagesList .other-message {
  background: #e7f0f2 !important;
  color: #273746 !important;
  text-align: left !important;
}

html[data-inima-theme="dark"] #messagesList .other-message {
  background: #20384a !important;
  color: #eef4fa !important;
}

html[data-inima-theme="dark"] #messagesList .my-message {
  background: var(--inima-surface-2) !important;
}

#messagesList .inima-message-media {
  padding: 8px !important;
}

#messagesList img,
#messagesList video {
  display: block;
  max-width: min(390px, 100%) !important;
  height: auto;
  border-radius: 10px !important;
}

#messagesList audio {
  display: block;
  width: min(360px, 100%) !important;
  max-width: 100% !important;
}

#messagesList a {
  color: var(--inima-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#attachBar .btn {
  min-height: 34px !important;
  border-radius: 9px !important;
}

#chatForm .input-group {
  align-items: stretch !important;
}

#messageInput {
  font-size: 12px !important;
}

#messageInput::placeholder {
  color: var(--inima-muted) !important;
}

#sendBtn {
  transition: filter .15s ease, transform .12s ease;
}

#sendBtn:hover {
  filter: brightness(1.05);
}

#sendBtn:active {
  transform: scale(.97);
}