/* F1319.W9 — мобильная рабочая поверхность: плотная, но не мелкая.
   Правила здесь только для телефона; desktop-композиции сервисов не меняются. */

.contacts-mobile-filter-btn { display: none; }
.td-details-tab { display: none; }

@media (max-width: 800px) {
  .td-details-tab { display: block; }
  #tdPanelDetails { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #tdPanelDetails .td-details-mob-content { width: 100%; padding: 8px; }
  #tdPanelDetails .td-details-mob-content .ticket-detail-sidebar {
    display: block !important; width: 100%; max-width: none; overflow: visible;
  }
}

@media (max-width: 760px) {
  /* The unauthenticated native account screen has no tab bar yet, but it still lives under
     the iOS status area. Reserve the safe inset before the authenticated shell is mounted. */
  body.app-mode:not(.has-tabbar) > .app-header {
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
  }
  html, body { max-width: 100%; overflow-x: clip; }
  .app-content, #app { min-width: 0; max-width: 100%; }

  /* A standalone mobile route is a rigid application shell. The document never
     scrolls: header and tab bar are opaque edges, while only the current work
     surface owns vertical scrolling. This also removes the translucent gap in
     which old content used to show through during a fast swipe. */
  body.has-tabbar {
    --mob-tabbar-space: calc(57px + var(--tp-safe-bottom));
    position: fixed; inset: 0; width: 100%; height: 100dvh; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
    overscroll-behavior: none; background: var(--bg);
  }
  body.has-tabbar > .app-header {
    position: relative; top: auto; flex: 0 0 auto; width: 100%;
    min-height: calc(56px + var(--tp-safe-top));
    height: calc(56px + var(--tp-safe-top));
    padding: calc(6px + var(--tp-safe-top)) calc(10px + var(--tp-safe-right)) 6px calc(10px + var(--tp-safe-left));
    gap: 4px; flex-wrap: nowrap; overflow: visible;
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: translateZ(0); z-index: 120;
  }
  body.has-tabbar > .app-header .logo {
    width: auto; max-width: 124px; height: 30px; flex: 0 1 auto; object-fit: contain;
  }
  body.has-tabbar > .app-header .spacer { display: block !important; flex: 1 1 auto; min-width: 0; }
  body.has-tabbar #notifBellWrap,
  body.has-tabbar #expandToggleWrap,
  body.has-tabbar #headerAvatarWrap {
    display: inline-flex !important; flex: 0 0 auto; margin: 0 !important;
  }
  body.has-tabbar #notifBellWrap { order: 10; }
  body.has-tabbar #expandToggleWrap { order: 11; }
  body.has-tabbar #headerAvatarWrap { order: 12; }
  body.has-tabbar #notifBellBtn,
  body.has-tabbar #expandToggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-width: 44px; height: 44px; padding: 10px;
  }
  body.has-tabbar .header-avatar-btn { width: 36px; min-width: 36px; height: 36px; }
  body.has-tabbar #notifBadge { z-index: 2; }
  body.has-tabbar .notif-dropdown {
    position: fixed; top: calc(54px + var(--tp-safe-top)); right: calc(8px + var(--tp-safe-right));
    width: min(360px, calc(100vw - 16px)); max-height: min(70dvh, 560px);
  }
  body.has-tabbar > .app-content {
    flex: 1 1 auto; min-height: 0; width: 100%; margin: 0;
    overflow-x: clip; overflow-y: auto; overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch; padding-top: 0;
    padding-bottom: var(--mob-tabbar-space); background: var(--bg);
  }
  body.has-tabbar .tickets-sticky-header { top: 0; padding-top: 8px; background: var(--bg); }
  body.has-tabbar .mob-tabbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--surface); transform: translateZ(0); z-index: 130;
  }
  body.has-tabbar .mob-tab { min-width: 0; overflow: hidden; }
  body.has-tabbar #tpSupportLauncher { display: none !important; }

  /* Safari on iPhone has no page Fullscreen API. The same button therefore enters a local
     focus mode: the brand row collapses, while a persistent exit control remains reachable. */
  body.has-tabbar.mobile-focus-mode > .app-header {
    flex-basis: 0; min-height: 0; height: 0; padding: 0; border: 0; background: transparent;
  }
  body.has-tabbar.mobile-focus-mode > .app-header > * { display: none !important; }
  body.has-tabbar.mobile-focus-mode > .app-header #expandToggleWrap {
    display: inline-flex !important; position: fixed;
    top: calc(8px + var(--tp-safe-top)); right: calc(8px + var(--tp-safe-right)); z-index: 180;
    border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-md);
  }

  /* Screens with their own list/message scroller consume the remaining shell
     height instead of applying a second viewport subtraction. */
  body.has-tabbar > .app-content:has(.chats-layout),
  body.has-tabbar > .app-content:has(.ticket-detail-layout) {
    display: flex; flex-direction: column; overflow: hidden;
  }
  body.has-tabbar .chats-layout,
  body.has-tabbar .ticket-detail-layout {
    flex: 1 1 auto; height: auto; min-height: 0;
  }

  /* Частые действия остаются полноценными целями касания. */
  .tickets-filter-bar .btn,
  .contacts-toolbar :is(button, summary),
  .chats-search-row .btn,
  .chats-head .btn,
  .chat-toolbar :is(.btn-toolbar, .btn-toolbar-send, .btn-voice),
  .mobile-ticket-card .mtc-actions :is(.btn, [data-quick-action]) {
    min-width: 44px; min-height: 44px;
  }

  /* Служебная деградация канала заметна, но не съедает первый экран выдачи. */
  #channelsWarnBanner.ch-banner {
    position: relative; align-items: center; gap: 6px; padding: 6px 10px;
    min-height: 48px; max-height: 48px; overflow: hidden; border-bottom-width: 1px;
  }
  #channelsWarnBanner .ch-banner-content { display: block; min-width: 0; overflow: hidden; }
  #channelsWarnBanner .ch-banner-content > b { display: none; }
  #channelsWarnBanner .ch-banner-content > div:not(.ch-banner-sub) {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #channelsWarnBanner .ch-banner-sub { display: none; }
  #channelsWarnBanner .ch-banner-link {
    display: flex; align-items: center; min-height: 36px; max-width: 112px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
  }

  /* Нижняя строка drawer — такие же полноценные цели, как основные вкладки. */
  .mob-drawer .theme-toggle { min-width: 44px; min-height: 44px; }
  .mob-drawer .lang-select { min-height: 44px; }

  /* Заявки: название стоит слева, воронка справа, четыре ежедневные очереди — одним рядом. */
  .tickets-sticky-header { padding-bottom: 0; }
  .tickets-filter-bar { gap: 6px !important; margin-bottom: 6px !important; }
  .tickets-mobile-head {
    display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px;
  }
  .tickets-mobile-head h2 {
    flex: 0 1 auto; min-width: 0; margin: 0; font-size: 18px !important;
    line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tickets-mobile-head-actions {
    display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto;
  }
  .tickets-mobile-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-width: 44px; height: 44px; padding: 10px !important;
  }
  .tickets-mobile-search-row {
    display: flex; align-items: stretch; align-self: stretch; gap: 8px;
    width: 100%; min-width: 0; box-sizing: border-box;
  }
  .tickets-mobile-search-row .tickets-mobile-create-btn { flex: 0 0 44px; }
  .tickets-filter-bar #ticketsOmniSlot { flex: 1 1 auto; min-width: 0; }
  .tickets-mobile-search-row .omni { width: 100%; min-width: 0; }
  .ticket-quick-filters-mobile { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; }
  .ticket-quick-filters-mobile .ticket-quick-filter { min-width: 0; padding-inline: 6px; }
  .ticket-quick-filters-mobile .ticket-quick-filter > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mobile-ticket-cards {
    gap: 0; background: var(--surface);
    border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  }
  .mobile-ticket-card {
    min-height: 108px; max-height: 120px; overflow: hidden;
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 16px; border: 0; border-bottom: 1px solid var(--border-light);
    border-radius: 0; box-shadow: none;
  }
  .mobile-ticket-card:last-child { border-bottom: 0; }
  .mobile-ticket-card .mtc-top {
    min-height: 20px; margin: 0; gap: 8px; align-items: center;
  }
  .mobile-ticket-card .mtc-key,
  .mobile-ticket-card .mtc-state,
  .mobile-ticket-card .mtc-party,
  .mobile-ticket-card .mtc-owner {
    display: inline-flex; align-items: center; min-width: 0;
  }
  .mobile-ticket-card .mtc-key { flex: 1 1 auto; gap: 5px; }
  .mobile-ticket-card .mtc-state { flex: 0 1 auto; gap: 4px; overflow: hidden; white-space: nowrap; }
  .mobile-ticket-card .mtc-id { font-size: 14px; line-height: 20px; }
  .mobile-ticket-card .mtc-subject {
    flex: 0 0 auto; min-height: 20px; max-height: 40px; margin: 0;
    color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px;
    -webkit-line-clamp: 2;
  }
  .mobile-ticket-card .mtc-meta {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 3px;
    min-height: 20px; margin-top: auto; line-height: 20px;
  }
  .mobile-ticket-card .mtc-party,
  .mobile-ticket-card .mtc-owner { flex: 0 0 auto; max-width: none; gap: 3px; overflow: visible; }
  .mobile-ticket-card .mtc-requester,
  .mobile-ticket-card .mtc-portal,
  .mobile-ticket-card .mtc-owner > span:last-child { display: none; }
  .mobile-ticket-card .mtc-time {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mobile-ticket-card .mtc-time { flex: 0 0 auto; margin-left: auto; color: var(--text-muted); }
  .mobile-ticket-card .mtc-cb { width: 24px; height: 24px; margin: 0 4px 0 0; flex: 0 0 auto; }
  .kanban-card .kanban-card-people {
    display: inline-flex; align-items: center; gap: 3px; min-width: 0;
  }
  .kanban-card .kanban-card-people-arrow {
    color: var(--text-muted); font-size: 11px; line-height: 1;
  }

  /* Компании/контакты: ни панель, ни таблица не создают горизонтальную страницу. */
  .contacts-toolbar {
    width: 100%; min-width: 0; padding: 8px; gap: 8px; overflow: visible;
  }
  .contacts-toolbar__tabs { flex-wrap: nowrap; overflow: visible; padding-bottom: 0; }
  .contacts-mobile-filter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-width: 44px; height: 44px; margin-left: auto;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-secondary);
  }
  .contacts-toolbar.filters-open .contacts-mobile-filter-btn {
    color: var(--accent); border-color: var(--accent); background: var(--accent-light);
  }
  .contacts-toolbar__filters {
    display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px;
  }
  .contacts-toolbar.filters-open .contacts-toolbar__filters { display: grid; }
  .contacts-toolbar__filters > :first-child { grid-column: 1 / -1; }
  .contacts-toolbar__filters .form-input,
  .contacts-toolbar__filters #contactSearch,
  .contacts-toolbar__filters #contactCompanyFilter {
    width: 100%; min-width: 0; max-width: 100%; min-height: 44px;
  }
  .contacts-toolbar__actions {
    width: 100%; min-width: 0; justify-content: flex-start; flex-wrap: nowrap;
    white-space: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .contacts-toolbar__actions::-webkit-scrollbar { display: none; }
  .contacts-toolbar__actions > * { flex: 0 0 auto; }
  .contacts-toolbar__count { margin-left: 0; }
  .contacts-toolbar__actions :is(#btnAddOrg, #btnAddContact) {
    order: -2; width: 44px; min-width: 44px; padding: 10px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .contacts-toolbar__actions .contacts-add-label { display: none; }
  .contacts-toolbar__menu { max-width: calc(100vw - 32px); }
  #orgsCard, #orgsCard .table-wrap { width: 100%; max-width: 100%; overflow-x: clip; }
  #orgsCard .table--cols { width: 100%; min-width: 0; table-layout: fixed; }
  #orgsCard .table--cols :is(th, td):nth-child(n + 3):not(:last-child) { display: none; }
  #orgsCard .table--cols :is(th, td):first-child { width: 44px !important; }
  #orgsCard .table--cols :is(th, td):last-child { width: 52px !important; padding: 4px !important; }
  #orgsCard .table--cols :is(th, td):nth-child(2) { width: auto !important; }
  #orgsCard .org-row-actions { width: 44px; }
  #orgsCard .org-row-actions .btn { min-width: 44px; min-height: 44px; padding: 8px; }

  /* Messenger: normal messages stay clean. A long press opens the per-message
     menu; the top Select action enters a distinct mode where all checkboxes
     appear together, like WhatsApp. */
  .chats-list-select-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .chats-list:not(.chats-select-mode) .chats-row-cb { display: none !important; }
  .messages.msg-sel-always:not(.msg-sel-mode) .msg-sel-box {
    opacity: 0 !important; pointer-events: none !important;
  }
  .messages.msg-sel-always:not(.msg-sel-mode) .msg:has(.msg-sel-box) { padding-right: 12px; }
  .messages:not(.msg-sel-mode) .msg-menu-btn { opacity: 0; pointer-events: none; }
  .messages:not(.msg-sel-mode) .msg-menu-btn:focus-visible { opacity: 1; pointer-events: auto; }
  .messages:not(.msg-sel-mode) .msg:has(.msg-menu-wrap) .msg-author { padding-right: 0; }
  .messages.msg-sel-mode .msg-sel-box {
    opacity: 1 !important; pointer-events: auto !important;
    top: 4px; right: 6px !important; width: 40px; height: 40px; justify-content: center;
  }
  .messages.msg-sel-mode .msg:has(.msg-sel-box) { padding-right: 52px; }
  .messages.msg-sel-mode .msg-menu-wrap { display: none; }
  .msg-author { min-width: 0; flex-wrap: nowrap; }
  .msg-author-name {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .msg-author :is(.msg-channel-phone, .msg-channel-group, .msg-line-tag) { display: none; }
  .chats-allocation-control:not(.is-taken) {
    width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;
    opacity: 0 !important; pointer-events: none !important; border: 0 !important;
  }
  .chats-msgs .messages .msg {
    max-width: 82%; padding: 10px 12px; border-radius: 16px;
    font-size: 16px; line-height: 1.375;
  }
  /* ⛔ F10057 W3 — оформление признака (outline) переехало в общий стиль (`design.css`):
     это не ширина, а собственно цвет/толщина, и общему экрану он был не виден вовсе.
     Здесь остаётся ТОЛЬКО телефонная поправка ширины карточки, как и было задумано. */
  .chats-assist-card {
    align-items: stretch; gap: 8px; padding: 8px 10px; flex-direction: column;
  }
  .chats-assist-actions { width: 100%; }
  .chats-assist-actions .btn { flex: 1 1 0; min-height: 44px; }

  /* The conversation header keeps only navigation, identity, Select, Assign, More on a narrow
     screen. Note and the panel toggle stay hidden here.

     ⛔ support#F10099 (пересмотр F10086) — Владелец запретил вторую форму кнопки шапки (значок
     И видимая подпись рядом): в шапке — ОДНА форма, слово только в `title`/`aria-label`.
     «Назначить ответственного» вернулось к этой общей форме (`.chats-head-assign`,
     `admin-chats.js`); класса `.chats-head-btn` в разметке службы больше нет, и это правило
     ему больше исключения не делает.
     ⛔ Своё исключение (`.chats-head-assign`) ОСТАЁТСЯ, а не снимается вместе со старым: волна
     F10086 убрала назначение из меню «Ещё» — с тех пор в шапке это ЕДИНСТВЕННАЯ дверь к
     действию. Прячь кнопку тем же правилом, что и заметку, — и на телефоне действие исчезло бы
     совсем: тихое лишение доступа, а не «сжатие» кнопки до значка (она и так рисуется одним
     значком на любой ширине — прятать здесь уже нечего, кроме самой кнопки).
     (Кнопки заметки в шапке с support#F10230 нет: режим заметки открывается полем ответа —
     `noteToggle` в `admin-composer.js` / `components-chat.js`.)
     ⛔ Переключатель правой шторки (`.chats-panel-toggle`) ОСТАЁТСЯ скрытым — второй селектор
     не тронут: на узком экране шторки нет физически, и обещать её нечем. */
  .chats-head > button:not(.chats-mobile-back):not(.chats-head-select):not(.chats-head-assign),
  .chats-head > .chats-panel-toggle { display: none !important; }
  .chats-head .msg-menu-wrap { flex: 0 0 auto; }

  .chats-allocation-compact {
    flex: 0 0 52px; min-height: 52px; display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-bottom: 1px solid var(--border-light);
    background: var(--surface); overflow: visible;
  }
  .chats-allocation-current {
    flex: 1 1 auto; min-width: 0; max-width: 190px; min-height: 44px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chats-allocation-menu { position: relative; top: auto; right: auto; flex: 0 0 auto; }
  .chats-allocation-menu > .act-menu-btn {
    opacity: 1; position: relative; min-width: 44px; min-height: 44px; padding: 8px;
  }

  /* Ticket detail: compact identity, then every permitted desktop action in one
     scrollable toolbar. The working chat and the long data sheet are separate tabs. */
  .td-topbar-staff {
    min-height: 52px; flex-wrap: nowrap; gap: 4px; overflow: visible;
  }
  .td-topbar-staff .btn-back {
    width: 44px; min-width: 44px; height: 44px; padding: 10px;
    overflow: hidden; font-size: 0;
  }
  .td-topbar-staff .btn-back svg { width: 20px; height: 20px; }
  .td-topbar-staff .td-title { min-width: 0; font-size: 15px; white-space: nowrap; }
  .td-topbar-staff > .td-mobile-secondary,
  .td-topbar-staff > #_tkChecklistBadge:empty,
  .td-topbar-staff > #aagSlot:empty { display: none; }
  .td-topbar-staff > .spacer { min-width: 0; }
  .td-topbar-staff > .text-xs { display: none; }
  .ticket-detail-header .td-subject { padding: 4px 8px; }
  .ticket-detail-header #tdSubjectText {
    display: -webkit-box; max-height: 40px; overflow: hidden;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    font-size: 15px !important; line-height: 20px !important;
  }
  .td-mobile-actions-strip {
    display: flex; align-items: center; gap: 4px; width: 100%; min-height: 48px;
    padding: 2px 8px; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; overscroll-behavior-x: contain; border-top: 1px solid var(--border-light);
  }
  .td-mobile-actions-strip::-webkit-scrollbar { display: none; }
  .td-mobile-actions-strip .td-mobile-action {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
    padding: 10px !important; border-radius: 10px;
  }
  /* support#F10149.W1 — ссылка на `.td-call-circle-btn` убрана вместе с самим классом:
     кнопка звонка теперь носит `btn-icon`, и первого `:not()` ей достаточно. Оставленное
     имя снятого класса читалось бы как живое условие и врало бы читающему. */
  .td-mobile-actions-strip .td-mobile-action:not(.btn-icon) {
    width: auto; flex-basis: auto; max-width: 180px; padding-inline: 12px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ticket-detail-chat .td-chat-tabs { overflow-x: auto; scrollbar-width: none; }
  .ticket-detail-chat .td-chat-tabs::-webkit-scrollbar { display: none; }
  .ticket-detail-chat .td-chat-tab { min-height: 44px; padding: 8px 10px; }

  /* Composer: one compact row. Mentions, voice and AI remain desktop tools; on
     mobile the high-frequency attach/template/channel/send actions fit without
     horizontal drift. */
  .chat-toolbar {
    width: 100%; max-width: 100%; min-width: 0;
    flex-wrap: nowrap; gap: 2px; padding: 3px 4px; overflow: hidden;
  }
  .chat-toolbar :is(.btn-toolbar, .btn-toolbar-send, .btn-voice) {
    align-items: center; justify-content: center; padding: 8px;
  }
  .chat-toolbar [id$="_mentionBtn"],
  .chat-toolbar [id$="_aiBtn"],
  .chat-toolbar .btn-voice { display: none !important; }
  .chat-toolbar > [style*="flex:1"] { min-width: 0; }
  .chat-toolbar .channel-send-btns { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .chat-input-area .form-textarea { min-height: 44px; max-height: 128px; }

  body.has-tabbar .bulk-bar {
    bottom: calc(64px + var(--tp-safe-bottom));
  }
}

@media (max-width: 379px) {
  .mobile-ticket-card { padding-inline: 12px; }
}

@media (max-width: 359px) {
  .chat-toolbar [id$="_qrBtn"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-ticket-card, .ticket-quick-filter, .btn-toolbar, .btn-toolbar-send, .btn-voice {
    transition: none !important;
  }
}