/*
 * Flow Connect — experiência unificada da Entrega 11.5.
 *
 * - composer interno/externo com controles alinhados;
 * - badge persistente no ícone do Flow Connect;
 * - chamador de mensagem interna não lida;
 * - cards de conversas internas na coluna Minhas.
 */

/* Composer -------------------------------------------------------------- */
#flow-chat-overlay .chat-input-row-compact,
#flow-messages-chat .chat-input-row-compact {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

#flow-chat-overlay .chat-input-row-compact .message-textarea-wrapper,
#flow-messages-chat .chat-input-row-compact .message-textarea-wrapper {
    flex: 1 1 auto;
    min-width: 140px;
}

#flow-chat-overlay .chat-input-row-compact .message-textarea-wrapper textarea,
#flow-messages-chat .chat-input-row-compact .message-textarea-wrapper textarea {
    box-sizing: border-box;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 104px;
    padding: 7px 10px;
    line-height: 18px;
    resize: vertical;
}

#flow-chat-overlay .chat-input-row-compact .chat-footer-action-button,
#flow-chat-overlay .chat-input-row-compact .chat-emoji-button,
#flow-chat-overlay .chat-input-row-compact .chat-send-button,
#flow-messages-chat .chat-input-row-compact .chat-footer-action-button,
#flow-messages-chat .chat-input-row-compact .chat-emoji-button,
#flow-messages-chat .chat-input-row-compact .chat-send-button {
    display: inline-flex !important;
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 9px;
    line-height: 1;
}

#flow-chat-overlay .chat-input-row-compact .chat-emoji-wrapper,
#flow-chat-overlay .chat-input-row-compact .flow-message-quick-replies-wrapper,
#flow-messages-chat .chat-input-row-compact .chat-emoji-wrapper,
#flow-messages-chat .chat-input-row-compact .flow-message-quick-replies-wrapper {
    display: flex;
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    align-items: stretch;
}

#flow-chat-overlay .chat-input-row-compact .chat-emoji-wrapper > button,
#flow-chat-overlay .chat-input-row-compact .flow-message-quick-replies-wrapper > button,
#flow-messages-chat .chat-input-row-compact .chat-emoji-wrapper > button,
#flow-messages-chat .chat-input-row-compact .flow-message-quick-replies-wrapper > button {
    width: 52px;
    min-width: 52px;
    height: 52px;
}

#flow-chat-overlay .flow-connect-internal-audio-send-button {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
}

/* Overlay externo: mantém o composer em duas faixas limpas -----------------
 * 1) destinatário em largura total;
 * 2) ações + textarea + envio em uma única linha no desktop.
 *
 * O bloco acima usa 52px para o Flow Connect interno. No WhatsApp/conversa
 * externa o overlay tem só 560px; seis controles de 52px + textarea faziam o
 * botão Enviar quebrar para uma terceira linha. Aqui usamos 44px apenas no
 * contexto externo, preservando o interno.
 */
#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-recipient-row {
    display: flex;
    width: 100%;
}

#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-recipient-select {
    width: 100%;
    max-width: none;
    height: 44px;
    flex: 1 1 100%;
}

#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-input-row-compact {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
}

#flow-chat-overlay .chat-footer[data-context-type="conversation"] .message-textarea-wrapper {
    flex: 1 1 auto;
    min-width: 150px;
    order: 2;
}

#flow-chat-overlay .chat-footer[data-context-type="conversation"] .message-textarea-wrapper textarea {
    min-height: 52px !important;
    height: 52px !important;
    max-height: 104px;
}

#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-footer-action-button,
#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-emoji-button,
#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-send-button {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 52px;
    min-height: 52px;
    padding: 0 !important;
    border-radius: 9px;
}

#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-emoji-wrapper,
#flow-chat-overlay .chat-footer[data-context-type="conversation"] .flow-message-quick-replies-wrapper {
    display: flex;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    align-items: stretch;
}

#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-emoji-wrapper > button,
#flow-chat-overlay .chat-footer[data-context-type="conversation"] .flow-message-quick-replies-wrapper > button {
    width: 44px;
    min-width: 44px;
    height: 52px;
}

#flow-chat-overlay .chat-footer[data-context-type="conversation"] .flow-message-quick-replies-wrapper,
#flow-chat-overlay .chat-footer[data-context-type="conversation"] #add-chat-participant {
    order: 1;
}

#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-message-audio-dictation-button,
#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-message-audio-send-button,
#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-emoji-wrapper,
#flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-send-button {
    order: 3;
}

/* Ícone/badge ----------------------------------------------------------- */
.flow-connect-contact-trigger {
    position: relative;
}

.flow-connect-contact-trigger.flow-connect-has-attention {
    color: #0d6efd !important;
    background: rgba(13, 110, 253, .10);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .10);
}

.flow-connect-attention-badge {
    position: absolute;
    top: -2px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

/* Chamador de mensagem ------------------------------------------------- */
.ef-flow-connect-message-root {
    position: fixed;
    top: 86px;
    right: 18px;
    z-index: 1085;
    width: min(390px, calc(100vw - 36px));
}

.ef-flow-connect-message-root[hidden] {
    display: none !important;
}

.ef-flow-connect-message-card {
    padding: 14px 15px;
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}

.ef-flow-connect-message-kicker {
    margin-bottom: 5px;
    color: #0d6efd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ef-flow-connect-message-contact {
    color: #243447;
    font-size: 15px;
    font-weight: 700;
}

.ef-flow-connect-message-preview {
    margin-top: 5px;
    overflow: hidden;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ef-flow-connect-message-meta {
    margin-top: 6px;
    color: #8492a6;
    font-size: 11px;
}

.ef-flow-connect-message-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Conversas > Minhas --------------------------------------------------- */
/*
 * Padronização de formato (2026-09-20, pedido do usuário): o card do Flow
 * Connect deixou de morar dentro de uma seção própria ("Flow Connect")
 * separada dos cards WhatsApp/PABX (ver render() em
 * flow-connect-conversas-board.js) — agora é um filho direto de
 * .conversas-column-body, igual aos outros, e por isso precisa da mesma
 * "casca" visual (.conversas-card em flow-conversas-board.css): borda,
 * raio, padding e sombra idênticos, espaçamento entre cards vindo do
 * gap do flex pai em vez de margin próprio, position:relative pra
 * conversas-card-time (reaproveitada daquele arquivo) se posicionar no
 * canto certo. .flow-connect-conversas-section* abaixo ficou sem uso —
 * mantido só como referência histórica, não é mais criado em nenhum lugar.
 */
.flow-connect-conversas-section {
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid #dce9f8;
    border-radius: 10px;
    background: #f7fbff;
}

.flow-connect-conversas-section-title {
    padding: 2px 3px 7px;
    color: #0b6fc2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.flow-connect-conversas-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    padding-bottom: 22px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #25364a;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.flow-connect-conversas-card.has-unread {
    border-left: 4px solid #0d6efd;
}

@media (max-width: 575.98px) {
    #flow-chat-overlay .chat-input-row-compact,
    #flow-messages-chat .chat-input-row-compact {
        flex-wrap: wrap;
    }

    #flow-chat-overlay .chat-input-row-compact .message-textarea-wrapper,
    #flow-messages-chat .chat-input-row-compact .message-textarea-wrapper {
        flex: 1 1 100%;
        order: -1;
    }

    #flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-input-row-compact {
        flex-wrap: wrap;
    }

    #flow-chat-overlay .chat-footer[data-context-type="conversation"] .message-textarea-wrapper {
        flex: 1 1 100%;
        min-width: 100%;
        order: 1;
    }

    #flow-chat-overlay .chat-footer[data-context-type="conversation"] .flow-message-quick-replies-wrapper,
    #flow-chat-overlay .chat-footer[data-context-type="conversation"] #add-chat-participant,
    #flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-message-audio-dictation-button,
    #flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-message-audio-send-button,
    #flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-emoji-wrapper,
    #flow-chat-overlay .chat-footer[data-context-type="conversation"] .chat-send-button {
        order: 2;
    }

    .ef-flow-connect-message-root {
        top: 72px;
        right: 10px;
        width: calc(100vw - 20px);
    }
}