/* ═══════════════════════════════════════════════════════════════
   TIMPRO — Глобальная адаптация: телефоны, планшеты, ноутбуки.
   Подключается ПОСЛЕДНИМ на всех страницах.
   Принцип на телефоне: боковые меню СВОРАЧИВАЮТСЯ в выдвижные
   ящики (drawer): левое меню — по кнопке ☰, правые панели —
   шторками поверх контента. Чат: список ⇄ диалог с кнопкой «назад».
   ═══════════════════════════════════════════════════════════════ */

img, video { max-width: 100%; }

/* Кнопки мобильной навигации — по умолчанию скрыты (видны только на телефоне) */
#mNavBtn, #mNavOverlay { display: none; }

@media (pointer: coarse) {
  .btn, .icon-btn, .nav-item, .cab-tab { min-height: 40px; }
  .input, .props-input, select, textarea { font-size: 16px !important; } /* iOS не зумит поля ≥16px */
  /* Наводящийся тулбар над сообщением (😊 ✏️ ↩ 🗑) — только для мыши. На тач-
     экране касание даёт «залипающий» :hover и панель всплывает поверх сообщения.
     Прячем её: на мобильном действия — свайп влево (полное меню) и долгое нажатие. */
  .msg-actions { display: none !important; }
}
@media (hover: none) {
  .msg-bubble-wrap:hover .msg-actions { display: none !important; }
}

/* ══════════════ НОУТБУКИ (≤1400) ══════════════ */
@media (max-width: 1400px) {
  .dialogs-panel { width: 360px; }   /* +20% — больше места под метки */
  /* Панель клиента открывается ТОЛЬКО по кнопке (.open) — закрытая остаётся width:0.
     Здесь лишь сужаем ОТКРЫТУЮ панель, чтобы она не съедала чат на ноутбуке. */
  .client-panel.open { width: 270px; min-width: 270px; }
}

/* ══════════════ ПЛАНШЕТЫ (769–1100) ══════════════ */
@media (max-width: 1100px) {
  /* Панель клиента: закрыта = ширина 0, открыта (.open) = шторка поверх чата */
  .client-panel { width: 0 !important; }
  .client-panel.open {
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 92vw) !important;
    min-width: 0 !important;
    z-index: 800;
    box-shadow: -16px 0 40px rgba(15,23,42,.25);
  }
  /* Колонку диалогов можно тянуть за столбик и здесь: width задаёт ресайзер
     (inline-стиль), CSS даёт только дефолт и потолок, чтобы чат не задохнулся */
  .dialogs-panel { width: 280px; max-width: 48vw; }

  .cab-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .cab-tabs::-webkit-scrollbar { display: none; }
  .cab-tab { white-space: nowrap; flex: none; }
  .cab-header { flex-wrap: wrap; gap: 10px; }
}

/* ══════════════ ТЕЛЕФОНЫ (≤768) ══════════════ */
@media (max-width: 768px) {

  /* Страница не должна «ездить» вбок: убираем горизонтальную прокрутку тела
     и резиновый отскок. Особенно важно при открытии клавиатуры/ассистента —
     иначе экран начинает двигаться вкривь. Вложенные горизонтальные ленты
     (вкладки, доски) скроллятся сами — overflow-x:hidden на body им не мешает. */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    overscroll-behavior: none;
  }

  /* ── РАБОЧИЙ СТОЛ ─────────────────────────────────────────── */
  body.is-workspace .workspace { height: 100dvh; }
  body.is-workspace #mainArea { width: 100%; padding-bottom: 0 !important; }
  body.asst-bar-on.is-workspace #mainArea { padding-bottom: 0 !important; }
  body.asst-bar-on.is-workspace { padding-bottom: 0; }

  /* ════════ Левое меню — выдвижной ящик (телефон) ════════
     Аккуратный app-drawer: шапка с логотипом + переключатель компании сверху,
     рабочие пункты прокручиваются, нижняя группа (смена/уведомления/поддержка/
     кабинеты) закреплена снизу и отделена линией. Вертикальная прокрутка — да,
     горизонтального «съезда» — нет. */
  body.is-workspace .nav-sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 312px) !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;       /* без центрирования → ничего не режется по краям */
    gap: 4px !important;
    padding: 0 !important;
    overflow: hidden;                      /* сам drawer не скроллится — скроллится .nav-scroll */
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 1300;
    border-right: none;
    border-radius: 0 20px 20px 0;
    box-shadow: 18px 0 56px -8px rgba(15,23,42,.32);
  }
  body.m-nav-open .nav-sidebar { transform: translateX(0); }
  body.is-workspace .nav-sidebar > * { flex: none; }       /* пункты не сжимаются */
  /* Рабочие пункты — собственная прокрутка; шапка и нижняя группа закреплены. */
  body.is-workspace .nav-sidebar .nav-scroll {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    align-items: stretch; width: 100%; gap: 4px;
  }
  body.is-workspace .nav-sidebar .nav-scroll::-webkit-scrollbar { width: 0; }
  body.is-workspace .nav-sidebar .nav-collapse,
  body.is-workspace .nav-sidebar .tooltip { display: none !important; }

  /* Шапка с логотипом — закреплена сверху, отступ под чёлку/Dynamic Island */
  body.is-workspace .nav-sidebar .nav-top-row {
    position: sticky; top: 0; z-index: 3;
    justify-content: flex-start;
    margin: 0;
    padding: calc(16px + env(safe-area-inset-top)) 16px 12px;
    background: var(--bg-secondary);
  }
  body.is-workspace .nav-sidebar .nav-brand { display: inline; font-size: 19px; }
  body.is-workspace .nav-sidebar .nav-logo { width: 36px; height: 36px; }

  /* Переключатель компании — под шапкой, отделён линией */
  body.is-workspace .nav-sidebar .nav-company-dd {
    margin: 0; padding: 0 12px 12px;
    border-bottom: 1px solid var(--border);
  }

  /* Рабочие пункты — крупные, удобные, текст с многоточием (без обрезки по краю) */
  body.is-workspace .nav-sidebar .nav-item {
    width: auto; min-width: 0;
    margin: 0 12px;
    justify-content: flex-start; gap: 14px;
    height: 50px; padding: 0 14px;
    border-radius: 14px;
  }
  body.is-workspace .nav-sidebar .nav-label {
    display: inline; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Бейджи (9+/4) — по центру справа в строке, а не в углу */
  body.is-workspace .nav-sidebar .nav-item .notif-badge {
    top: 50%; right: 14px; left: auto; transform: translateY(-50%);
  }

  /* Нижняя группа — закреплена снизу, отделена от рабочих инструментов */
  body.is-workspace .nav-sidebar .nav-bottom {
    position: sticky; bottom: 0; margin-top: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    box-shadow: 0 -12px 24px -16px rgba(15,23,42,.22);
  }
  body.is-workspace .nav-sidebar .nav-bottom .nav-item { margin: 0; height: 48px; }
  /* «Скрытые вкладки» в мобильной шторке — полноценная строка, как обычные пункты */
  body.is-workspace .nav-sidebar #navShowHidden {
    width: auto; height: 50px; margin: 0 12px; justify-content: flex-start;
    gap: 14px; padding: 0 14px; border-radius: 14px;
  }
  body.is-workspace .nav-sidebar #navShowHidden .nhs-ic { width: 22px; justify-content: center; }
  body.is-workspace .nav-sidebar #navShowHidden .nav-label {
    display: inline; flex: 1; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.is-workspace .nav-sidebar #navShowHidden .nhs-count {
    position: static; margin-left: auto; top: auto; right: auto; transform: none;
    border: none; font-size: 11px; line-height: 18px; height: 18px; min-width: 18px; padding: 0 6px;
  }
  body.is-workspace .nav-sidebar #navShowHidden .tooltip { display: none !important; }
  body.is-workspace .nav-sidebar .nav-account {
    width: auto !important; height: auto !important;
    justify-content: flex-start; gap: 12px; padding: 8px 12px !important;
    border-radius: 14px;
  }
  body.is-workspace .nav-sidebar .nav-account-info { display: flex !important; }

  /* Затемнение под ящиком: тап по нему закрывает меню */
  body.is-workspace #mNavOverlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 1290;
  }
  body.m-nav-open #mNavOverlay { display: block; }

  /* Кнопка ☰ — открыть меню */
  body.is-workspace #mNavBtn {
    display: flex;
    position: fixed; top: 13px; left: 8px; z-index: 700;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 17px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }
  body.m-chat-open #mNavBtn { display: none; } /* в открытом чате вместо ☰ — кнопка «назад» */
  /* Шапки вкладок не налезают на ☰. Для диалогов: отступ под ☰ даём ТОЛЬКО
     заголовку, а строка кнопок и поиск используют всю ширину панели.
     Верхний отступ 8px — чтобы центр строки заголовка совпадал с центром ☰. */
  body.is-workspace .dialogs-header { padding: 8px 10px 10px 10px; }
  body.is-workspace .dialogs-header-top { min-height: 40px; }
  body.is-workspace .dialogs-header-top .dialogs-title { margin-left: 46px; }
  body.is-workspace .bots-topbar,
  body.is-workspace .tasks-topbar,
  body.is-workspace .crm-topbar { padding-left: 54px !important; }

  /* ── Чат: список диалогов ⇄ открытый диалог ── */
  /* max-width:none гасит планшетный потолок 48vw — на телефоне список во всю ширину */
  .dialogs-panel { width: 100% !important; max-width: none !important; height: 100%; }
  .dialogs-resizer { display: none !important; }
  body.is-workspace #chatArea { display: none !important; }
  body.m-chat-open .dialogs-panel { display: none !important; }
  body.m-chat-open #chatArea { display: flex !important; }

  /* Кнопка «назад» — родная #backBtn в шапке чата (hide-desktop) */
  body.is-workspace #backBtn {
    min-width: 36px; height: 36px;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
  }
  /* ── Шапка чата (компактная, как в Telegram/WhatsApp) ──
     Одна строка: назад · аватар · [имя / мессенджер·номер] · иконки.
     Чипы «Ответственный/Участники» вынесены в полосу под шапкой (см. ниже),
     поэтому шапка снова низкая и ничего не наезжает. */
  body.m-chat-open .chat-header {
    gap: 10px;
    height: var(--topbar-height);
    align-items: center;
    flex-wrap: nowrap;
  }
  body.m-chat-open #chatAvatar { width: 40px; height: 40px; flex: none; }
  body.m-chat-open .chat-header-info { flex: 1; min-width: 0; overflow: hidden; }
  /* Имя и мета — каждое в одну строку с многоточием */
  body.m-chat-open .chat-contact-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 15px; line-height: 1.25;
  }
  body.m-chat-open #chatMeta {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 11.5px; line-height: 1.3;
  }
  body.m-chat-open #chatMeta .chat-meta-user { overflow: hidden; text-overflow: ellipsis; }
  /* Иконки действий держатся справа, чуть компактнее, не сжимаются */
  body.m-chat-open .chat-header-actions { flex: none; gap: 2px; }
  body.m-chat-open .chat-header-actions .icon-btn { min-width: 38px; height: 38px; }

  /* ── Полоса «Ответственный/Участники» под шапкой ──
     Единое удобное место назначения; чипы в одну прокручиваемую строку. */
  body.m-chat-open #assignBar.assign-wrap {
    gap: 8px; padding: 8px 12px;
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body.m-chat-open #assignBar.assign-wrap::-webkit-scrollbar { display: none; }
  body.m-chat-open #assignBar .chat-assignees { margin: 0; flex: none; display: inline-flex; gap: 8px; }
  body.m-chat-open #assignBar .hc-chip { height: 32px; }
  body.m-chat-open #assignBar .hc-chip-txt { max-width: 42vw; }
  /* Действия над сообщением: на тач-экранах показываем компактно (hover нет) */
  .msg-bubble-wrap .msg-actions { gap: 2px; }
  .msg-action-btn { min-width: 30px; min-height: 30px; }
  /* Переключатель «клиент/группа» в новом диалоге — кнопки на всю ширину */
  #ndModeRow .nd-mode-toggle { flex-wrap: wrap; }
  #ndModeRow .nd-mode-btn { min-height: 40px; }

  /* Композер: панель инструментов в одну прокручиваемую строку (как стикеры в мессенджерах) */
  body.is-workspace .input-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
  }
  body.is-workspace .input-toolbar::-webkit-scrollbar { display: none; }
  body.is-workspace .input-toolbar > * { flex: none; white-space: nowrap; font-size: 11px !important; }
  /* Подсказку про «/» на телефоне прячем — экономим место под перепиской */
  body.is-workspace .chat-input-area > div:last-child:not(.input-toolbar) { display: none; }
  /* Композер не должен прилипать к нижнему краю телефона — даём отступ,
     как в Telegram. На устройствах с «домашней полоской» учитываем safe-area. */
  body.is-workspace .chat-input-area {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Правые панели (Клиент, Тим): закрыты = 0, открыты (.open) = шторка ── */
  body.is-workspace .client-panel,
  body.is-workspace .milash-right-panel {
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    height: 100dvh !important;
    z-index: 1250;
    width: 0 !important;
    min-width: 0 !important;
  }
  body.is-workspace .client-panel.open,
  body.is-workspace .milash-right-panel.open {
    width: min(380px, 100vw) !important;
    box-shadow: -16px 0 48px rgba(15,23,42,.3);
  }

  /* Ассистент-кнопка: все стили теперь в js/assistant-bar.js (FAB ↔ пилюля) */

  /* ── Модалки почти на весь экран ── */
  .modal { width: calc(100vw - 20px) !important; max-width: none !important; max-height: 88vh; overflow-y: auto; }
  .bot-settings-modal { width: calc(100vw - 24px) !important; max-height: 86vh; }

  /* ── Канбаны: горизонтальная прокрутка колонок ── */
  .kanban-view, .crm-board { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .kanban-view > *, .crm-board > * { min-width: 250px; }
  .crm-topbar { flex-wrap: wrap; gap: 6px; }
  .team-chat { flex-direction: column !important; }

  /* ── Конструктор ботов ── */
  .bot-props-panel { width: 210px; }
  .bot-editor-topbar .btn { font-size: 11px; padding: 5px 8px; }
  .bot-line-info { display: none; }
  .bots-grid { grid-template-columns: 1fr !important; }

  /* ── КАБИНЕТ (страница без .workspace) ── */
  /* Командная строка теперь сворачивается в кнопку — резерв места не нужен */
  /* Естественная прокрутка всей страницы, контент вкладки — на всю ширину/высоту,
     а не в маленьком окошке «на пол-экрана». */
  .cab-layout {
    flex-direction: column !important;
    display: block !important;
    height: auto !important;
    min-height: 100vh;
  }
  .cab-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: 42vh;                 /* компактная шапка-сайдбар, со своей прокруткой */
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px !important;
    position: sticky; top: 0; z-index: 5;   /* удобно: бренд/компания всегда под рукой */
    background: var(--bg-secondary);
  }
  .cab-sidebar .cab-brand { padding-bottom: 8px; }
  .cab-sidebar .cab-brand img { max-width: 120px !important; }
  .cab-sidebar-footer { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  /* Главная область — на всю ширину и высоту экрана, без внутреннего «окошка» */
  .cab-main {
    padding: 14px !important;
    overflow: visible !important;
    min-height: calc(100vh - 60px);
  }
  .cab-header { flex-wrap: wrap; }
  .cab-header .btn { font-size: 11px; padding: 6px 9px; }
  #cabSection { width: 100%; }
  #cabSection table { display: block; overflow-x: auto; }
  .member-row { flex-wrap: wrap; row-gap: 6px; }
  /* Вкладки кабинета — компактнее на узких экранах */
  .cab-tab { font-size: 12.5px; padding: 9px 12px; }

  .cab-title { font-size: 17px; }
  h1 { font-size: 22px; }

  /* ── Список диалогов: никакого горизонтального «шатания» пальцем ──
     pan-y: браузер обрабатывает только вертикальную прокрутку, наш
     JS-свайп (контекстное меню) события touchmove получает как раньше */
  .dialogs-list, .dialog-item { touch-action: pan-y; }
  .dialogs-panel { overflow-x: hidden; overscroll-behavior-x: none; }

  /* ── Свайп по диалогу: фирменный перелив справа налево (один раз) ── */
  .dialog-item.swipe-glow { position: relative; overflow: hidden; }
  .dialog-item.swipe-glow::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(100deg,
      transparent 25%,
      rgba(46, 125, 255, .14) 42%,
      rgba(124, 77, 255, .20) 50%,
      rgba(184, 60, 230, .14) 58%,
      transparent 75%);
    background-size: 250% 100%;
    animation: swipeGlowRtl 1s ease-out both;
  }
  @keyframes swipeGlowRtl {
    from { background-position: 220% 0; }
    to   { background-position: -120% 0; }
  }

  /* ── Панель уведомлений на телефоне: во всю ширину, вкладки скроллятся ── */
  .notif-panel { width: 100vw; right: -102vw; border-left: none; }
  .notif-panel.open { right: 0; }
  .notif-panel-header { padding: 12px 12px 10px; }
  .notif-readall { padding: 6px 10px; font-size: 11.5px; }
  .notif-tabs { padding: 8px 10px; }
  /* тосты не шире экрана */
  #notifToastStack { left: 10px; right: 10px; }
  .ntoast { max-width: none; width: auto; }

  /* ── Шапка «Сообщения» на телефоне ──
     В ОДНУ строку: слева «Сообщения» (рядом с ☰), справа — капсула кнопок.
     «Сбросить кеш» на телефоне прячем (для десктопа) — остаётся 4 кнопки, помещаются.
     Если очень узко — капсула прокручивается по горизонтали, заголовок остаётся слева. */
  .dialogs-actions .icon-btn.hide-mobile { display: none !important; }
  .dialogs-header-top { flex-wrap: nowrap !important; align-items: center; gap: 8px; }
  .dialogs-header-top .dialogs-title { flex: 0 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dialogs-header-top .dialogs-actions { flex: 0 0 auto; justify-content: flex-end; }
  .dialogs-header-top .dlg-act-group { flex: 0 1 auto; max-width: 100%; }
  /* крупнее под палец */
  .dialogs-actions .icon-btn { width: 40px !important; height: 40px !important; }
  .dialogs-actions .icon-btn svg, .dialogs-actions .icon-btn [data-icon] { width: 19px; height: 19px; }
  /* строка поиска и кнопка фильтра — одной высоты, без зума iOS (шрифт 16px) */
  .dialogs-header .search-box input { font-size: 16px; padding-top: 10px; padding-bottom: 10px; }
  .search-filter-btn { width: 44px !important; height: 44px !important; }
}

@media (max-width: 420px) {
  .dialogs-header { padding: 8px 8px 8px 10px; }
  .dialogs-header-top .dialogs-title { font-size: 19px; }
  .bot-editor-topbar { gap: 4px; }
  .bot-props-panel { width: 190px; }
}

/* ══════════════ ДЕСКТОП (≥769): мобильные элементы скрыты ══════════════ */
/* premium-workspace.css задаёт .icon-btn{display:inline-flex !important} и
   перебивает .hide-desktop из main.css (равная специфичность, подключён позже).
   Селектор с id (#backBtn) выигрывает по специфичности у любого .icon-btn. */
@media (min-width: 769px) {
  #backBtn.hide-desktop,
  .icon-btn.hide-desktop,
  .hide-desktop { display: none !important; }
}