/**

 * RedFeed DM — layout canônico (PC 2 colunas + mobile slide).

 * Mobile: Explorar / Mensagens (lista) / Perfil NÃO cobrem o menu inferior.

 * Mobile: chat aberto = página full-screen deslizando da direita (cobre o menu).

 */



/* === PC: lista | chat + compose no grid === */

@media (min-width: 861px) {

  body.rf-stack-open.rf-dm-inline-chat-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-stack-tab-body,

  body.rf-stack-open.rf-dm-inline-chat-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-stack-page-root,

  body.rf-stack-open.rf-dm-inline-chat-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-wrap-page,

  body.rf-stack-open.rf-dm-inline-chat-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-page-container,

  body.rf-stack-open.rf-dm-inline-chat-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-wrap {

    height: 100% !important;

    max-height: 100% !important;

    min-height: 0 !important;

    overflow: hidden !important;

  }



  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-messages {

    min-height: 0 !important;

  }



  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-chat.rf-dm-chat-active,

  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-chat:has(#rfDmCompose) {

    display: grid !important;

    grid-template-rows: auto minmax(0, 1fr) auto !important;

    grid-template-columns: minmax(0, 1fr) !important;

    height: 100% !important;

    max-height: 100% !important;

    min-height: 0 !important;

    overflow: hidden !important;

    position: relative !important;

  }



  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-chat.rf-dm-chat-active .rf-dm-chat-head,

  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-chat:has(#rfDmCompose) .rf-dm-chat-head {

    grid-row: 1 !important;

  }



  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-chat.rf-dm-chat-active .rf-dm-messages,

  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-chat:has(#rfDmCompose) .rf-dm-messages {

    grid-row: 2 !important;

    flex: none !important;

    min-height: 0 !important;

    overflow-y: auto !important;

    padding-bottom: 10px !important;

  }



  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-chat.rf-dm-chat-active .rf-dm-compose-wrap,

  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-chat:has(#rfDmCompose) .rf-dm-compose-wrap {

    grid-row: 3 !important;

    position: relative !important;

    left: auto !important;

    right: auto !important;

    bottom: auto !important;

    top: auto !important;

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    flex: none !important;

    min-height: 56px !important;

    z-index: 5 !important;

  }

}



/* === Mobile === */

@media (max-width: 860px) {

  /*

   * Camadas stack (Explorar, Mensagens-lista, Perfil): param acima do menu inferior.

   * Não aplica quando o chat DM está aberto (full-screen).

   */

  body.rf-stack-open:not(.rf-dm-stack-chat-step) #rfStackRoot {

    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;

  }



  body.rf-stack-open:not(.rf-dm-stack-chat-step) .rf-bottom-nav {

    display: flex !important;

    visibility: visible !important;

    z-index: 2147482800 !important;

  }



  /* Lista de conversas — sem coluna chat */

  body.rf-stack-open.rf-dm-list-only:not(.rf-dm-stack-chat-step)

    .rf-stack-layer.on[data-rf-stack-nav="messages"]

    .rf-dm-chat {

    display: none !important;

  }



  /*

   * Chat aberto = nova “folha” full-screen (cobre menu inferior).

   * Desliza da direita; voltar (<< ou botão do celular) fecha e mostra conversas.

   */

  body.rf-stack-open.rf-dm-stack-chat-step .rf-bottom-nav {

    display: none !important;

  }



  /* Lista fica por baixo do chat (slide) — nunca esconder com visibility (evita tela preta) */

  body.rf-stack-open.rf-dm-stack-chat-step

    .rf-stack-layer.on[data-rf-stack-nav="messages"]

    .rf-dm-list {

    visibility: visible !important;

    pointer-events: none !important;

  }



  /* Chat mobile: hoisted para #rfDmMobileChatHost (fora do layer com transform) */

  #rfDmMobileChatHost {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 2147482760;

    pointer-events: none;

  }

  body > #rfDmMobileChatHost {

    position: fixed !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    max-height: 100dvh !important;

    z-index: 2147483646 !important;

  }

  #rfDmMobileChatHost:empty,
  body:not(.rf-dm-mobile-chat-open):not(.rf-dm-mobile-chat-closing) #rfDmMobileChatHost {

    display: none !important;

    pointer-events: none !important;

    visibility: hidden !important;

  }

  .rf-stack-layer.on[data-rf-stack-nav="messages"] #rfDmMobileChatHost {

    position: absolute;

    inset: 0;

    z-index: 40;

  }

  body.rf-dm-stack-chat-step .rf-stack-layer.on[data-rf-stack-nav="messages"] .rf-stack-tab-body {

    position: relative;

    overflow: hidden;

  }

  body.rf-dm-stack-chat-step .rf-stack-layer.on[data-rf-stack-nav="messages"] .rf-stack-float-back {

    visibility: hidden !important;

    pointer-events: none !important;

  }



  body.rf-dm-mobile-chat-open #rfDmMobileChatHost {

    display: block;

    pointer-events: auto;

  }

  body.rf-dm-mobile-chat-open:not(.rf-stack-open) #rfDmMobileChatHost {

    position: fixed;

    inset: 0;

    z-index: 2147482760;

  }



  @keyframes rfDmChatSlideIn {

    from {

      transform: translate3d(100%, 0, 0);

    }

    to {

      transform: translate3d(0, 0, 0);

    }

  }

  @keyframes rfDmChatSlideOut {

    from {

      transform: translate3d(0, 0, 0);

    }

    to {

      transform: translate3d(100%, 0, 0);

    }

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost > .rf-dm-chat,
  body.rf-dm-mobile-chat-closing #rfDmMobileChatHost > .rf-dm-chat {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    z-index: 2 !important;

    display: grid !important;

    grid-template-rows: auto minmax(0, 1fr) auto !important;

    height: 100% !important;

    max-height: 100dvh !important;

    min-height: 0 !important;

    overflow: hidden !important;

    background: #07070b !important;

    will-change: transform;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost > .rf-dm-chat:not(.rf-dm-chat-slide-instant) {

    animation: rfDmChatSlideIn 0.34s cubic-bezier(0.32, 0.72, 0, 1) both;

  }

  body.rf-dm-mobile-chat-closing #rfDmMobileChatHost {

    display: block !important;

    pointer-events: none !important;

  }

  body.rf-dm-mobile-chat-closing #rfDmMobileChatHost > .rf-dm-chat:not(.rf-dm-chat-slide-instant) {

    animation: rfDmChatSlideOut 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost > .rf-dm-chat.rf-dm-chat-slide-instant,
  body.rf-dm-mobile-chat-closing #rfDmMobileChatHost > .rf-dm-chat.rf-dm-chat-slide-instant {

    animation: none !important;

    transform: translate3d(0, 0, 0);

  }

  body.rf-dm-mobile-chat-closing #rfDmMobileChatHost > .rf-dm-chat.rf-dm-chat-slide-instant {

    transform: translate3d(100%, 0, 0);

  }

  /* Camada Mensagens permanece; só o painel do chat cobre em slide */

  body.rf-dm-stack-chat-step .rf-stack-layer.on[data-rf-stack-nav="messages"] {

    transform: none !important;

    transition: none !important;

    position: relative !important;

    inset: auto !important;

    z-index: auto !important;

  }

  body.rf-dm-stack-chat-step .rf-stack-layer.on[data-rf-stack-nav="messages"] .rf-dm-wrap-page,

  body.rf-dm-stack-chat-step .rf-stack-layer.on[data-rf-stack-nav="messages"] .rf-dm-page-container,

  body.rf-dm-stack-chat-step .rf-stack-layer.on[data-rf-stack-nav="messages"] .rf-dm-wrap {

    flex: 1 !important;

    min-height: 0 !important;

    height: 100% !important;

    display: flex !important;

    flex-direction: column !important;

  }

  /* Mobile stack: chat só no overlay (#rfDmChatOverlay) — nunca empilhar abaixo da lista */

  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-wrap > .rf-dm-chat,

  body.rf-stack-mode .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-wrap > .rf-dm-chat,

  body.rf-stack-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-wrap > .rf-dm-chat,

  body.rf-stack-mode .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-wrap > .rf-dm-chat,

  body.rf-dm-stack-chat-step .rf-stack-layer.on[data-rf-stack-nav="messages"] .rf-dm-wrap > .rf-dm-chat,

  body.rf-dm-mobile-chat-open .rf-stack-layer[data-rf-stack-nav="messages"] .rf-dm-wrap > .rf-dm-chat {

    display: none !important;

    visibility: hidden !important;

    height: 0 !important;

    min-height: 0 !important;

    max-height: 0 !important;

    overflow: hidden !important;

    pointer-events: none !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

  }

  body.rf-dm-stack-chat-step .rf-stack-layer.on[data-rf-stack-nav="messages"] .rf-dm-list {

    flex: 1 1 auto !important;

    min-height: 0 !important;

    display: flex !important;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-chat-head,
  body.rf-dm-mobile-chat-closing #rfDmMobileChatHost .rf-dm-chat-head {

    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-chat-head #rfDmBackBtn,
  body.rf-dm-mobile-chat-closing #rfDmMobileChatHost .rf-dm-chat-head #rfDmBackBtn {

    display: inline-flex !important;

    flex-shrink: 0;

  }

  body.rf-dm-chat-instant .rf-stack-layer.on[data-rf-stack-nav="messages"] .rf-dm-chat,

  body.rf-dm-chat-instant #rfDmMobileChatHost > .rf-dm-chat {

    animation: none !important;

  }

  .rf-dm-chat-loading--inline {

    display: grid !important;

    place-items: center !important;

    min-height: 120px !important;

    padding: 24px !important;

  }

  .rf-dm-chat-loading-dot {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    border: 3px solid rgba(255, 255, 255, 0.12);

    border-top-color: #ff174d;

    animation: rfDmChatLoadSpin 0.7s linear infinite;

  }

  @keyframes rfDmChatLoadSpin {

    to {

      transform: rotate(360deg);

    }

  }



  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-chat-head {

    display: flex !important;

    grid-row: 1 !important;

    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;

    position: relative !important;

    z-index: 6 !important;

  }



  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-call-actions,

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-call-btn {

    pointer-events: auto !important;

    touch-action: manipulation !important;

  }



  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-chat-head #rfDmBackBtn {

    display: inline-flex !important;

  }



  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-messages {

    grid-row: 2 !important;

    min-height: 0 !important;

    overflow-y: auto !important;

  }



  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-compose-wrap {

    grid-row: 3 !important;

    position: relative !important;

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    min-height: 56px !important;

    padding: 8px 10px max(10px, env(safe-area-inset-bottom, 0px)) !important;

    box-sizing: border-box !important;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-chat-peer {

    flex: 1;

    min-width: 0;

    max-width: none !important;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-chat-peer-text {

    min-width: 0;

    overflow: hidden;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-chat-peer-text strong {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-rel-badge {

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-messages {

    padding-left: 10px !important;

    padding-right: 10px !important;

    -webkit-overflow-scrolling: touch;

  }

  body.rf-dm-stack-chat-step .rf-dm-list-head-row {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    min-width: 0 !important;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-compose input {

    font-size: 16px !important;

  }

  body.rf-dm-mobile-chat-open #rfDmMobileChatHost .rf-dm-compose-act.send {

    display: grid !important;

  }

  body.rf-dm-keyboard-open #rfDmMobileChatHost {

    height: var(--rf-dm-vv-h, 100dvh) !important;

  }

}



@keyframes rfDmMobileChatIn {

  from {

    transform: translateX(100%);

  }

  to {

    transform: translateX(0);

  }

}