/* أمثلة مُضيف */

/* شارة «متوفر على سلة» زرقاء في تصميم مُضيف، لا بلون التطبيق */
.app-badge--blue {
  background: var(--blue);
  color: var(--on-accent);
}

/* المحادثة: رسائل العميل في البداية (يمين)، وردود المساعد في النهاية (يسار) */
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat__msg {
  display: flex;
  justify-content: flex-start;
}

.chat__msg--bot {
  justify-content: flex-end;
}

.chat__bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.7;
}

.chat__msg--customer .chat__bubble {
  background: var(--blue);
  color: var(--on-accent);
}

.chat__msg--bot .chat__bubble {
  background: var(--mock-bubble);
  color: var(--ink);
}