/* =============================================================
 * widget-overrides.css — локальная перекраска AI-виджета (vekexpressbot)
 * под стиль сайта. БОТ НЕ ТРОГАЕМ: widget.js/css грузятся с прода как есть,
 * здесь только переопределяем .sb-* на нашей стороне.
 *
 * Виджет инжектит свой CSS через JS (позже нашего <link>), поэтому для
 * победы в каскаде используем !important. Большинство цветов виджета идёт
 * через CSS-переменные на .sb-root — переопределяем их, остальное точечно.
 * ============================================================= */

.sb-root {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  color: #1d1d1d !important;
  /* ВЕК-палитра: коралл-акцент + paper/warm-grey */
  --sb-primary:       #dc341f !important;
  --sb-primary-dark:  #b82d18 !important;
  --sb-primary-light: #fa523d !important;
  --sb-border:        #e3ded6 !important;
  --sb-muted:         #6d6d6d !important;
  --sb-bg:            #ffffff !important;
  --sb-surface:       #fafaf8 !important;   /* paper */
  --sb-bubble-bot:    #f4f3ef !important;   /* warm-grey */
  --sb-bubble-user:   #dc341f !important;
  --sb-radius:        18px !important;
}

/* Облачко-приглашение — warm-black (в виджете цвет захардкожен) */
.sb-root .sb-tease {
  background: linear-gradient(145deg, #2a2420 0%, #1a1715 100%) !important;
  border-color: #1a1715 !important;
  box-shadow: 0 16px 40px rgba(20,18,16,0.34), 0 4px 12px rgba(20,18,16,0.22) !important;
}
.sb-root .sb-tease::before { border-top-color: #1a1715 !important; }

/* Шапка панели — warm-black (как тёмный сайдбар/футер), а не коралл */
.sb-root .sb-header {
  background: linear-gradient(135deg, #2a2420 0%, #1a1715 100%) !important;
}

/* Текст сообщений. В виджете .sb-bubble по умолчанию светлый (рассчитан на
   тёмный фон пузыря) → на нашем светлом warm-grey пузыре был невидим.
   Бот — графит на warm-grey, пользователь — белый на коралле. */
.sb-root .sb-msg-assistant .sb-bubble {
  background: #f4f3ef !important;
  color: #1d1d1d !important;
}
.sb-root .sb-msg-user .sb-bubble {
  background: #dc341f !important;
  color: #ffffff !important;
}
/* Поле ввода — тёмный текст на белом, читаемый placeholder */
.sb-root .sb-input {
  background: #ffffff !important;
  color: #1d1d1d !important;
}
.sb-root .sb-input::placeholder { color: #9a958c !important; }

/* Мелкая строка согласия с политикой (добавляется widget-consent.js).
   Аккуратно, неброско — не портит вид бота. */
.sb-root .sb-consent {
  padding: 6px 16px 10px !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  text-align: center !important;
  color: #a8a29a !important;
  background: transparent !important;
}
.sb-root .sb-consent a {
  color: #6d6d6d !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.sb-root .sb-consent a:hover { color: #dc341f !important; }

/* На мобиле (<769px) поднимаем виджет НАД плавающим таб-баром, чтобы launcher
   и облачко-приглашение никогда его не перекрывали.
   Таб-бар занимает снизу: safe-area + 12px (отступ) + 56px (высота) = safe-area + 68px.
   Поднимаем якорь .sb-root на safe-area + 80px → зазор ~12px над баром.
   Десктоп не трогаем (там таб-бара нет, остаётся bottom: 24px). */
@media (max-width: 768px) {
  .sb-root {
    bottom: calc(env(safe-area-inset-bottom) + 80px) !important;
  }
}

/* Кнопка-кругляшок: коралловая рамка (через --sb-primary-dark уже коралл) */