/* === Зарница: WhatsApp-стиль (Element 1.12.4, Compound tokens) === */

/* Включаем bubble-режим глобально не можем — он через setting.
   Перекраска через CPD-токены + реальные классы: */

:root {
  --cpd-color-bg-action-primary-rest: #25d366 !important;
  --cpd-color-bg-action-primary-hover: #1fbf5a !important;
  --cpd-color-green-300: #d9fdd3 !important;
  --cpd-color-bg-canvas-default: #efeae2 !important;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-header: #075e54;
}

/* Свои пузыри — WA-светло-зелёный */
.mx_EventTile[data-layout=bubble][data-self=true] .mx_EventTile_line,
.mx_EventTile[data-layout=bubble][data-self=true] {
  --backgroundColor: #d9fdd3 !important;
}
/* Чужие пузыри — белые */
.mx_EventTile[data-layout=bubble][data-self=false] .mx_EventTile_line,
.mx_EventTile[data-layout=bubble][data-self=false] {
  --backgroundColor: #ffffff !important;
}

/* Фон ленты сообщений — беж (WA) */
.mx_RoomView_messagePanel,
.mx_RoomView_messageListWrapper,
.mx_RoomView_timeline {
  background: #efeae2 !important;
}

/* Шапка чата — WA-тёмно-зелёная */
.mx_RoomHeader {
  background-color: var(--wa-header) !important;
  border-bottom: none !important;
}
.mx_RoomHeader_heading,
.mx_RoomHeader_info {
  color: #fff !important;
}

/* Список чатов слева */
.mx_LeftPanel,
.mx_LeftPanel_roomListWrapper {
  background: #ffffff !important;
}
.mx_RoomTile[data-selected=true], .mx_RoomTile_selected {
  background: #e7f8ee !important;
}

/* Композер (поле ввода) — белый, скруглённый */
.mx_SendWysiwygComposer,
.mx_BasicMessageComposer_input {
  background: #fff !important;
  border-radius: 12px !important;
}