/*
 * Эточатбот — глобальные стили
 * Tailwind CDN подключается в layout-ах.
 * Здесь — только кастомные override'ы.
 */

/* Системный шрифт клиентского устройства:
 * Mac/iOS → San Francisco, Windows → Segoe UI, Android → Roboto,
 * Linux → Cantarell/Ubuntu, эмодзи — нативные шрифты ОС.
 * Это даёт нативное ощущение ЛК на каждой платформе без подгрузки веб-шрифтов. */
html, body, button, input, select, textarea, optgroup {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Плавный переход страниц */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Скрыть спиннер числовых inputs в Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Убрать стрелки числовых inputs в Chrome/Safari */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Анимация спиннера кнопок */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Global text tone override requested by design */
.text-gray-600 {
  color: #0c0c0c;
}

/* Global background override requested by design */
.bg-white {
  background-color: #fafafa;
}

/* Interactive controls: always show pointer for clickable buttons/links */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
a[href] {
  cursor: pointer;
}

/*
 * ---------------------------------------------------------------------------
 * Floating tooltips (`[data-tip]`).
 *
 * Рендерятся через JS в body с `position: fixed`, чтобы гарантированно
 * не подрезаться overflow-контейнерами (напр. scroll-панелью сайдбара).
 * См. public/assets/js/panel.js, блок `initFloatingTooltips`.
 * ---------------------------------------------------------------------------
 */
.tooltip-floating {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  padding: 7px 10px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .14s ease, transform .14s ease;
  max-width: 280px;
}
.tooltip-floating.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.tooltip-floating::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #111827;
  border-left: 0;
}
.tooltip-floating.is-below::before {
  top: 0;
  right: 50%;
  transform: translate(50%, -100%);
  border: 5px solid transparent;
  border-bottom-color: #111827;
  border-top: 0;
}

/*
 * Font Awesome icons rendered via <i class="fa-…"> use a web-font glyph, so
 * Tailwind's size-* utilities (width/height) don't control the actual icon
 * size — font-size does. Bring the two back in sync so existing markup
 * (`<i class="fa-solid fa-house size-5">`) renders predictably.
 */
i.fa-solid, i.fa-regular, i.fa-brands, i.fa-light, i.fa-thin, i.fa-duotone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
i.fa-solid.size-3, i.fa-regular.size-3, i.fa-brands.size-3,
i.fa-light.size-3, i.fa-thin.size-3, i.fa-duotone.size-3 { font-size: 12px; }
i.fa-solid.size-3\.5, i.fa-regular.size-3\.5, i.fa-brands.size-3\.5,
i.fa-light.size-3\.5, i.fa-thin.size-3\.5, i.fa-duotone.size-3\.5 { font-size: 13px; }
i.fa-solid.size-4, i.fa-regular.size-4, i.fa-brands.size-4,
i.fa-light.size-4, i.fa-thin.size-4, i.fa-duotone.size-4 { font-size: 14px; }
i.fa-solid.size-5, i.fa-regular.size-5, i.fa-brands.size-5,
i.fa-light.size-5, i.fa-thin.size-5, i.fa-duotone.size-5 { font-size: 17px; }
i.fa-solid.size-6, i.fa-regular.size-6, i.fa-brands.size-6,
i.fa-light.size-6, i.fa-thin.size-6, i.fa-duotone.size-6 { font-size: 19px; }
i.fa-solid.size-7, i.fa-regular.size-7, i.fa-brands.size-7,
i.fa-light.size-7, i.fa-thin.size-7, i.fa-duotone.size-7 { font-size: 22px; }
i.fa-solid.size-8, i.fa-regular.size-8, i.fa-brands.size-8,
i.fa-light.size-8, i.fa-thin.size-8, i.fa-duotone.size-8 { font-size: 26px; }

/*
 * ---------------------------------------------------------------------------
 * daterangepicker (jquery) — перекраска под фирменные цвета ЛК.
 * Библиотека рендерит свой UI и ingнорирует Tailwind; здесь мы мапим все
 * ключевые состояния (active, in-range, hover, preset rangbuttons, apply)
 * на CSS-переменные --color-brand-*, которые уже прокинуты в <html> через
 * BotTheme::cssVars(). Поэтому пикер автоматически будет следовать активной
 * теме, где бы он ни использовался (stats, broadcasts, conversations и т.д.).
 * ---------------------------------------------------------------------------
 */
.daterangepicker {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .08);
  font-family: inherit;
  color: #111827;
}
.daterangepicker:before, .daterangepicker:after { display: none; }
.daterangepicker .calendar-table {
  border-radius: 10px;
  border: 0;
  background: transparent;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  border-radius: 8px;
  color: #111827;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background: var(--color-brand-50, #eef2ff);
  color: var(--color-brand-700, #1e3a8a);
  border-color: transparent;
}
.daterangepicker td.in-range {
  background: var(--color-brand-50, #eef2ff);
  color: var(--color-brand-700, #1e3a8a);
}
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background: var(--color-brand-600, #1d4ed8);
  color: #ffffff;
  border-color: transparent;
}
.daterangepicker td.start-date.end-date {
  border-radius: 8px;
}
.daterangepicker td.start-date { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.daterangepicker td.end-date   { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.daterangepicker td.week { color: #9ca3af; font-weight: 500; }
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background: transparent;
  color: #cbd5e1;
}
.daterangepicker .ranges ul { padding: 6px; }
.daterangepicker .ranges li {
  border-radius: 8px;
  color: #111827;
  padding: 7px 10px;
  font-size: 13px;
  transition: background .12s ease, color .12s ease;
}
.daterangepicker .ranges li:hover {
  background: var(--color-brand-50, #eef2ff);
  color: var(--color-brand-700, #1e3a8a);
}
.daterangepicker .ranges li.active {
  background: var(--color-brand-600, #1d4ed8);
  color: #ffffff;
}
.daterangepicker .drp-buttons .btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid transparent;
}
.daterangepicker .drp-buttons .btn.btn-primary,
.daterangepicker .drp-buttons .applyBtn {
  background: var(--color-brand-700, #1d4ed8);
  color: #ffffff;
}
.daterangepicker .drp-buttons .btn.btn-primary:hover,
.daterangepicker .drp-buttons .applyBtn:hover {
  background: var(--color-brand-600, #2563eb);
}
.daterangepicker .drp-buttons .btn.btn-default,
.daterangepicker .drp-buttons .cancelBtn {
  background: #ffffff;
  color: #111827;
  border-color: #e5e7eb;
}
.daterangepicker .drp-buttons .btn.btn-default:hover,
.daterangepicker .drp-buttons .cancelBtn:hover {
  background: #f9fafb;
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 3px 6px;
  color: #111827;
  background: #ffffff;
}
.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
  outline: 2px solid var(--color-brand-500, #3b82f6);
  outline-offset: 1px;
  border-color: transparent;
}
.daterangepicker .drp-selected { color: #6b7280; font-size: 12px; }

/*
 * ---------------------------------------------------------------------------
 * Responsive baseline — максимальная совместимость с телефонами, планшетами
 * и компьютерами разных размеров. Не затрагивает конструктор автоматизации
 * (там используются абсолютные координаты блоков на canvas).
 * ---------------------------------------------------------------------------
 */

/* Никогда не даём таблицам, предварительным просмотрам и коду растягивать
 * страницу в ширину на узких экранах. Таблицы — всегда со скроллом. */
@media (max-width: 767px) {
  main table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Картинки по умолчанию отзывчивые. */
main img, main video { max-width: 100%; height: auto; }

/* Длинные строки (emails, токены, ссылки) не должны разрывать layout. */
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* На узких экранах плотнее паддинги основного контейнера. */
@media (max-width: 639px) {
  main .px-4, main .sm\:px-6, main .lg\:px-8 { padding-left: 14px; padding-right: 14px; }
  /* Крупные H1 — чуть меньше, чтобы не переполнять экран. */
  main h1.text-2xl, main h1.text-3xl { font-size: 20px; line-height: 1.25; }
  main .text-2xl { font-size: 20px; }
  main .text-3xl { font-size: 22px; }
}

/* Хлебные крошки — прячем лишние элементы на совсем узких экранах. */
@media (max-width: 380px) {
  nav[aria-label="Breadcrumb"] li:not(:last-child):not(:first-child) { display: none; }
}

/*
 * Страница диалогов (conversations / channels) — мобильный UX.
 * На мобильных устройствах, когда открыт диалог, сайдбар со списком скрыт
 * (`.dialogs-sidebar.hidden md:flex`). Показываем кнопку «←» в заголовке чата
 * — она возвращает к списку без перезагрузки.
 */
.chat-root { min-height: 0; }
@media (max-width: 767px) {
  .chat-root .dialogs-sidebar { width: 100% !important; }
  .chat-root #chat-panel .compose-wrap { margin-left: 6px; margin-right: 6px; }
  .chat-root #meta-panel { padding-left: 12px; padding-right: 12px; }
}

/* Аккуратные чипсы-фильтры: единое состояние активного фильтра. */
.filter-chip.active-chip {
  background-color: var(--color-brand-600, #0057cc);
  color: #ffffff;
}
.filter-chip.active-chip span { color: rgba(255,255,255,0.75); }

/* Группа тегов: плавное разворачивание. */
[data-tag-extra].hidden { display: none !important; }

/* ---------------------------------------------------------------------------
 * Мобильный UX: tap-highlight, iOS-zoom-on-focus, safe-area, viewport.
 * Эти правила применяются глобально и дают «нативное» ощущение на iPhone/iPad
 * и Android без дополнительной разметки.
 * --------------------------------------------------------------------------- */

/* Отключаем синее/серое «пятно» тапа на тач-устройствах — оно выглядит дёшево.
 * Focus-visible ring остаётся рабочим (используем outline, не tap-highlight). */
html {
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari увеличивает масштаб при фокусе на input c font-size < 16px.
 * Минимум 16px для всех интерактивных полей убирает этот прыжок. Визуально —
 * сохраняем класс text-sm через line-height, чтобы не ломать макет. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Safe-area для айфонов с нотчем/Dynamic Island и Android 13+ edge-to-edge.
 * В standalone-режиме PWA статус-бар прозрачный — без этого кнопка меню
 * «прилипает» к самой верхушке. Применяем только там, где это реально нужно:
 * top — мобильный топбар; bottom — input-бар чата; inline — общий контент. */
@supports (padding-top: env(safe-area-inset-top)) {
  /* Мобильный топбар (hamburger+лого) в panel-layout-е — добавляем отступ сверху. */
  body > div.flex > div.flex > div.h-14.lg\:hidden {
    padding-top: env(safe-area-inset-top);
    height: calc(3.5rem + env(safe-area-inset-top));
  }
  /* В fullscreen-режиме (чат) safe-area на уровне main — обеспечивается
   * внутренними правилами .chat-root ниже. */
}

/* 100dvh на iOS: даже в обычных браузерных окнах Chrome/Safari URL-бар
 * прячется и 100vh «прыгает». dvh устраняет это. Где мы явно используем
 * 100vh/h-screen — превращаем в dvh. */
.h-dvh { height: 100dvh; }
.min-h-dvh { min-height: 100dvh; }
.max-h-dvh { max-height: 100dvh; }

/* Чтобы `<body class="h-full">` + `<html class="h-full">` корректно вёл себя
 * на iOS (не добавлял прокрутку из-за адресной строки) — используем dvh. */
@media (max-width: 767px) {
  html.h-full { height: 100dvh; }
  body.h-full { height: 100dvh; }
}

/* ---------------------------------------------------------------------------
 * Страница диалогов — доп. мобильные правила.
 * Чат с композером должен корректно вести себя при появлении экранной
 * клавиатуры, учитывать safe-area-inset-bottom (home indicator) и не
 * скроллить страницу за пределы видимой области.
 * --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Сам контейнер чата занимает всю доступную высоту — без «пустых» полосок
   * над клавиатурой. visual viewport в современных браузерах решает остальное. */
  .chat-root { min-height: 100dvh; }

  /* Composer-бар — sticky снизу с учётом home-indicator'а. Без этого на
   * iPhone 14/15/16 нижняя кромка кнопки «отправить» съедается. */
  .chat-root .compose-wrap {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  }

  /* Шапка чата — чуть плотнее на маленьких экранах. */
  .chat-root #chat-header { padding-top: 8px; padding-bottom: 8px; }

  /* Мобильная версия списка диалогов не должна «жевать» аватарки. */
  .chat-root .dialogs-sidebar .dialog-row { min-height: 56px; }
}

/* Компактные tap-targets: все интерактивные элементы в админке — не меньше
 * 36px по вертикали (WCAG минимум 44px, но в плотной admin-UI допустим 36px
 * со штатной пикcелной сеткой Tailwind). Применяется только к явно отмеченным
 * иконочным кнопкам, чтобы не ломать inline-ссылки в тексте. */
@media (max-width: 767px) {
  button.size-8, a.size-8 { min-height: 32px; min-width: 32px; }
  button.size-9, a.size-9 { min-height: 36px; min-width: 36px; }
  button.size-10, a.size-10 { min-height: 40px; min-width: 40px; }
}

/* Убираем overscroll-bounce в чатовом скролле и на фиксированных layout-ах —
 * это частый источник «страница подпрыгивает, когда дошёл до низа» на iOS. */
.no-overscroll { overscroll-behavior: contain; }
.chat-root, .chat-root > main, #messages-area, #dialogs-list { overscroll-behavior: contain; }

/* ---------------------------------------------------------------------------
 * Универсальная модалка приложения (<dialog class="ec-modal">).
 *
 * Проблема: в iOS Safari / WebKit и в некоторых Android-браузерах нативный
 *   <dialog>[open] при showModal() не всегда получает корректные
 *   position/inset/margin — из-за CSS-контейнеров с transform/overflow-hidden
 *   в layout-е модалка «улетает» в левый/правый верхний угол.
 * Решение: задаём надёжные геометрические правила на явный класс .ec-modal,
 *   чтобы ни один родительский stacking context не мог сломать центровку.
 * --------------------------------------------------------------------------- */
dialog.ec-modal[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  /* Защита от «улетевших» модалок: width/height не зажимаются, но и не
   * растягиваются больше экрана. Конкретные ширины остаются на Tailwind-
   * утилитах у самого <dialog>, это лишь верхняя граница. */
  max-width: min(96vw, 640px);
  max-height: min(92dvh, 92vh);
  overflow: auto;
  /* iOS momentum scroll внутри модалки. */
  -webkit-overflow-scrolling: touch;
}
dialog.ec-modal[open]::backdrop {
  background: rgba(15, 23, 42, .55);
}
/* На узких экранах делаем модалку «листом» снизу — так удобнее дотянуться
 * большим пальцем, и не страдает safe-area-inset-bottom. */
@media (max-width: 480px) {
  dialog.ec-modal[open] {
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ---------------------------------------------------------------------------
 * Плавающая панель действий в нижней части длинных форм (например, при
 * редактировании канала): кнопка «Сохранить» всегда доступна, не требует
 * прокручивать страницу до конца.
 * --------------------------------------------------------------------------- */
.ec-sticky-actions {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 30;
}

@media (max-width: 767px) {
  body.ec-panel-fullscreen #ec-support-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.75rem);
  }
}