/* ============================================================
   Portable Inbox · акцентная тема поверх штатной тёмной темы Chatwoot v4
   Внедряется через nginx sub_filter (/st-theme.css). Полностью обратимо.
   Не задаём фоны/цвета панели — это делает штатный Dark Mode.

   ОТПОЛИРОВАНО 22.06.26 по дизайн-плейбуку (top-designers):
   — один акцент (#3390ec) вместо разнобоя двух синих;
   — мягкая глубина тенью, а не жёсткими линиями;
   — ясное, но спокойное выделение активного диалога;
   — видимый фокус поля ответа; читаемый кегль/интерлиньяж;
   — быстрый сдержанный моушн + уважение prefers-reduced-motion.

   Только СТАБИЛЬНЫЕ хуки между версиями:
   .left-bubble / .right-bubble / .conversation.active /
   .reply-box / .ProseMirror / nav.
   ============================================================ */

:root{
  --pi-accent:#3390ec;                       /* единый синий-акцент (Telegram) */
  --pi-accent-soft:rgba(51,144,236,.12);     /* подсветка активного диалога ~12% */
  --pi-ease:cubic-bezier(.33,1,.68,1);
}

/* ---------- Форма пузырей: мягче, читабельнее, лёгкая глубина ---------- */
.left-bubble,
.right-bubble{
  border-radius:16px !important;
  font-size:15px !important;
  line-height:1.5 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.22) !important;   /* мягкая глубина, не обводка */
}
.right-bubble{ border-bottom-right-radius:6px !important; }
.left-bubble{  border-bottom-left-radius:6px  !important; }

/* ---------- Исходящие (оператор) → единый синий + белый текст ---------- */
.right-bubble{
  background:var(--pi-accent) !important;
  color:#ffffff !important;
  border:none !important;
}
.right-bubble .prose-bubble,
.right-bubble .prose-bubble *{ color:#ffffff !important; }
.right-bubble a{ color:#ffffff !important; text-decoration:underline; }
.right-bubble svg{ color:#dbeeff !important; opacity:.9; }
/* мета/время в синем пузыре — приглушить, а не жёсткий белый */
.right-bubble time,
.right-bubble .text-xs{ color:rgba(255,255,255,.72) !important; }

/* ---------- Статус исходящего сообщения: заметные галки как в Telegram ----------
   Chatwoot сам выбирает иконку по фактическому статусу сообщения:
   одна галка = отправлено, две = доставлено, две синие = прочитано.
   Telegram Bot API сейчас подтверждает только отправку/ошибку, поэтому здесь
   меняем исключительно вид и не создаём ложные delivered/read-события. */
.right-bubble .i-lucide-check,
.right-bubble .i-lucide-check-check{
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  color:rgba(255,255,255,.94) !important;
  opacity:1 !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
  cursor:help;
}
.right-bubble .i-lucide-check-check[class*="text-[#7EB6FF]"]{
  color:#b9ddff !important;
}

/* ---------- Telegram username: видимый переход из шапки диалога ---------- */
.pi-telegram-username{
  display:inline-flex;
  align-items:center;
  min-width:0;
  max-width:220px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:18px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex-shrink:1;
}
.pi-telegram-username--link{
  color:#8bc7ff !important;
  background:rgba(51,144,236,.16);
  border:1px solid rgba(51,144,236,.34);
  text-decoration:none !important;
  cursor:pointer;
}
.pi-telegram-username--link:hover,
.pi-telegram-username--link:focus-visible{
  color:#ffffff !important;
  background:rgba(51,144,236,.34);
  border-color:rgba(139,199,255,.72);
  outline:none;
}
.pi-telegram-username--missing{
  color:rgba(255,255,255,.58) !important;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  cursor:default;
}

/* ---------- Активный диалог в списке: ясно, но спокойно ----------
   Штатно выбранный диалог почти не отличается (bg-n-background).
   Даём акцент-подсветку + левый бар «вы здесь» — быстрый поиск глазами. */
.conversation.active{
  background:var(--pi-accent-soft) !important;
  box-shadow:inset 3px 0 0 0 var(--pi-accent) !important;
}

/* ---------- Поле ответа: читаемость + видимый фокус (плейбук: состояния) ---------- */
.ProseMirror{ font-size:15px !important; line-height:1.55 !important; }
.reply-box:focus-within,
.reply-box__top:focus-within{
  box-shadow:inset 0 2px 0 0 var(--pi-accent) !important;   /* тонкая акцент-линия сверху */
}

/* ---------- Микро-моушн: спокойный, быстрый ---------- */
.conversation{ transition:background .14s var(--pi-ease); }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------- Минимализм: прячем редко используемые разделы главного меню ----------
   Chatwoot v4: пункт рельса = <li> с прямым потомком <div role="button" title="...">.
   Старое правило по a[href] их НЕ ловило (это не ссылки) — заменено на title-тултип.
   Прячем: Капитан (встроенный AI, не используется — у нас внешний бот) · Отчёты ·
   Кампании · Центр поддержки. Оставляем: Диалоги · Контакты · Настройки.
   title = ru-локаль (зафиксирована); сменят локаль — правило просто перестанет
   матчить и пункты вернутся (не сломается). Пункты остаются доступны по прямому URL. */
li:has(> [role="button"][title="Капитан"]),
li:has(> [role="button"][title="Отчёты"]),
li:has(> [role="button"][title="Кампании"]),
li:has(> [role="button"][title="Центр поддержки"]){
  display:none !important;
}