/* crm-bot-buttons.css — a flow's buttons and picture in the agent's copy of the
   message. See crm-bot-buttons.js. Tints of the bubble's own ground, never a
   white card on colour, so it reads as part of the message. */

.crm-bb { margin-top: 8px; }

.crm-bb__btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
}

.crm-bb__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .06);
  border: 1px solid rgba(0, 0, 0, .10);
  color: inherit !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
}

a.crm-bb__btn:hover { background: rgba(0, 0, 0, .11); }

/* A reply is the customer's to press, so it is shown, not offered. */
.crm-bb__btn.is-reply { cursor: default; }

.crm-bb__ic { font-size: 12px; line-height: 1; opacity: .75; flex: 0 0 auto; }
.crm-bb__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }

.crm-bb__media {
  display: block;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  max-width: 280px;
  text-decoration: none !important;
  color: inherit !important;
}

.crm-bb__media img,
.crm-bb__media video {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  background: rgba(0, 0, 0, .06);
}

.crm-bb__media.is-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: rgba(0, 0, 0, .06);
  border: 1px solid rgba(0, 0, 0, .10);
  font-size: 12.5px;
  font-weight: 600;
}

.crm-bb__media.is-doc .crm-bb__ic { font-size: 16px; opacity: .85; }

/* A carousel: small cards side by side, scrolled sideways inside the bubble. */
.crm-bb__strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: min(520px, 100%);
  padding-bottom: 4px;
}

.crm-bb__card {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .05);
  border: 1px solid rgba(0, 0, 0, .09);
}

.crm-bb__card .crm-bb__media { margin-bottom: 2px; }
.crm-bb__card .crm-bb__media img { height: 100px; }
.crm-bb__card .crm-bb__btns { min-width: 0; }
.crm-bb__card .crm-bb__btn { padding: 6px 8px; font-size: 12px; }
.crm-bb__ct { font-size: 12.5px; line-height: 1.35; }
.crm-bb__cd { font-size: 11.5px; line-height: 1.4; opacity: .78; white-space: pre-line; }

:root.dark .crm-bb__btn,
.dark .crm-bb__btn,
:root.dark .crm-bb__media.is-doc,
.dark .crm-bb__media.is-doc,
:root.dark .crm-bb__card,
.dark .crm-bb__card {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .12);
}

:root.dark a.crm-bb__btn:hover,
.dark a.crm-bb__btn:hover { background: rgba(255, 255, 255, .12); }