/* Mensagens (chat) do freelancer — js/views/chats.js.
   A base (lista, bolhas, etiquetas DIÁRIA/VAGA FIXA, gravador, mídia) já está em app.css (cópia do portal da empresa);
   aqui ficam só os ajustes da versão do freelancer (celular primeiro, barra inferior, iPhone). */

/* Botão "Conversar com a empresa" (telas de diária e de candidatura). */
.chat-open-btn { white-space: normal; }

/* Altura da conversa: usa a altura dinâmica da tela (barra do navegador do celular) quando o navegador suporta. */
.chat-scroll { height: calc(100vh - var(--topbar-h) - 330px); }
@supports (height: 100dvh) {
  .chat-scroll { height: calc(100dvh - var(--topbar-h) - 330px); }
}

/* Campo de mensagem: cresce pelo atributo rows (sem estilo inline). 16px evita o zoom automático do iPhone. */
.chat-input { font-size: 16px; line-height: 1.4; overflow-y: auto; }
.chat-send { flex: none; min-height: 44px; }
.chat-tools .btn { min-height: 40px; }
.chat-context-btn { flex: none; }

@media (max-width: 640px) {
  /* Dentro da conversa a barra inferior some (como no app) para sobrar espaço; "‹ Mensagens" volta para a lista. */
  .layout.has-tabbar:has(.chat-panel) .tabbar { display: none; }
  .layout.has-tabbar:has(.chat-panel) .content { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

  .chat-panel { margin: 0 -4px; }
  .chat-scroll { height: calc(100vh - var(--topbar-h) - 290px); min-height: 220px; }
  @supports (height: 100dvh) {
    .chat-scroll { height: calc(100dvh - var(--topbar-h) - 290px); }
  }
  .chat-context { padding: 8px 12px; margin-bottom: 8px; gap: 6px 10px; }
  .chat-context .kind-tag-lg { font-size: 0.8rem; padding: 4px 10px; }
  .chat-context-title { font-size: 1rem; }
  .chat-context-detail { font-size: 0.88rem; }
  .chat-composer { padding: 8px; gap: 6px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .chat-hint { display: none; }
  .chat-tools { gap: 6px; }
  .chat-tools .btn { flex: 1 1 0; padding-left: 6px; padding-right: 6px; }
  .chat-recorder { padding: 10px 8px; }
  .chat-recorder .row-actions { display: flex; gap: 8px; width: 100%; }
  .chat-recorder .row-actions .btn { flex: 1 1 0; min-height: 44px; }
  .chat-audio audio, .chat-recorder audio { width: 240px; }
  .chat-row { padding: 12px; gap: 10px; }
  .chat-filters { gap: 6px; }
  .chat-filter { padding: 6px 12px; }
}

/* Celular sem :has() (navegadores antigos): mantém a barra inferior; só ajusta a altura. */
@supports not selector(:has(*)) {
  @media (max-width: 640px) {
    .chat-scroll { height: calc(100vh - var(--topbar-h) - 370px); }
  }
}