/* =============================================================
 *  base/responsive.css
 *  Extraído automaticamente de index.php.
 *  NÃO editar manualmente até remover o script de split.
 * ============================================================= */

    /* ── RESPONSIVO MOBILE ── */
    @media (max-width: 767px) {
      #app { display: block; }

      /* Slide do chat com `left` (não `transform`): assim o cabeçalho pode usar
         position:fixed relativo ao viewport — com transform no painel, o fixed
         “colava” ao #panel-chat e sumia ao focar o teclado no iOS. */
      #panel-contacts, #panel-chat {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
      }

      #panel-contacts {
        left: 0;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        will-change: transform;
      }

      #panel-chat {
        left: 100%;
        transition: left .3s cubic-bezier(.4, 0, .2, 1);
        will-change: left;
        z-index: 2;
      }

      #app.in-chat #panel-contacts {
        transform: translateX(-25%);
        pointer-events: none;
      }

      #app.in-chat #panel-chat {
        left: 0;
        padding-top: calc(var(--header) + var(--zori-safe-top));
        box-sizing: border-box;
      }

      /* Cabeçalho preso ao ecrã visível; padding no #panel-chat reserva o espaço no fluxo. */
      #app.in-chat .chat-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 50;
        padding-top: var(--zori-safe-top);
        height: calc(var(--header) + var(--zori-safe-top));
        box-sizing: border-box;
      }

      .bubble    { max-width: 82%; }
      .msg-forward-tag { align-items: flex-start; }
      .msg-forward-txt {
        display: flex;
        flex-direction: column;
      }
      .msg-forward-group { margin-top: 2px; }
      #messages-box { padding: 12px 10px; }
      .btn-scroll-chat-bottom { right: 8px; bottom: 8px; width: 42px; height: 42px; }
    }

    /* Telas muito estreitas */
    @media (max-width: 380px) {
      #reaction-popover { max-width: 96vw; }
      .react-bar { gap: 8px; padding: 9px 10px; }
      .react-bar button { width: 32px; height: 32px; }
    }