/* Нижняя мобильная панель Выручи (телефон + планшет / PWA) */
.m-dock {
  display: none;
}

@media (max-width: 1024px) {
  body.has-mobile-dock {
    --m-dock-h: 64px;
  }

  /*
   * Мобилка / PWA (iOS + Android):
   * body = фиксированный кадр на экран (100svh),
   * .page-shell = единственный скролл,
   * .m-dock = в потоке внизу кадра (не position:fixed — на iOS fixed уезжает в середину).
   */
  html:has(body.has-mobile-dock.has-page-shell),
  html:has(body.has-mobile-dock > .page-shell) {
    height: 100%;
    height: 100svh;
    overflow: hidden;
  }

  body.has-mobile-dock.has-page-shell,
  body.has-mobile-dock:has(> .page-shell) {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100svh;
    max-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: none;
    padding-bottom: 0;
    margin: 0;
    background-attachment: scroll !important;
  }

  body.has-mobile-dock.has-page-shell > .page-shell,
  body.has-mobile-dock:has(> .page-shell) > .page-shell {
    flex: 1 1 0%;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100%;
    display: block !important; /* не flex-колонка с min-height:100dvh — ломает скролл на iOS */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  /* Карточки ЛК не должны клипать контент */
  body.has-mobile-dock .customer-cabinet,
  body.has-mobile-dock .contractor-cabinet,
  body.has-mobile-dock .moderator-cabinet,
  body.has-mobile-dock .mod-cabinet {
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.has-mobile-dock .cust-decor,
  body.has-mobile-dock .cc-decor {
    display: none !important;
  }

  body.has-mobile-dock.has-page-shell > .m-dock,
  body.has-mobile-dock:has(> .page-shell) > .m-dock {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    flex: 0 0 auto;
    order: 9999;
    width: 100%;
    max-width: none;
    transform: none !important;
    -webkit-transform: none !important;
  }

  /* Лендинг без page-shell — обычный fixed у низа */
  body.has-mobile-dock:not(.has-page-shell):not(:has(> .page-shell)) {
    padding-bottom: calc(var(--m-dock-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  .m-dock {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: 100%;
    max-width: 100vw;
    min-height: var(--m-dock-h, 64px);
    margin: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background: rgba(17, 22, 28, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  @supports not (-webkit-touch-callout: none) {
    .m-dock {
      background: rgba(17, 22, 28, 0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
  }

  .m-dock__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: #a8b4c0 !important;
    text-decoration: none !important;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .m-dock__ico,
  .m-dock__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .m-dock__cta {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.24);
    border: 1px solid rgba(var(--accent-rgb), 0.55);
    color: #d8f0e8;
    box-shadow: none;
    margin-top: 0;
  }

  .m-dock__item--cta.is-active .m-dock__cta,
  .m-dock__item--cta:active .m-dock__cta {
    background: var(--accent, #0d7a5f);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.38);
  }

  .m-dock__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .m-dock__item.is-active {
    color: #e8f6ef !important;
  }

  .m-dock__item.is-active .m-dock__ico {
    color: #7ddeb8;
  }

  .m-dock__item--cta .m-dock__label {
    color: #c5d9d0;
  }

  .m-dock__item--cta.is-active .m-dock__label {
    color: #e8f6ef;
  }

  .m-dock__help[aria-expanded="true"] {
    color: #e8f6ef !important;
  }

  .m-dock__badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 22px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(17, 22, 28, 0.95), 0 2px 8px rgba(229, 72, 77, 0.45);
  }

  body.has-mobile-dock .vr-support {
    right: 12px;
    left: 12px;
    bottom: calc(var(--m-dock-h, 64px) + env(safe-area-inset-bottom, 0px) + 10px);
    align-items: stretch;
  }

  body.has-mobile-dock .vr-support__fab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.has-mobile-dock .vr-support__panel {
    width: 100%;
    max-width: none;
  }

  body.has-mobile-dock .cookie-consent {
    bottom: calc(var(--m-dock-h, 64px) + env(safe-area-inset-bottom, 0px));
    padding-bottom: 0.75rem;
  }

  body.has-mobile-dock.has-cookie-banner .vr-support,
  body.has-mobile-dock:has(.cookie-consent:not([hidden])) .vr-support {
    bottom: calc(var(--m-dock-h, 64px) + env(safe-area-inset-bottom, 0px) + 5.5rem);
  }

  body.has-mobile-dock .site-footer,
  body.has-mobile-dock .app-footer {
    padding-bottom: 8px;
  }

  body.has-mobile-dock .page-shell main {
    margin-bottom: 0.5rem;
  }

  /*
   * Полная ширина на телефоне / планшете / PWA — без боковых «рамок».
   * ПК (≥1025px) эти правила не затрагивают.
   */
  body.has-mobile-dock .page-shell > header {
    padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
  }

  /* Док уже есть: в шапке оставляем только иконку меню, без слова «Меню» */
  body.has-mobile-dock .nav-burger-label {
    display: none !important;
  }
  body.has-mobile-dock .nav-burger {
    min-width: 40px;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  body.has-mobile-dock .page-shell main,
  body.has-mobile-dock main.cabinet-wide,
  body.has-mobile-dock main.cabinet-wide:has(.customer-cabinet),
  body.has-mobile-dock main.cabinet-wide:has(.contractor-cabinet),
  body.has-mobile-dock main.mod-cabinet-wide,
  body.has-mobile-dock main.feed-full,
  body.has-mobile-dock main.task-wide,
  body.has-mobile-dock main.wide,
  body.has-mobile-dock main.exec-full {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(0px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box;
  }

  body.has-mobile-dock .customer-cabinet,
  body.has-mobile-dock .contractor-cabinet,
  body.has-mobile-dock .moderator-cabinet,
  body.has-mobile-dock .mod-cabinet.card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }

  body.has-mobile-dock .cust-body,
  body.has-mobile-dock .cc-body {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  body.has-mobile-dock .cust-hero,
  body.has-mobile-dock .cc-hero {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Лента исполнителя — без боковых полей */
  body.has-mobile-dock .fl {
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }
  body.has-mobile-dock .fl-toolbar {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0;
  }
  body.has-mobile-dock .fl-list {
    padding: 0 0.55rem;
    gap: 0.5rem;
  }
  body.has-mobile-dock .fl-card {
    border-radius: 12px;
  }

  body.has-mobile-dock .contractor-cabinet {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  body.has-mobile-dock .cust-tabs,
  body.has-mobile-dock .cc-tabs,
  body.has-mobile-dock .cab-room-nav,
  body.has-mobile-dock .cc-quick-nav {
    display: none !important;
  }

  body.has-mobile-dock .customer-cabinet,
  body.has-mobile-dock .contractor-cabinet {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /*
   * Комната чата (телефон / планшет / PWA):
   * без карточек и боковых рамок, лента на всю ширину,
   * скроллится только переписка.
   */
  html:has(body.is-chat-room.has-mobile-dock) {
    overflow: hidden;
  }

  body.is-chat-room.has-mobile-dock.has-page-shell,
  body.is-chat-room.has-mobile-dock:has(> .page-shell) {
    height: var(--chat-vv-h, 100svh) !important;
    max-height: var(--chat-vv-h, 100svh) !important;
  }

  body.is-chat-room.has-mobile-dock.has-page-shell > .page-shell,
  body.is-chat-room.has-mobile-dock:has(> .page-shell) > .page-shell {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
  }

  body.is-chat-room.has-mobile-dock .page-shell > header {
    display: none !important;
  }

  body.is-chat-room.has-mobile-dock .page-shell > main,
  body.is-chat-room.has-mobile-dock main.cabinet-wide,
  body.is-chat-room.has-mobile-dock main.cabinet-wide:has(.customer-cabinet),
  body.is-chat-room.has-mobile-dock main.cabinet-wide:has(.contractor-cabinet) {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.is-chat-room.has-mobile-dock .customer-cabinet,
  body.is-chat-room.has-mobile-dock .contractor-cabinet {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #e9f3ee !important;
    padding: 0 !important;
  }

  body.is-chat-room.has-mobile-dock .cust-hero,
  body.is-chat-room.has-mobile-dock .cc-hero,
  body.is-chat-room.has-mobile-dock .cust-tabs,
  body.is-chat-room.has-mobile-dock .cc-tabs,
  body.is-chat-room.has-mobile-dock .cab-room-nav,
  body.is-chat-room.has-mobile-dock .cc-quick-nav,
  body.is-chat-room.has-mobile-dock .cab-page-head,
  body.is-chat-room.has-mobile-dock .vu-page-head,
  body.is-chat-room.has-mobile-dock .cust-chat-in-cabinet__head,
  body.is-chat-room.has-mobile-dock .cc-chat-in-cabinet__head,
  body.is-chat-room.has-mobile-dock .cc-notify-banner,
  body.is-chat-room.has-mobile-dock .vr-support,
  body.is-chat-room.has-mobile-dock .pwa-soft,
  body.is-chat-room.has-mobile-dock #web-push-card,
  body.is-chat-room.has-mobile-dock .web-push-card {
    display: none !important;
  }

  body.is-chat-room.has-mobile-dock .cust-body,
  body.is-chat-room.has-mobile-dock .cc-body,
  body.is-chat-room.has-mobile-dock .cust-main,
  body.is-chat-room.has-mobile-dock .cc-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
    grid-template-columns: none !important;
  }

  body.is-chat-room.has-mobile-dock .cust-chat-in-cabinet,
  body.is-chat-room.has-mobile-dock .cc-chat-in-cabinet,
  body.is-chat-room.has-mobile-dock .cust-main > .panel {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  body.is-chat-room.has-mobile-dock .deal-chat,
  body.is-chat-room.has-mobile-dock .deal-chat__panel,
  body.is-chat-room.has-mobile-dock .chat-shell {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.is-chat-room.has-mobile-dock .deal-chat__toolbar,
  body.is-chat-room.has-mobile-dock .deal-chat__warn,
  body.is-chat-room.has-mobile-dock .deal-chat__closed,
  body.is-chat-room.has-mobile-dock .chat-compose-context,
  body.is-chat-room.has-mobile-dock .chat-compose,
  body.is-chat-room.has-mobile-dock .chat-compose-locked {
    flex: 0 0 auto !important;
  }

  body.is-chat-room.has-mobile-dock .chat-thread {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.is-chat-room.has-mobile-dock .chat-row,
  body.is-chat-room.has-mobile-dock .chat-bubble,
  body.is-chat-room.has-mobile-dock .chat-bubble__body,
  body.is-chat-room.has-mobile-dock .chat-bubble p {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body.is-chat-room.has-mobile-dock .chat-bubble {
    max-width: calc(100vw - 5.25rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  }

  body.is-chat-room.has-mobile-dock .chat-row.is-own .chat-bubble {
    max-width: calc(100vw - 2.75rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  }

  body.is-chat-room.has-mobile-dock .chat-bubble p {
    white-space: pre-wrap !important;
    overflow: visible !important;
  }
}

.m-dock[data-dock-mode="customer"] .m-dock__label,
.m-dock[data-dock-mode="contractor"] .m-dock__label {
  font-size: 0.6rem;
}

@media (max-width: 380px) {
  .m-dock__label { font-size: 0.58rem; }
  .m-dock[data-dock-mode="customer"] .m-dock__label,
  .m-dock[data-dock-mode="contractor"] .m-dock__label {
    font-size: 0.55rem;
  }
  .m-dock__cta {
    width: 38px;
    height: 38px;
  }
}