/* ============================================================
   XINGUZINHO_MOBILE_ATENDIMENTO_V4
   Composer integrado ao card + safe-area corrigida
   ============================================================ */

@media (max-width:820px) {

  /*
   * A tela de atendimento não começa mais atrás do relógio /
   * Dynamic Island do iPhone.
   */
  body.xmob-atendimento-aberto .main {
    padding-top:
      calc(
        74px +
        env(safe-area-inset-top)
      ) !important;

    padding-bottom:
      calc(
        92px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  /*
   * O composer deixa de flutuar sobre as mensagens.
   * Agora ele pertence ao fluxo normal da tela, logo abaixo do chat.
   */
  .xmob-composer {
    position:relative !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:2 !important;

    margin:
      10px
      0
      0 !important;

    padding:
      8px !important;

    border:
      1px solid
      var(--tema-borda,#2a3953) !important;

    border-radius:
      14px !important;

    background:
      var(--tema-card,#111827) !important;

    backdrop-filter:none !important;

    box-shadow:
      none !important;
  }


  /*
   * O campo fica com mais espaço e não parece uma barra "solta".
   */
  #chatInput.xmob-chat-input {
    min-width:0 !important;
    width:100% !important;
  }


  /*
   * O chat passa a reservar a altura dele normalmente.
   * Não fica escondido atrás do composer.
   */
  #chatMensagens.xmob-chat {
    height:
      min(
        54dvh,
        580px
      ) !important;

    margin-bottom:
      0 !important;

    scroll-padding-bottom:
      18px;
  }


  /*
   * Botão "ir para o fim" deixa de ficar preso à viewport.
   * Ele fica relacionado ao próprio painel do atendimento.
   */
  .xmob-atendimento-panel {
    position:relative !important;
  }


  .xmob-scroll-bottom {
    position:absolute !important;

    right:
      18px !important;

    bottom:
      84px !important;

    z-index:
      8 !important;
  }


  /*
   * Barra inferior continua fixa, mas visualmente separada
   * do campo de mensagem.
   */
  body.xmob-atendimento-aberto
  .xv5-mobile-dock {
    z-index:
      100 !important;

    box-shadow:
      0 10px 26px
      rgba(0,0,0,.22) !important;
  }


  /*
   * Mais respiro entre as ações e a conversa.
   */
  .xmob-acoes-atendimento {
    margin-bottom:
      14px !important;
  }


  /*
   * Evita que o primeiro card fique encostado demais no topo
   * em modo PWA / standalone.
   */
  html.xv5-pwa-standalone
  body.xmob-atendimento-aberto
  .xmob-atendimento-panel {
    margin-top:
      4px !important;
  }


  /*
   * No modo focado, só destaca a borda. Não desloca nem flutua.
   */
  .xmob-composer.focused {
    transform:none !important;

    border-color:
      rgba(37,99,235,.72) !important;

    box-shadow:
      0 0 0 2px
      rgba(37,99,235,.10) !important;
  }
}


/* Celulares estreitos */
@media (max-width:390px) {

  .xmob-composer {
    grid-template-columns:
      36px
      36px
      36px
      minmax(0,1fr)
      42px !important;

    gap:
      5px !important;

    padding:
      6px !important;
  }
}