/* ============================================================================
   Слой поверх интерфейса CRM. Оригинальные файлы не редактируются.

   Селекторы взяты из разобранной сборки ChatPage, а не подобраны наугад:

     исходящее : rounded-lg px-3 py-2 rounded-tr-[4px] bg-primary text-primary-foreground
     входящее  : rounded-lg px-3 py-2 bg-muted border
     от бота   : bg-purple-600

   Класс rounded-tr-[4px] приложение ставит ТОЛЬКО своим сообщениям — по нему
   и различаем стороны переписки.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ГАЛОЧКИ СТАТУСА
   Приложение прячет их классами opacity-0 group-hover:opacity-100. Отменять
   эти классы скопом нельзя — на них держатся кнопки действий над сообщением.
   --------------------------------------------------------------------------- */
[data-message-id] svg.lucide-check-check,
[data-message-id] svg.lucide-check {
  opacity: 1 !important;
  width: 1.05rem;
  height: 1.05rem;
  stroke-width: 2.6;
}

[data-message-id] :has(> svg.lucide-check-check),
[data-message-id] :has(> svg.lucide-check) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------------------------------------------------------------------------
   2. ПАЛИТРА
   Тема на CSS-переменных (shadcn/ui), поэтому меняем их — оформление
   остаётся согласованным. Акцент был зелёный, ставим синий Telegram #3390ec.
   --------------------------------------------------------------------------- */
:root {
  --primary: oklch(62.6% 0.164 255);
  --primary-foreground: oklch(100% 0 0);
  --ring: oklch(62.6% 0.164 255);
  --sidebar-primary: oklch(62.6% 0.164 255);
  --sidebar-ring: oklch(62.6% 0.164 255);

  --tg-out: #effdde;        /* свои — светло-зелёные */
  --tg-out-text: #0f1419;
  --tg-in: #ffffff;         /* чужие — белые */
  --tg-in-text: #0f1419;
  --tg-meta: #8696a0;
  --tg-tick: #4fae4e;       /* прочитано — зелёная галочка Telegram */
}

.dark {
  --primary: oklch(66% 0.145 258);
  --primary-foreground: oklch(100% 0 0);
  --ring: oklch(66% 0.145 258);
  --sidebar-primary: oklch(66% 0.145 258);
  --sidebar-ring: oklch(66% 0.145 258);

  --tg-out: #2b5278;
  --tg-out-text: #ffffff;
  --tg-in: #182533;
  --tg-in-text: #ffffff;
  --tg-meta: #7d8b99;
  --tg-tick: #61bfff;
}

/* цвет галочек: одна серая, двойная — как в Telegram */
[data-message-id] svg.lucide-check { color: var(--tg-meta); }
[data-message-id] svg.lucide-check-check { color: var(--tg-tick); }

/* ---------------------------------------------------------------------------
   3. ПУЗЫРИ
   --------------------------------------------------------------------------- */

/* свои сообщения */
[data-message-id] .rounded-tr-\[4px\] {
  background-color: var(--tg-out) !important;
  color: var(--tg-out-text) !important;
  border: none !important;
  border-radius: 12px 6px 12px 12px !important;
  box-shadow: 0 1px 1.5px rgba(16, 35, 47, 0.14);
}

[data-message-id] .rounded-tr-\[4px\]:hover {
  background-color: var(--tg-out) !important;
}

/* чужие сообщения */
[data-message-id] .rounded-lg.px-3.py-2.bg-muted {
  background-color: var(--tg-in) !important;
  color: var(--tg-in-text) !important;
  border: none !important;
  border-radius: 6px 12px 12px 12px !important;
  box-shadow: 0 1px 1.5px rgba(16, 35, 47, 0.14);
}

/* ссылки внутри своих пузырей должны остаться читаемыми на светлом фоне */
[data-message-id] .rounded-tr-\[4px\] a { color: #168acd !important; }

/* время и служебные подписи */
[data-message-id] .text-muted-foreground,
[data-message-id] time {
  color: var(--tg-meta) !important;
  font-size: 0.72rem;
}

/* плотнее, как в Telegram: у приложения между сообщениями mb-4 */
[data-message-id] { margin-bottom: 0 !important; }
.mb-4:has(> [data-message-id]) { margin-bottom: 0.35rem !important; }

/* ---------------------------------------------------------------------------
   4. МЕЛОЧИ
   --------------------------------------------------------------------------- */

/* скруглённое поле ввода */
main textarea { border-radius: 18px !important; }

/* тонкая полоса прокрутки */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 140, 160, 0.45) transparent;
}