/* ──────────────────────────────────────────────
   СВЕТЛАЯ ТЕМА (ничего не трогаем: используем
   дефолтные переменные из style.css от n8n-chat)
   ────────────────────────────────────────────── */

/* ──────────────────────────────────────────────
   ТЁМНАЯ ТЕМА — Mintlify ставит класс .dark
   именно на <html>; переопределяем переменные
   ИСКЛЮЧИТЕЛЬНО здесь, чтобы они достались
   всему виджету разом
   ────────────────────────────────────────────── */
html.dark {
  /* базовая палитра */
  --chat--color-white:               #f4f4f5;
  --chat--color-light:               #262626;   /* фон body, textarea, footer */
  --chat--color-light-shade-50:      #2e2e2e;
  --chat--color-light-shade-100:     #3a3a3a;
  --chat--color-medium:              #444;
  --chat--color-dark:                #e5e5e5;   /* текст на тёмном фоне */

  /* заголовок */
  --chat--header--background:        #18181b;
  --chat--header--color:             var(--chat--color-white);

  /* тело и футер */
  --chat--body--background:          var(--chat--color-light);
  --chat--footer--background:        var(--chat--color-light);
  --chat--footer--color:             var(--chat--color-white);

  /* сообщения */
  --chat--message--bot--background:  #1d1d20;
  --chat--message--bot--color:       var(--chat--color-white);
  --chat--message--user--background: #19947f;   /* тот же secondary, но чуть темнее */
  --chat--message--user--color:      var(--chat--color-white);

  /* поле ввода */
  --chat--input--background:         var(--chat--color-light);
  --chat--input--text-color:         var(--chat--color-white);
  --chat--input--send--button--background: var(--chat--color-light);
  --chat--input--send--button--color:      #19947f;

  /* toggle-кнопка (круглая, сворачивает чат) */
  --chat--toggle--background:        #338cff;
  --chat--toggle--hover--background: #2a7bd3;
  --chat--toggle--active--background:#2066a8;
}

/* ──────────────────────────────────────────────
   ДОП. ПРАВКИ: виджет в некоторых узлах задаёт
   фон напрямую, обойдя переменные. Чиним точечно
   ────────────────────────────────────────────── */

/* header */
html.dark #n8n-chat .chat-header {
  background-color: var(--chat--header--background) !important;
  color:            var(--chat--header--color)      !important;
}

/* тело (список сообщений) и footer */
html.dark #n8n-chat .chat-body,
html.dark #n8n-chat .chat-messages-list,
html.dark #n8n-chat .chat-footer {
  background-color: var(--chat--body--background) !important;
  color:            var(--chat--footer--color)    !important;
}

/* textarea + сама обёртка ввода */
html.dark #n8n-chat .chat-input,
html.dark #n8n-chat .chat-input textarea {
  background-color: var(--chat--input--background) !important;
  color:            var(--chat--input--text-color) !important;
}
html.dark #n8n-chat .chat-input textarea::placeholder {
  color: var(--chat--color-medium) !important;
}

/* кнопка «Отправить» */
html.dark #n8n-chat .chat-input-send-button {
  background: var(--chat--input--send--button--background) !important;
  color:       var(--chat--input--send--button--color)      !important;
}

/* сообщения пользователя и бота */
html.dark #n8n-chat .chat-message.chat-message-from-bot:not(.chat-message-transparent) {
  background-color: var(--chat--message--bot--background) !important;
  color:            var(--chat--message--bot--color)      !important;
}
html.dark #n8n-chat .chat-message.chat-message-from-user:not(.chat-message-transparent) {
  background-color: var(--chat--message--user--background) !important;
  color:            var(--chat--message--user--color)      !important;
}

/* ──────────────────────────────────────────────
   РАЗМЕРЫ ШРИФТОВ, чтобы вписаться в Mintlify
   ────────────────────────────────────────────── */
#n8n-chat {
  --chat--font-family:               'Inter', sans-serif;
  --chat--heading--font-size:        1.2rem;      /* ~16 px */
  --chat--subtitle--font-size:       .875rem;   /* ~14 px */
  --chat--message--font-size:        .75rem;    /* ~12 px */
  --chat--message-line-height:       1.45;
  --chat--textarea--max-height: 6rem;
  --chat--subtitle--line-height: 1.4;
  --chat--border-radius: 1.25rem;
  --chat--spacing: 0.7rem;
}

/* применяем Inter ко всем элементам внутри виджета */
#n8n-chat, #n8n-chat * {
  font-family: var(--chat--font-family) !important;
}

/* ──────────────────────────────────────────────
   Отключаем "протекание" скролла наружу
   ────────────────────────────────────────────── */
#n8n-chat .chat-body,
#n8n-chat .chat-messages-list {
  /* 1) Не передавать события скролла дальше */
  overscroll-behavior: none !important;
  /* 2) Защита на всякий случай для только вертикальной оси */
  overscroll-behavior-y: contain !important;
  /* 3) Плавный инертный скролл на мобильных Safari/Chrome */
  -webkit-overflow-scrolling: touch !important;
}


/* ——— ФИЛЬТРЫ ——— */
#partners-filters {
  display: block;
  margin-bottom: 1.5rem;
}
#partners-filters .filter-group {
  display: flex;
  align-items: flex-start;      /* метка всегда выровнена по первой строке кнопок */
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
#partners-filters .filter-group .filter-label {
  flex: 0 0 auto;
  line-height: 1.7;
}
#partners-filters #tags-filter,
#partners-filters #countries-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  overflow-x: auto;
  overflow-y: auto;
}
#partners-filters #countries-filter {
  max-height: calc(3 * 2.2rem);
}
#partners-filters .filter-btn {
  flex: 0 0 auto;
  padding: 0.1rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #ffffff;
  color: #111827;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
#partners-filters .filter-btn:hover:not(.active):not(:disabled) {
  background-color: #f3f4f6;
}
#partners-filters .filter-btn.active {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
#partners-filters .filter-btn.active:hover {
  background-color: #1e40af;    /* чуть темнее синего */
  color: #ffffff;
}
#partners-filters .filter-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  display: none;
}

/* ——— КАРТОЧКИ ——— */
#partners-catalog .card {
  position: relative;
  display: block;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  transition: box-shadow 0.2s;
  font-weight: normal;
}
#partners-catalog .card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#partners-catalog .card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  margin-right: 4rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}
#partners-catalog .card p {
  margin-top: 0.25rem;
  font-weight: normal;
  color: #374151;
}
#partners-catalog .rating {
  position: absolute;
  top: 1rem;
  right: 1rem;
  margin-top: 0;
}
#partners-catalog .country-wrap,
#partners-catalog .tag-wrap {
  /* display: flex; */
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
}
#partners-catalog .country-badge,
#partners-catalog .tag-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  background-color: #f8f8f8;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #111827;
}
#partners-catalog .country-badge.matched,
#partners-catalog .tag-badge.matched {
  box-shadow: inset 0 0 0 2px #2563eb;
}

/* ——— UPDATED ——— */
#updated-timestamp {
  display: block;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: #6b7280;
  text-align: right;
}

/* ——— ТЁМНАЯ ТЕМА ——— */
html.dark #partners-catalog .card {
  background-color: #1f2937;
  border-color: #374151;
}
html.dark #partners-catalog .card h3,
html.dark #partners-catalog .card p,
html.dark #partners-catalog .rating,
html.dark #updated-timestamp {
  color: #d1d5db;
}
html.dark #partners-filters .filter-btn {
  background-color: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}
html.dark #partners-filters .filter-btn:hover:not(.active):not(:disabled) {
  background-color: #4b5563;
}
html.dark #partners-filters .filter-btn.active {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}
html.dark #partners-filters .filter-btn.active:hover {
  background-color: #5391f5;
}
html.dark #partners-catalog .country-badge,
html.dark #partners-catalog .tag-badge {
  background-color: #374151;
  color: #d1d5db;
}
html.dark #partners-catalog .country-badge.matched,
html.dark #partners-catalog .tag-badge.matched {
  box-shadow: inset 0 0 0 2px #3b82f6;
}


#sidebar-content {
  background-color: hsla(0,0%,100%,.05);
}

.uptime-dot > :first-child {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  color: #637189;
  background: #637189;
  position: relative;
  -ms-transform: none;
  transform: none;
  left: 7px
}

.uptime-dot > :first-child:before {
  content: '';
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background: currentColor;
  opacity: 1;
  border-radius: 50%;
  top: 0;
  left: 0
}

.uptime-dot.is-good > :first-child:before,
.uptime-dot.is-warning > :first-child:before,
.uptime-dot.is-error > :first-child:before {
  display: block;
  animation: pulse 2s infinite
}

.uptime-dot.is-good > :first-child,
.uptime-dot.is-good:hover > :first-child {
  color: #3bd671;
  background: #3bd671
}

.uptime-dot.is-error > :first-child {
  color: #df484a;
  background: #df484a
}

.uptime-dot.is-warning > :first-child {
  color: #f29030;
  background: #f29030
}

@keyframes pulse {
  0% {
    opacity: 0.5
  }

  70% {
    opacity: 0;
    transform: scale(2.5)
  }

  100% {
    opacity: 0
  }
}

@keyframes pulseBig {
  0% {
    opacity: 0.5
  }

  70% {
    opacity: 0;
    transform: scale(1.6)
  }

  100% {
    opacity: 0
  }
}


function hookHistoryMethod(method) {
  const original = history[method];
  history[method] = function(...args) {
    const result = original.apply(this, args);
    window.dispatchEvent(new Event('urlchange'));
    return result;
  };
}

hookHistoryMethod('pushState');
hookHistoryMethod('replaceState');


// State
let partners = [];
let tagsLocalization = {};
let date = null;
const selectedTags = new Set();
const selectedCountries = new Set();

const { tags: urlTags, countries: urlCountries } = getFiltersFromURL();
urlTags.forEach(t => selectedTags.add(t));
urlCountries.forEach(c => selectedCountries.add(c));

// Helpers
function getLang() {
  const parts = window.location.pathname.split('/');
  return parts[1] || 'en';
}

function getPage() {
  const parts = window.location.pathname.split('/');
  return parts[2];
}

async function loadCountries(lang) {
  const baseRes = await fetch('https://files.sip.tg/countries/en.json');
  const base = await baseRes.json();
  let override = {};
  try {
    const oRes = await fetch(`https://files.sip.tg/countries/${lang}.json`);
    if (oRes.ok) override = await oRes.json();
  } catch {}
  return {
    FLAGS: { ...base.FLAGS, ...(override.FLAGS || {}) },
    NAMES: { ...base.NAMES, ...(override.NAMES || {}) },
  };
}

function clearContainer(id) {
  const el = document.getElementById(id);
  if (el) el.innerHTML = '';
}

/**
 * Build toggle buttons
 */
function buildFilterButtons(containerId, items, selectedSet, onChange, displayFn) {
  const container = document.getElementById(containerId);
  if (!container) return;
  clearContainer(containerId);

  items.forEach(item => {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.dataset.item = item;
    btn.innerHTML = displayFn ? displayFn(item) : item;
    btn.className = 'filter-btn';
    if (selectedSet.has(item)) btn.classList.add('active');
    btn.addEventListener('click', () => {
      if (btn.disabled) return;
      if (selectedSet.has(item)) {
        selectedSet.delete(item);
        btn.classList.remove('active');
      } else {
        selectedSet.add(item);
        btn.classList.add('active');
      }
      onChange();
    });
    container.appendChild(btn);
  });
}

function updateDisabledFilters() {
  // Disable tags without matches given selectedCountries
  partners; // use
  const tagsBtns = document.querySelectorAll('#tags-filter button');
  tagsBtns.forEach(btn => {
    const code = btn.dataset.item;
    if (selectedTags.has(code)) {
      btn.disabled = false;
    } else {
      const any = partners.some(p => {
        return p.tags.includes(code) &&
          (selectedCountries.size === 0 ||
           [...selectedCountries].some(c => p.countries.includes(c)));
      });
      btn.disabled = !any;
    }
  });
  // Disable countries without matches given selectedTags
  const countryBtns = document.querySelectorAll('#countries-filter button');
  countryBtns.forEach(btn => {
    const code = btn.dataset.item;
    if (selectedCountries.has(code)) {
      btn.disabled = false;
    } else {
      const any = partners.some(p => {
        return p.countries.includes(code) &&
          (selectedTags.size === 0 ||
           [...selectedTags].some(t => p.tags.includes(t)));
      });
      btn.disabled = !any;
    }
  });
}

function renderList(partners, FLAGS, NAMES, lang) {
  const catalogEl = document.getElementById('partners-catalog');
  if (!catalogEl) return;
  const old = document.getElementById('partners-grid');
  if (old) old.remove();

  const grid = document.createElement('div');
  grid.id = 'partners-grid';
  grid.className = 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6';

  const filtered = partners.filter(p => {
    const tagMatch =
      selectedTags.size === 0 ||
      [...selectedTags].some(t => p.tags.includes(t));
    const countryMatch =
      selectedCountries.size === 0 ||
      [...selectedCountries].some(c => p.countries.includes(c));
    return tagMatch && countryMatch;
  });

  filtered.forEach(p => {
    // Card as link
    const linkUrl = (p.link && (p.link[lang] || p.link.en)) || '#';
    const card = document.createElement('a');
    card.href = linkUrl;
    card.target = '_blank';
    card.rel = 'noopener';
    card.className = 'card';

    const title = document.createElement('h3');
    title.textContent = p.name[lang] || p.name.en;
    card.appendChild(title);

    const desc = document.createElement('p');
    desc.textContent = p.description[lang] || p.description.en || '';
    card.appendChild(desc);

    if (p.rating) {
      const rating = document.createElement('div');
      rating.className = 'rating';
      rating.textContent = `⭐ ${p.rating}`;
      card.appendChild(rating);
    }

    const countryWrap = document.createElement('div');
    countryWrap.className = 'country-wrap';
    p.countries.forEach(c => {
      const span = document.createElement('span');
      span.className = 'country-badge';
      if (selectedCountries.has(c)) span.classList.add('matched');
      span.textContent = `${FLAGS[c] || ''} ${NAMES[c] || c}`;
      countryWrap.appendChild(span);
    });
    card.appendChild(countryWrap);

    const tagWrap = document.createElement('div');
    tagWrap.className = 'tag-wrap';
    p.tags.forEach(t => {
      const span = document.createElement('span');
      span.className = 'tag-badge';
      if (selectedTags.has(t)) span.classList.add('matched');
      span.textContent = tagsLocalization[lang]?.[t] || t;
      tagWrap.appendChild(span);
    });
    card.appendChild(tagWrap);

    grid.appendChild(card);
  });

  catalogEl.appendChild(grid);
}

function getFiltersFromURL() {
  const params = new URLSearchParams(window.location.search);
  return {
    tags: params.get('tags') ? params.get('tags').split(' ') : [],
    countries: params.get('countries') ? params.get('countries').split(' ') : []
  };
}

function updateURL() {
  const params = new URLSearchParams();
  if (selectedTags.size) {
    params.set('tags', [...selectedTags].join(' '));
  }
  if (selectedCountries.size) {
    params.set('countries', [...selectedCountries].join(' '));
  }
  const newUrl = window.location.pathname
               + (params.toString() ? '?' + params.toString() : '');
  history.replaceState(null, '', newUrl);
}

async function initPartnersCatalog() {
  const lang = getLang();
  const page = getPage();
  if (page != 'partners') {
    return;
  }
  let data;
  try {
    const res = await fetch('https://n8n.sip.tg/webhook/partners');
    data = await res.json();
  } catch (err) {
    console.error('Failed to load partners', err);
    return;
  }
  partners = data.partners;
  tagsLocalization = data.tags || {};
  date = data.date;

  const { FLAGS, NAMES } = await loadCountries(lang);
  const allTags = Array.from(new Set(partners.flatMap(p => p.tags)));
  const allCountries = Array.from(new Set(partners.flatMap(p => p.countries)));

  allCountries.sort((c1, c2) => {
    const name1 = NAMES[c1] || c1;
    const name2 = NAMES[c2] || c2;
    return name1.localeCompare(name2, lang, { sensitivity: 'base' });
  });
  
  const tsEl = document.getElementById('updated-timestamp');
  if (tsEl) tsEl.textContent = new Date(date).toLocaleString(lang);

  const onFilterChange = () => {
    renderList(partners, FLAGS, NAMES, lang);
    updateDisabledFilters();
    updateURL();
  };

  buildFilterButtons(
    'tags-filter',
    allTags,
    selectedTags,
    onFilterChange,
    code => tagsLocalization[lang]?.[code] || code
  );
  buildFilterButtons(
    'countries-filter',
    allCountries,
    selectedCountries,
    onFilterChange,
    code => `${FLAGS[code] || ''} ${NAMES[code] || code}`
  );

  renderList(partners, FLAGS, NAMES, lang);
  updateDisabledFilters();
}

window.addEventListener('load', initPartnersCatalog);
window.addEventListener('urlchange', initPartnersCatalog);

Key Advantages

Ready to Connect?

Home

We connect SIP telephony and Telegram calls

SIP.TG

SIP.TG = Соединяем телефонию и Telegram

Главная

Соединяем SIP-телефонию и Telegram-звонки

Каталог партнёров, информация о партнёрской программе, вознаграждении и сотрудничестве

Обратиться к партнёру

Партнёры SIP.TG

Главная страница документации SIP.TG

Настроить самостоятельно

Документация SIP.TG

Введение в режим Софтфон, как использовать Telegram в качестве SIP-клиента

Обзор возможностей

Обзор возможностей Софтфона

Подробное руководство по настройке режима Софтфон в SIP.TG, включая управление SIP-аккаунтами и их настройками.

Настройка Софтфона

Совершение звонков, выбор линии, запись разговоров, режим Callback, входящие вызовы и телефонная книга Android.

Как пользоваться

Советы по диагностике неполадок при использовании Софтфона, типовые ошибки и их расшифровка.

Вопросы и решение проблем

Введение в режим Шлюз для подключения Telegram и АТС

Обзор возможностей Шлюза

Создание сессии для работы Шлюза SIP.TG и настройка параметров Telegram-аккаунта.

Взаимодействие с Telegram

Типы подключений, аудиокодеки, DTMF, приоритеты аккаунтов, доверенные IP, типы номеров Telegram и другие параметры

Взаимодействие с АТС

Список возможных ошибок для режима Шлюз

Общее описание модельного ряда подписок SIP.TG

Обзор подписок

Роли Плательщика и Владельца, процесс активации, способы оплаты, налоги, автопродление и перенос подписки.

Подключение и продление

Настройка и использование собственных Worker-серверов и Хранилища сессий Telegram в рамках платформы SIP.TG

Модули Worker и Storage

API Documentation

Terms and Conditions

Privacy and Cookies Policy

Partner directory, information about the partner program, rewards, and collaboration

Contact a Partner

SIP.TG Partners

Set up yourself

SIP.TG Documentation

Introduction to Softphone mode — using Telegram as a SIP client

Feature Overview

Softphon features overview

Detailed guide to setting up Softphone mode in SIP.TG, including managing SIP accounts and their settings.

Softphone Setup

Making calls, line selection, call recording, Callback mode, incoming calls, and Android phone book.

How to Use

Tips for troubleshooting when using Softphone, typical errors and their interpretation.

Troubleshooting

Introduction to Gateway mode for connecting Telegram and PBX

Gateway features overview

Creating a session for SIP.TG Gateway operation and configuring Telegram account parameters.

Interaction with Telegram

Connection types, audio codecs, DTMF, account priorities, trusted IPs, Telegram number types and other parameters

Interaction with PBX

General description of SIP.TG subscription model range

Subscriptions Overview

Payer and Owner roles, activation process, payment methods, taxes, auto-renewal and subscription transfer.

Connection and Renewal

Setting up and using your own Worker servers and Telegram Session Storage within the SIP.TG platform

Worker and Storage Modules

SIP.TG = Conectando telefonía y Telegram

Inicio

Conectamos la telefonía SIP y las llamadas de Telegram

Directorio de socios, información sobre el programa de socios, recompensas y colaboración

Contactar a un Socio

Socios de SIP.TG

Página principal de la documentación de SIP.TG

Configúralo tú mismo

Documentación de SIP.TG

Introducción al modo Softphone — usando Telegram como cliente SIP

Descripción general

Descripción general de las funciones de Softphone

Guía detallada para configurar el modo Softphone en SIP.TG, incluyendo la gestión de cuentas SIP y sus ajustes.

Configuración del Softphone

Realizar llamadas, selección de línea, grabación de llamadas, modo Callback, llamadas entrantes y libreta de direcciones de Android.

Cómo usar

Consejos para solucionar problemas al usar Softphone, errores típicos y su interpretación.

Solución de problemas

Introducción al modo Gateway para conectar Telegram y PBX

Descripción general de las funciones de Gateway

Creación de una sesión para el funcionamiento de Gateway SIP.TG y configuración de parámetros de cuenta de Telegram.

Interacción con Telegram

Tipos de conexiones, códecs de audio, DTMF, prioridades de cuentas, IPs confiables, tipos de números de Telegram y otros parámetros

Interacción con la PBX

Lista de posibles errores para el modo Gateway

Descripción general de la gama de modelos de suscripción de SIP.TG

Resumen de Suscripciones

Roles de Pagador y Propietario, proceso de activación, métodos de pago, impuestos, renovación automática y transferencia de suscripción.

Conexión y Renovación

Configuración y uso de sus propios servidores Worker y almacenamiento de sesiones de Telegram dentro de la plataforma SIP.TG

Softphone

Gateway

​Key Advantages

​Ready to Connect?

Contact a Partner

Configure It Yourself

Key Advantages

Ready to Connect?