/* mobile.css — tudo do mobile isolado aqui (carrega por ultimo). */
/* Base: botoes so-mobile nascem escondidos no desktop */
.sf-drawer-btn, .sf-panel-back { display: none; }

@media (max-width: 768px) {

  /* ---- Gaveta (drawer) do "resto" da barra ---- */
  #mobile-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; width: 80%; max-width: 300px;
    background: var(--bg-secondary); z-index: 1200;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
    box-shadow: 8px 0 30px rgba(0,0,0,.28);
    display: flex; flex-direction: column; overflow-y: auto;
    will-change: transform;
  }
  #app.drawer-open #mobile-drawer { transform: translateX(0); }
  #mobile-drawer .sf-drawer-head { padding: 16px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }

  #mobile-scrim {
    position: fixed; inset: 0; z-index: 1150;
    background: rgba(0,0,0,.4); opacity: 0; pointer-events: none;
    transition: opacity .26s;
  }
  #app.drawer-open #mobile-scrim { opacity: 1; pointer-events: auto; }

  .sf-drawer-btn { display: inline-flex; }

  /* ---- Painel de dados em TELA CHEIA (classe NOVA, nao panel-open) ---- */
  .app-panel { transition: transform .26s cubic-bezier(.22,.61,.36,1); }
  #app.mobile-panel .app-panel {
    display: block !important;
    position: fixed; inset: 0; z-index: 1300;
    width: 100%; height: 100%;
    background: var(--bg-secondary);
    transform: translateX(0);
    will-change: transform;
    overflow-y: auto;
  }
  .sf-panel-back { display: inline-flex; }

  /* esconder o ☰ 'Painel de contexto' do header do CHAT (colide com o ☰ da gaveta) */
  .chat-header-actions .chat-panel-btn { display: none !important; }

  /* ---- Transicao da troca lista<->chat ---- */
  #app.chat-open #chat-area { animation: sfSlideIn .26s cubic-bezier(.22,.61,.36,1); }
  @keyframes sfSlideIn { from { transform: translateX(6%); opacity: .6; } to { transform: none; opacity: 1; } }
  /* ---- Chat reflow: composer/mic visivel, sem overflow horizontal ---- */

  /* .app-chat e #chat-area sao flex columns — cada filho precisa de min-height:0
     para nao ultrapassar o container pai no eixo principal */
  .app-chat,
  #chat-area {
    min-height: 0;
    overflow: hidden;
  }

  /* Container de mensagens ocupa o espaco disponivel e rola verticalmente */
  .messages-container {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Compositor fica fixo na base, nao encolhe */
  .composer {
    flex: 0 0 auto;
    min-height: 0;
  }

  /* Baloes de mensagem nao escapam lateralmente */
  .messages-container .msg,
  .messages-container .msg-text {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  /* Sem scroll horizontal no body do chat */
  .app-chat {
    overflow-x: hidden;
  }

}

/* ===== FIX 2026-07-25d: titlebar macOS + overflow horizontal ===== */
@media (max-width: 768px) {

  /* Bug 1: ocultar titlebar macOS (3 dots + titulo nowrap) no mobile */
  .sf-traffic-lights {
    display: none !important;
  }
  .sf-tb-user-name {
    display: none !important;
  }

  /* Bug 1b: #app nao precisa de janela macOS no mobile */
  #app.sf-macos-window {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Bug 2: zerear min-width fixo que empurra conteudo para fora da viewport */
  #app,
  .app-chat,
  #chat-area,
  .messages-container,
  .composer {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Bug 2b: compositor interno — flex correto para mic/send nao escapar */
  .composer-input-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    min-width: 0 !important;
  }

  /* Bug 2c: textarea cresce, botoes nao encolhem */
  .composer-input-row textarea,
  .composer-input-row .composer-textarea {
    flex: 1 1 auto;
    min-width: 0;
  }

  .composer-input-row .btn-send,
  .composer-input-row .btn-mic-send,
  .composer-input-row .btn-attach,
  .composer-input-row .btn-emoji {
    flex: 0 0 auto;
  }

  /* Bug 2d: bolhas enviadas (msg-bot = bot/enviada, msg-lead = lead/recebida) */
  .messages-container .msg-bot,
  .messages-container .msg-lead,
  .messages-container .msg.msg-bot,
  .messages-container .msg.msg-lead {
    max-width: 85%;
    box-sizing: border-box;
  }

  /* msg-bot fica a direita — garantir margin-left:auto para nao sair do viewport */
  .messages-container .msg-bot,
  .messages-container .msg.msg-bot {
    margin-left: auto;
    margin-right: 0;
  }

}
/* ===== FIM FIX 2026-07-25d ===== */