/* FIX (set/2026 - deploy): as regras abaixo, ate o marcador "FIM DA
   CONTINUACAO", sao a CONTINUACAO de index.css (a segunda metade do
   arquivo original de ~167KB) - colocadas aqui SOMENTE por limitacao de
   tamanho da ferramenta de deploy usada (nao consegue gravar um arquivo
   unico grande demais de uma vez). O conteudo e a ordem das regras sao
   EXATAMENTE os mesmos de um index.css unico; como este arquivo carrega
   logo depois de index.css (e antes do ajuste avulso da capsula, abaixo),
   a cascata CSS fica identica a de um unico arquivo. */


body.light .config-tab {
    background: #f0f2f5;
    color: #1f2937 !important;
}

body.light .config-tab.active {
    background: #4CAF50;
    color: #052441 !important;
}

.conv-meta .lead-unread-pill {
  align-self: flex-end;
}
/* ===== WHATSAPP WEB LOOK (ajustes) ===== */
body:not(.light) .chat-messages { background-color: #171818; }
/* Agrupamento de baloes seguidos do mesmo remetente */
.message.sent + .message.sent,
.message.received + .message.received { margin-top: 6px; }
.message.sent + .message.received,
.message.received + .message.sent { margin-top: 12px; }
/* Cantos: so o primeiro/ultimo do grupo tem canto arredondado grande (estilo WA) */


/* Hora translucida como no WhatsApp */
body:not(.light) .message-time { color: rgba(233,237,239,0.6) !important; font-size: 11px; }
/* Fonte estilo WhatsApp */
.message, .message * { font-family: 'Segoe UI', 'Helvetica Neue', 'Inter', sans-serif; }
.message { font-size: 15px; line-height: 19px; }
/* ===== FIM WHATSAPP WEB LOOK ===== */

/* ===== WHATSAPP AJUSTE FINO ===== */
/* Fonte do balao (renderizado inline como .message-bubble) */
.message-bubble, .message-bubble * { font-family: 'Segoe UI','Helvetica Neue',sans-serif !important; }
.message-bubble { font-size: 15px !important; line-height: 19px !important; }
.message-bubble span { font-size: 15px !important; }
/* Microfone SEM circulo verde (estilo WhatsApp) */
.chat-audio-btn { background: transparent !important; color: #8696a0 !important; width: 40px !important; height: 40px !important; font-size: 24px !important; }
.chat-audio-btn:hover { color: #e9edef !important; background: transparent !important; }
.chat-audio-btn.recording { background: transparent !important; color: #ef4444 !important; }
/* Botao enviar: verde WhatsApp */
.chat-send-btn { background: #00A884 !important; }
/* ===== FIM AJUSTE FINO ===== */

/* engelogic-fix: espacamento baloes */
.message-row{margin-bottom:18px !important;}

/* Separacao dos baloes - flow-root contem float sem colapsar */
#chatMessages .message-row { display: flow-root !important; margin-bottom: 2px !important; }

/* Avatar WhatsApp: icone de pessoa, cor de fundo por hash (definida inline no JS) */
.conv-avatar, .chat-header-avatar { display: flex; align-items: center; justify-content: center; color: #fff !important; overflow: hidden; }
.conv-avatar .avatar-fallback-icon, .chat-header-avatar .avatar-fallback-icon { color: rgba(255,255,255,0.92); }
.conv-avatar .avatar-fallback-icon i { font-size: 22px; }
.chat-header-avatar .avatar-fallback-icon i { font-size: 24px; }
/* ===== FIM AVATAR ===== */

/* Avatar grande do painel de dados do contato */
#infoAvatar { display: flex; align-items: center; justify-content: center; overflow: hidden; }
#infoAvatar img { width: 100%; height: 100%; object-fit: cover; }
#infoAvatar .avatar-fallback-icon i { font-size: 64px; }
/* ===== FIM infoAvatar ===== */

/* ===== TOPBAR: botoes nova-conversa e segmentador estilo WhatsApp ===== */
.topbar-actions { display: none; align-items: center; gap: 6px; }
/* mostra so quando a view Atendimentos esta ativa */
body:has(#viewAtendimentos.active) .topbar-actions { display: flex; }
/* botoes sem circulo de fundo, so no hover (igual WhatsApp) */
.topbar-actions .new-conv-btn { background: transparent !important; color: #aebac1 !important; width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; }
.topbar-actions .new-conv-btn:hover { background: rgba(255,255,255,0.10) !important; color: #e9edef !important; }
.topbar-actions .segmentador-btn { background: transparent !important; color: #aebac1 !important; }
.topbar-actions .segmentador-btn:hover { background: rgba(255,255,255,0.10) !important; }
.topbar-actions .segmentador-btn.segmentador-active { background: transparent !important; color: #e53935 !important; }

/* ===== CHAT: botoes de acao flutuando sobre o canto do chat ===== */
.chat-header-right { position: absolute !important; top: 8px; right: 12px; z-index: 20; }
.chat-header-actions .chat-action-btn { box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
/* ===== FIM LAYOUT TOPBAR/CHAT ===== */

/* Botoes nova/segmentador no fim da zona da coluna de leads */
body:has(#viewAtendimentos.active) .topbar-left { width: 425px; box-sizing: border-box; }
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-left .topbar-actions { margin-left: auto; }
/* ===== FIM POS BOTOES ===== */

/* Divisoria vertical topbar alinhada com a coluna de leads (sobe ate o topo) */
body:has(#viewAtendimentos.active) .topbar { position: relative; }
body:has(#viewAtendimentos.active) .topbar::after { content: ''; position: absolute; top: 0; bottom: 0; left: 463px; width: 0.8px; background: var(--border-dark, #333); pointer-events: none; }
/* ===== FIM DIVISORIA TOPBAR ===== */

/* ===== WhatsApp: barra de busca + icones + remover linha topbar ===== */
/* remove a linha horizontal acima da busca (na zona de leads) */
body:has(#viewAtendimentos.active) .topbar { border-bottom: none; }
/* barra de pesquisa igual ao WhatsApp */
.conv-search-row { padding: 8px 12px; }
.conv-search-row input { background: #2E2F2F !important; border-radius: 8px !important; height: 35px; padding: 0 14px 0 14px !important; font-size: 14px !important; color: #d1d7db !important; }
.conv-search-row input::placeholder { color: #8696a0 !important; }
/* icones nova/segmentador brancos */
.topbar-actions .new-conv-btn { color: #ffffff !important; }
.topbar-actions .segmentador-btn { color: #ffffff !important; }
.topbar-actions .new-conv-btn:hover, .topbar-actions .segmentador-btn:hover { color: #ffffff !important; }
/* ===== FIM ===== */

/* ===== WhatsApp: topbar sem fundo cinza, subir busca ===== */
body:has(#viewAtendimentos.active) .topbar { background: #121212; height: 56px; }
/* subir a barra de pesquisa e o que vem abaixo */
body:has(#viewAtendimentos.active) .conv-search-row { padding-top: 4px; padding-bottom: 6px; }
/* ===== FIM ===== */

/* ===== Titulo do lead movido para a topbar (estilo WhatsApp) ===== */
#topbarChatTitle { flex: 1; display: flex; align-items: center; min-width: 0; height: 100%; padding-left: 16px; }
#topbarChatTitle .chat-header-left { display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
#topbarChatTitle .chat-header-avatar { width: 40px; height: 40px; flex-shrink: 0; }
#topbarChatTitle .chat-customer-name { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* esconde a barra de baixo do chat, mas mantem os botoes flutuantes visiveis */
.chat-header { height: 0 !important; min-height: 0 !important; padding: 0 !important; border-bottom: none !important; background: transparent !important; overflow: visible !important; }
.chat-header .chat-header-right { top: -46px; }
/* ===== FIM ===== */

/* ===== AJUSTES: botoes chat, titulo, divisoria ===== */
/* botoes do chat voltam a flutuar sobre o topo da area do chat (nao no canto da tela) */
.chat-header .chat-header-right { position: fixed !important; top: 64px !important; right: 18px !important; left: auto !important; z-index: 30; }
/* titulo do lead: empurra para depois da divisoria (zona do chat) */
#topbarChatTitle { padding-left: 34px; }
/* garante divisoria alinhada exatamente */
body:has(#viewAtendimentos.active) .topbar::after { left: 463px; }
/* ===== FIM ===== */

/* titulo comeca depois da divisoria (463) + meio cm a direita (~19px) */
#topbarChatTitle { margin-left: 37px; padding-left: 19px; }
/* ===== */

/* ===== Divisoria unica leads/chat (sobe ate o topo via conv-list) ===== */
/* remove a linha extra que estava na topbar */
body:has(#viewAtendimentos.active) .topbar::after { display: none !important; content: none !important; }
/* conv-list: remove a border-right e usa um ::after que sobe ate o topo */
.conv-list { border-right: none !important; position: relative; }
.conv-list::after { content: ''; position: absolute; top: -56px; bottom: 0; right: 0; width: 0.8px; background: #333; pointer-events: none; z-index: 5; }
/* ===== FIM ===== */

/* ===== Divisoria unica no main-content (topo ao fundo, nao cortada) ===== */
/* remove o ::after da conv-list que era cortado pela view */
.conv-list::after { display: none !important; content: none !important; }
/* desenha a linha no main-content, so na view Atendimentos */
.main-content { position: relative; }
body:has(#viewAtendimentos.active) .main-content::after { content: ''; position: absolute; top: 0; bottom: 0; left: 463px; width: 0.8px; background: #333; pointer-events: none; z-index: 50; }
/* ===== FIM ===== */

/* Titulo do lead aparece so na aba Atendimentos */
#topbarChatTitle { display: none; }
body:has(#viewAtendimentos.active) #topbarChatTitle { display: flex; }
/* ===== */

/* Botoes do chat (flutuantes) so aparecem na aba Atendimentos */
.chat-header .chat-header-right { display: none !important; }
body:has(#viewAtendimentos.active) .chat-header .chat-header-right { display: flex !important; }
/* ===== */

/* fundo do chat preto igual a textura nova (evita cinza nas bordas) */
body:not(.light) .chat-area { background-color: #161717 !important; }
body:not(.light) .chat-messages { background-color: transparent !important; }
/* ===== */

/* ===== Unificar fundo do CRM no mesmo tom do papel de parede (#161717) ===== */
body:not(.light) .conv-list,
body:not(.light) .topbar,
body:not(.light) .sidebar,
body:not(.light) .atendimentos-container,
body:not(.light) #viewAtendimentos,
body:not(.light) .conv-search-row { background-color: #161717 !important; }
/* ===== FIM ===== */



/* ===== Player de audio WhatsApp Web v2 (foto posicional + speed + wave menor) ===== */
.wa-audio { display:flex; align-items:center; gap:8px; min-width:250px; max-width:320px; padding:2px 0; }
/* avatar container relativo pro speed sobrepor */
.wa-audio .wa-avatar { width:45px; height:45px; border-radius:50%; overflow:visible; position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.wa-audio .wa-avatar > img, .wa-audio .wa-avatar > .avatar-fallback-icon { width:45px; height:45px; border-radius:50%; overflow:hidden; object-fit:cover; }
.wa-audio .wa-avatar .avatar-fallback-icon { display:flex; align-items:center; justify-content:center; }
.wa-audio .wa-mic { position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2; }
.wa-audio.wa-recv .wa-mic { background:#202c33; }
.wa-audio.wa-sent .wa-mic { background:#144D37; }
.wa-audio .wa-mic i { font-size:9px; color:#25d366; }
.wa-audio .wa-speed { display:none; width:34px; height:22px; border-radius:11px; border:none; cursor:pointer; font-size:12px; font-weight:600; align-items:center; justify-content:center; flex:0 0 auto; }
.wa-audio.wa-recv .wa-speed { background:#2a3942; color:#e9edef; }
.wa-audio.wa-sent .wa-speed { background:#0a3d2a; color:#d9fdd3; }
.wa-audio.wa-playing .wa-avatar { display:none; }
.wa-audio.wa-playing .wa-speed { display:flex; }
.wa-audio .wa-play { width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:transparent; color:#aebac1; }
.wa-audio .wa-play:hover { color:#e9edef; }
.wa-audio .wa-play::before { font-family:"Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome; font-weight:900; font-size:18px; content:"\f04b"; margin-left:2px; }
.wa-audio .wa-play.wa-playing2::before { content:"\f04c"; margin-left:0; }
.wa-audio .wa-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.wa-audio .wa-wave { position:relative; height:15px; display:flex; align-items:center; gap:2px; cursor:pointer; }
.wa-audio .wa-wave .wa-bar { flex:1; background:rgba(255,255,255,0.30); border-radius:2px; min-height:2px; }
.wa-audio.wa-sent .wa-wave .wa-bar { background:rgba(255,255,255,0.38); }
.wa-audio .wa-progress { position:absolute; top:0; left:0; height:100%; width:0%; pointer-events:none; }
.wa-audio .wa-dot { position:absolute; top:50%; left:0%; width:12px; height:12px; border-radius:50%; background:#53bdeb; transform:translate(-50%,-50%); pointer-events:none; }
.wa-audio.wa-sent .wa-dot { background:#25d366; }
.wa-audio .wa-time { font-size:11px; color:rgba(233,237,239,0.6); }
/* ===== FIM player audio v2 ===== */

/* Balao de audio: hora/ticks compactos no canto inferior direito (nao estica o card) */
.message-bubble:has(.wa-audio) { position: relative; padding-bottom: 4px !important; }
.message-bubble:has(.wa-audio) > div:last-child { position: absolute !important; right: 10px; bottom: 3px; margin-top: 0 !important; }
/* reduz altura visual do card de audio */
.wa-audio { padding: 0 !important; }
/* ===== */

/* Fix: forcar Font Awesome nos icones do player (a regra .message-bubble * sobrescrevia) */
.wa-audio .wa-mic i.fas, .wa-audio .wa-mic i.fa-microphone { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.wa-audio .wa-play::before { font-family: "Font Awesome 6 Free" !important; }
/* waveform menos densa (barras mais espacadas, como WhatsApp) */
.wa-audio .wa-wave { gap: 3px !important; }
.wa-audio .wa-wave .wa-bar { max-width: 2px; }
/* ===== */

/* 1. play alinhado verticalmente com a waveform (nao com o tempo embaixo) */
.wa-audio .wa-play { align-self: flex-start; margin-top: 3px; }
/* 3. ticks menores (igual WhatsApp) */
.message-bubble:has(.wa-audio) > div:last-child { font-size: 10px !important; }
.message-bubble:has(.wa-audio) > div:last-child span { font-size: 10px !important; letter-spacing: -2px !important; }
/* 2. hora no recebido: deslocada pra esquerda pra nao ficar sobre a foto do lead */
.message-bubble:has(.wa-audio.wa-recv) > div:last-child { right: 62px !important; }
/* ===== */

/* Play: centro alinhado com o centro da waveform (nao com o card todo) */
.wa-audio .wa-play { align-self: flex-start !important; margin-top: -6px !important; }
/* Fonte padrao WhatsApp Web em todo o CRM e mensagens */
body, .message-bubble, .message-bubble *, .conv-item, .chat-customer-name, .wa-audio, input, textarea, button { font-family: "Segoe UI", Helvetica, Arial, sans-serif !important; }
/* excecao: icones font awesome mantem sua fonte */
.fas, .far, .fab, .fa, [class*="fa-"], .wa-play::before, .wa-audio .wa-mic i { font-family: "Font Awesome 6 Free" !important; }
/* ===== */

/* Ticks das mensagens de texto no tamanho padrao WhatsApp (~12px, alinhado com a hora) */
.message-bubble > div:last-child span { font-size: 12px !important; letter-spacing: -2px !important; vertical-align: middle; }
/* ===== */

/* Avatar do audio: tamanho WhatsApp (48px) e centro alinhado com play/waveform */
.wa-audio .wa-avatar { width: 48px !important; height: 48px !important; align-self: flex-start !important; margin-top: -13px !important; }
.wa-audio .wa-avatar > img, .wa-audio .wa-avatar > .avatar-fallback-icon { width: 48px !important; height: 48px !important; }
/* ===== */

/* Alinhamento final: play, waveform e avatar com centros na MESMA linha horizontal */
.wa-audio { align-items: flex-start !important; }
/* referencia = centro da waveform (15px de altura, no topo do body). centro a ~7.5px do topo */
.wa-audio .wa-play { align-self: flex-start !important; margin-top: -9px !important; }
.wa-audio .wa-avatar { align-self: flex-start !important; margin-top: -16px !important; }
.wa-audio .wa-body { margin-top: 0 !important; }
/* ===== */

/* Ajustes finais card audio: fundo maior (foto nao sai), hora esquerda+cima, tempo pra cima */
.message-bubble:has(.wa-audio) { padding-top: 14px !important; padding-bottom: 8px !important; }
.message-bubble:has(.wa-audio) > div:last-child { bottom: 5px !important; }
.message-bubble:has(.wa-audio.wa-recv) > div:last-child { right: 66px !important; }
.message-bubble:has(.wa-audio.wa-sent) > div:last-child { right: 12px !important; }
/* tempo do audio um pouco pra cima (menos gap) */
.wa-audio .wa-body { gap: 3px !important; }
/* ===== */

/* Espacamentos estilo WhatsApp: mais respiro entre play, waveform e foto */
.wa-audio { gap: 14px !important; padding: 3px 2px !important; }
/* fundo do balao de audio maior pra foto nao sair */
.message-bubble:has(.wa-audio) { padding: 24px 12px 2px !important; }
/* hora do audio: um pouco mais pra esquerda e pra cima */
.message-bubble:has(.wa-audio) > div:last-child { bottom: 5px !important; }
.message-bubble:has(.wa-audio.wa-recv) > div:last-child { right: 68px !important; }
.message-bubble:has(.wa-audio.wa-sent) > div:last-child { right: 14px !important; }
/* tempo do audio (0:10) um pouco mais pra cima (menos gap) */
.wa-audio .wa-body { gap: 4px !important; }
/* ===== */

/* Audio enviado tem assinatura no topo: dar respiro pra foto nao sobrepor o nome */
.message-bubble:has(.wa-audio.wa-sent) { padding-top: 8px !important; }
.message-bubble:has(.wa-audio.wa-sent) .wa-audio { margin-top: 8px !important; }
/* ===== */

/* ===== Barra de digitar estilo WhatsApp Web ===== */
/* fundo transparente pra o papel de parede aparecer ate embaixo */
body:not(.light) .chat-input-area { background: transparent !important; padding: 8px 14px !important; gap: 4px !important; }
/* icones menores e mais juntos */
.chat-input-area .chat-input-btn, .chat-input-area .chat-audio-btn { width: 34px !important; height: 34px !important; }
.chat-input-area .chat-input-btn i, .chat-input-area .chat-audio-btn i { font-size: 20px !important; }
/* campo de digitar mais largo (ocupa o resto) e estilo WhatsApp */
.chat-input-area .chat-input { flex: 1 !important; margin: 0 6px !important; background: #2a3942 !important; border-radius: 8px !important; }
/* ===== */

/* ===== Barra de digitar como CAPSULA UNICA (WhatsApp Web) ===== */
/* wrapper externo transparente, com padding pro papel de parede aparecer */
body:not(.light) #chatInputArea { background: transparent !important; padding: 6px 16px 10px !important; gap: 0 !important; align-items: center !important; }
/* a capsula: um fundo unico arredondado que engloba icones + input + microfone */
body:not(.light) #chatInputArea { border-radius: 24px; }
body:not(.light) #chatInputArea::before { content:''; position:absolute; left:12px; right:12px; top:6px; bottom:10px; background:#2a3942; border-radius:24px; z-index:0; }
/* todos os filhos acima do fundo */
#chatInputArea > * { position: relative; z-index: 1; }
/* icones dentro da capsula, menores e juntos */
#chatInputArea .chat-input-btn, #chatInputArea .chat-audio-btn { width: 38px !important; height: 38px !important; background: transparent !important; }
#chatInputArea .chat-input-btn i, #chatInputArea .chat-audio-btn i { font-size: 20px !important; }
/* input transparente (a capsula e o fundo) */
#chatInputArea .chat-input { flex: 1 !important; background: transparent !important; border: none !important; border-radius: 0 !important; margin: 0 6px !important; padding: 10px 4px !important; }
/* microfone a direita dentro da capsula */
#chatInputArea .chat-audio-btn { margin-left: auto; margin-right: 4px; }
/* ===== */

/* Ajustes capsula: cor WhatsApp, mais alta, subir do fim, icones brancos */
body:not(.light) #chatInputArea { padding: 18px 16px 18px !important; }
body:not(.light) #chatInputArea::before { background: #242626 !important; top: 14px !important; bottom: 14px !important; }
#chatInputArea .chat-input { padding: 14px 4px !important; }
#chatInputArea .chat-input-btn i, #chatInputArea .chat-audio-btn i { color: #ffffff !important; }
/* ===== */

/* Marcacao de ativo nos botoes da barra (assinatura, nota interna, etc) */
#chatInputArea .chat-input-btn.active { background: rgba(37,211,102,0.18) !important; border-radius: 50% !important; }
#chatInputArea .chat-input-btn.active i { color: #25d366 !important; }
/* ===== */

/* Emoji picker: painel compacto ancorado acima da barra de digitar */
#chatInputArea { position: relative; }
#chatInputArea #emojiPicker { position: absolute !important; bottom: 64px !important; left: 12px !important; right: auto !important; top: auto !important; width: 350px !important; max-width: calc(100% - 24px) !important; height: 400px !important; background: #233138 !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; z-index: 1000 !important; overflow: hidden !important; display: none; }
#chatInputArea #emojiPicker.show { display: flex !important; flex-direction: column !important; }
/* grid de emojis: rolagem vertical, colunas fixas */
#emojiGrid { display: grid !important; grid-template-columns: repeat(8, 1fr) !important; gap: 4px !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 8px !important; flex: 1 !important; }
#emojiGrid .emoji-item { font-size: 22px !important; cursor: pointer; text-align: center; padding: 4px; border-radius: 6px; }
#emojiGrid .emoji-item:hover { background: rgba(255,255,255,0.08); }
/* ===== */

/* Remove o retangulo branco (outline) ao focar o input de digitar */
#chatInputArea .chat-input:focus, #chatInputArea .chat-input:focus-visible, #chatInputArea .chat-input:active { outline: none !important; box-shadow: none !important; border: none !important; }
/* ===== */

/* Hover verde no microfone (igual WhatsApp) */
#chatInputArea .chat-audio-btn:hover { background: rgba(37,211,102,0.18) !important; border-radius: 50% !important; }
#chatInputArea .chat-audio-btn:hover i { color: #25d366 !important; }
/* ===== */

/* ===== Barra de gravacao de audio (WhatsApp Web) ===== */
#audioRecBar { display: none; position: absolute; left: 12px; right: 12px; top: 6px; bottom: 10px; background: #242626; border-radius: 24px; align-items: center; gap: 12px; padding: 0 16px; z-index: 5; }
#audioRecBar.show { display: flex; }
/* esconde os icones/input normais durante a gravacao */
#chatInputArea.recording-mode > .chat-input-btn,
#chatInputArea.recording-mode > .chat-input,
#chatInputArea.recording-mode > .chat-audio-btn,
#chatInputArea.recording-mode::before { visibility: hidden; }
#audioRecBar button { background: transparent; border: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #aebac1; flex: 0 0 auto; }
#audioRecBar button:hover { color: #e9edef; }
#audioRecBar .rec-del:hover { color: #f15c6d; }
#audioRecBar .rec-send { background: #25d366; color: #0b1014; }
#audioRecBar .rec-send:hover { background: #21c15c; color: #0b1014; }
#audioRecBar .rec-send i { font-size: 17px; }
#audioRecBar .rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #f15c6d; flex: 0 0 auto; animation: recBlink 1.2s infinite; }
@keyframes recBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
#audioRecBar .rec-time { font-size: 14px; color: #e9edef; min-width: 42px; flex: 0 0 auto; }
#audioRecBar .rec-wave { flex: 1; height: 28px; min-width: 0; }
#audioRecBar .rec-pause i { font-size: 18px; color: #f15c6d; }
/* ===== */

/* Barra de gravacao mais compacta (waveform menor, igual WhatsApp) */
#audioRecBar .rec-wave { height: 18px !important; max-height: 18px !important; }
#audioRecBar { gap: 10px !important; padding: 0 14px !important; }
#audioRecBar button { width: 34px !important; height: 34px !important; }
#audioRecBar .rec-time { font-size: 13px !important; }
/* ===== */

/* Barra de gravacao: waveform com largura limitada (nao estica o chat todo) */
#audioRecBar .rec-wave { flex: 0 1 auto !important; width: 180px !important; max-width: 180px !important; }
/* empurra o botao enviar pra direita, o resto fica compacto a esquerda */
#audioRecBar .rec-pause { margin-left: auto !important; }
/* ===== */

/* Barra gravacao: elementos agrupados, waveform absorve o meio (nao deixa vao) */
#audioRecBar .rec-pause { margin-left: 0 !important; }
#audioRecBar .rec-wave { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
#audioRecBar .rec-send { margin-left: 0 !important; }
/* ===== */

/* Barra gravacao WhatsApp real: waveform pequena fixa, grupo alinhado a direita */
#audioRecBar { justify-content: flex-end !important; gap: 14px !important; }
#audioRecBar .rec-wave { flex: 0 0 auto !important; width: 90px !important; max-width: 90px !important; }
#audioRecBar .rec-del { margin-right: auto !important; }
/* ===== */

/* Lixeira agrupada com o resto (nao vai pro canto esquerdo) */
#audioRecBar .rec-del { margin-right: 0 !important; }
/* ===== */

/* Emoji picker: cor preta padrao do CRM (era cinza-azulado do WhatsApp) */
#chatInputArea #emojiPicker { background: #161717 !important; }
#emojiPicker .emoji-picker-header, #emojiPicker .emoji-search, #emojiPicker input { background: #202121 !important; color: #e9edef !important; border: none !important; }
#emojiPicker .emoji-category-btn { color: #8696a0 !important; }
#emojiPicker .emoji-category-btn.active { color: #25d366 !important; }
/* ===== */

/* Emojis estilo Apple (imagens) */
img.apple-emoji { width: 1.3em; height: 1.3em; vertical-align: -0.25em; object-fit: contain; display: inline-block; margin: 0 1px; }
#emojiGrid .emoji-item img.apple-emoji { width: 26px; height: 26px; vertical-align: middle; margin: 0; }
.message-text img.apple-emoji { width: 1.35em; height: 1.35em; }
/* ===== */

/* Menu de anexos (+): ancorado acima do botao, canto esquerdo (igual emoji picker) */
#chatInputArea #attachmentMenu { position: absolute !important; bottom: 64px !important; left: 12px !important; right: auto !important; top: auto !important; width: 220px !important; background: #202121 !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; z-index: 1000 !important; padding: 8px !important; display: none; }
#chatInputArea #attachmentMenu.show { display: block !important; }
#attachmentMenu .attachment-option, #attachmentMenu > * { color: #e9edef !important; }
/* ===== */

/* Modal mensagens rapidas: cor preta padrao do CRM */
#quickMessagesModal .modal-content { background: #161717 !important; color: #e9edef !important; }
#quickMessagesModal .modal-header { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
#quickMessagesModal input, #quickMessagesModal textarea { background: #202121 !important; color: #e9edef !important; border: 1px solid rgba(255,255,255,0.1) !important; }
#quickMessagesList > * { background: #202121 !important; border-radius: 8px !important; }
/* ===== */

/* === PADRAO DE CORES CRM (usar daqui pra frente) ===
   Preto principal #161717 | Preto secundario #202121 | Verde WhatsApp #25D366 | Texto #e9edef */
#quickMessagesModal .modal-content { background: #161717 !important; color: #e9edef !important; }
#quickMessagesModal input, #quickMessagesModal textarea { background: #202121 !important; color: #e9edef !important; border: 1px solid rgba(255,255,255,0.1) !important; }
#quickMessagesModal input::placeholder, #quickMessagesModal textarea::placeholder { color: #8696a0 !important; }
/* botao Adicionar: verde WhatsApp */
#quickMessagesModal button[onclick*="addQuickMessage"], #quickMessagesModal .add-quick-btn { background: #25D366 !important; color: #fff !important; }
/* titulo verde WhatsApp */
#quickMessagesModal .modal-header, #quickMessagesModal h2, #quickMessagesModal h3 { color: #25D366 !important; }
/* itens da lista */
#quickMessagesList > * { background: #202121 !important; border-radius: 8px !important; }
#quickMessagesList strong { color: #25D366 !important; }
/* setas mover (subir/descer): visiveis */
#quickMessagesModal button[onclick*="moveQuickMessage"] { color: #e9edef !important; background: rgba(255,255,255,0.08) !important; border-radius: 4px !important; width: 22px; height: 22px; opacity: 1 !important; }
#quickMessagesModal button[onclick*="moveQuickMessage"]:disabled { color: #566 !important; background: rgba(255,255,255,0.03) !important; opacity: 0.5 !important; }
/* ===== */

/* === Nova Conversa + Segmentador: padrao CRM (#161717 / #202121 / #25D366 / #e9edef) === */
#novaConversaModal .modal-content, #segmentadorModal .modal-content { background: #161717 !important; color: #e9edef !important; }
#novaConversaModal input, #novaConversaModal textarea, #novaConversaModal select,
#segmentadorModal input, #segmentadorModal textarea, #segmentadorModal select { background: #202121 !important; color: #e9edef !important; border: 1px solid rgba(255,255,255,0.1) !important; }
#novaConversaModal input::placeholder, #segmentadorModal input::placeholder { color: #8696a0 !important; }
/* titulos verde WhatsApp */
#novaConversaModal .modal-header, #novaConversaModal h2, #novaConversaModal h3,
#segmentadorModal .modal-header, #segmentadorModal h2, #segmentadorModal h3 { color: #25D366 !important; }
/* botoes primarios (Iniciar / Aplicar) verde WhatsApp */
#novaConversaModal button[onclick*="iniciar"], #novaConversaModal button[onclick*="Iniciar"],
#segmentadorModal button[onclick*="aplicar"], #segmentadorModal button[onclick*="Aplicar"],
#segmentadorModal button[onclick*="segment"] { background: #25D366 !important; color: #fff !important; border: none !important; }
/* multi-select do segmentador */
#segmentadorModal .multi-select-trigger { background: #202121 !important; color: #e9edef !important; border: 1px solid rgba(255,255,255,0.1) !important; }
#segmentadorModal .multi-select-dropdown { background: #161717 !important; border: 1px solid rgba(255,255,255,0.08) !important; }
#segmentadorModal .multi-select-dropdown label, #segmentadorModal .multi-select-dropdown div { color: #e9edef !important; }
/* ===== */

/* Nova Conversa + Segmentador: cobrir header e body (tinham fundo azul proprio) */
#novaConversaModal .modal-header, #novaConversaModal .modal-body,
#segmentadorModal .modal-header, #segmentadorModal .modal-body { background: #161717 !important; }
/* separador sutil entre header e corpo */
#novaConversaModal .modal-header, #segmentadorModal .modal-header { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
/* ===== */

/* Modal Transferir Lead: padrao CRM */
#transferModal .modal-content, #transferModal .modal-header, #transferModal .modal-body { background: #161717 !important; color: #e9edef !important; }
#transferModal .modal-header { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
#transferModal .modal-header, #transferModal h2, #transferModal h3, #transferModal .modal-title { color: #25D366 !important; }
#transferModal input, #transferModal textarea, #transferModal select, #transferModal .form-input { background: #202121 !important; color: #e9edef !important; border: 1px solid rgba(255,255,255,0.1) !important; }
#transferModal input::placeholder, #transferModal textarea::placeholder { color: #8696a0 !important; }
/* botao Transferir: verde WhatsApp */
#transferModal button[onclick*="confirmTransfer"], #transferModal .btn-primary { background: #25D366 !important; color: #fff !important; border: none !important; }
/* lista de vendedores */
#vendedoresList .vendedor-item { background: #202121 !important; border-radius: 8px !important; }
#vendedoresList .vendedor-item:hover { background: #2a2c2c !important; }
#vendedoresList .vendedor-item.selected { background: rgba(37,211,102,0.18) !important; border: 1px solid #25D366 !important; }
#vendedoresList .vendedor-section-title { color: #8696a0 !important; }
#vendedoresList .vendedor-avatar { background: #25D366 !important; color: #fff !important; }
#vendedoresList .vendedor-name { color: #e9edef !important; }
/* ===== */

/* Nota interna: nome de quem criou */
.note-card .note-author { font-weight: 600; color: #25D366; margin: 2px 0 4px; font-size: 13px; }
.note-card .note-title { color: #8696a0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Nota interna: titulo cinza chumbo, assinatura preta */
.note-card .note-title { color: #3a3a3a !important; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.note-card .note-author { color: #000000 !important; font-weight: 700; margin: 2px 0 4px; font-size: 13px; }

/* WhatsApp green - closeModal (Encerrar Conversa) match sibling modals */
#closeModal #closeConfirmBtn, #closeModal .btn-primary { background: #25D366 !important; color: #fff !important; border: none !important; }
#closeModal h3 { color: #25D366 !important; }

/* Modais: fundo preto igual ao chat (#161717) - dark mode */
body:not(.light) #closeModal .modal-content, body:not(.light) #transferModal .modal-content, body:not(.light) #novaConversaModal .modal-content, body:not(.light) #segmentadorModal .modal-content, body:not(.light) #closeModal .modal-header, body:not(.light) #transferModal .modal-header, body:not(.light) #novaConversaModal .modal-header, body:not(.light) #segmentadorModal .modal-header { background: #161717 !important; }

/* Configuracoes: preto neutro do app + verde WhatsApp - dark mode */
body:not(.light) #viewConfiguracoes .config-card { background: #161717 !important; }
body:not(.light) #viewConfiguracoes .config-item, body:not(.light) #viewConfiguracoes .config-form { background: #262827 !important; }
body:not(.light) #viewConfiguracoes .config-tab { background: #262827 !important; }
body:not(.light) #viewConfiguracoes .config-tab.active, body:not(.light) #viewConfiguracoes .config-add-btn, body:not(.light) #viewConfiguracoes .btn-primary { background: #25D366 !important; }

/* ===== Padrao WhatsApp Web (modo claro) — elementos equivalentes ao WhatsApp ===== */
/* Abas de categoria (Box) e botoes de acao mantem as cores originais do CRM. */
/* Aqui ajustamos apenas o que tambem existe no WhatsApp: lista, chat, baloes, busca. */
body.light .conv-list{ background:#ffffff !important; }
body.light .conv-item{ background:#ffffff !important; border-bottom:1px solid #e9edef !important; }
body.light .conv-item:hover{ background:#f5f6f6 !important; }
body.light .conv-item.selected{ background:#f0f2f5 !important; }
body.light .conv-search-row input{ background:#f0f2f5 !important; }
body.light .message-row.sent .message-bubble{ background:#d9fdd3 !important; }
body.light .message-row.received .message-bubble{ color:#111b21 !important; }

/* ===== WhatsApp claro — correcoes de elementos (icones, capsula, modais, audio, pipeline, Gi) ===== */
body.light .new-conv-btn, body.light .new-conv-btn i, body.light .segmentador-btn, body.light .segmentador-btn i{ color:#54656f !important; }
body.light .conv-tab .badge{ color:#ffffff !important; }
body.light .conv-tag{ color:#ffffff !important; }
.conv-tab{ color:#ffffff !important; text-shadow:0 1px 2px rgba(0,0,0,0.35) !important; }
body.light .chat-input-btn, body.light .chat-input-btn i{ color:#54656f !important; }
body.light .chat-input-area input, body.light .chat-input-area textarea, body.light .chat-input-area [contenteditable]{ background:#ffffff !important; border:1px solid #e9edef !important; border-radius:8px !important; color:#111b21 !important; }
body.light .wa-audio .wa-bar{ background:#8ea0aa !important; }
body.light .wa-audio .wa-play{ color:#54656f !important; }
body.light .performance-seller-trigger{ color:#111b21 !important; }
body.light .chatbot-input-area{ background:#f0f2f5 !important; }
body.light .chatbot-input-area input, body.light .chatbot-input-area textarea{ background:#ffffff !important; color:#111b21 !important; }
body.light .modal-content, body.light .modal-body{ background:#ffffff !important; color:#111b21 !important; }
body.light .modal-header{ background:#f0f2f5 !important; color:#111b21 !important; border-bottom:1px solid #e9edef !important; }
body.light .modal-footer{ background:#ffffff !important; border-top:1px solid #e9edef !important; }
body.light #closeModal .modal-content, body.light #closeModal .modal-body, body.light #closeModal .modal-footer, body.light #transferModal .modal-content, body.light #transferModal .modal-body, body.light #transferModal .modal-footer, body.light #novaConversaModal .modal-content, body.light #novaConversaModal .modal-body, body.light #novaConversaModal .modal-footer, body.light #segmentadorModal .modal-content, body.light #segmentadorModal .modal-body, body.light #segmentadorModal .modal-footer, body.light #quickMessagesModal .modal-content, body.light #quickMessagesModal .modal-body, body.light #quickMessagesModal .modal-footer{ background:#ffffff !important; color:#111b21 !important; }
body.light #closeModal .modal-header, body.light #transferModal .modal-header, body.light #novaConversaModal .modal-header, body.light #segmentadorModal .modal-header, body.light #quickMessagesModal .modal-header{ background:#f0f2f5 !important; color:#111b21 !important; border-bottom:1px solid #e9edef !important; }
body.light #closeModal input, body.light #closeModal textarea, body.light #closeModal select, body.light #closeModal .form-input, body.light #transferModal input, body.light #transferModal textarea, body.light #transferModal select, body.light #transferModal .form-input, body.light #novaConversaModal input, body.light #novaConversaModal textarea, body.light #novaConversaModal select, body.light #novaConversaModal .form-input, body.light #segmentadorModal input, body.light #segmentadorModal textarea, body.light #segmentadorModal select, body.light #segmentadorModal .form-input, body.light #quickMessagesModal input, body.light #quickMessagesModal textarea, body.light #quickMessagesModal select, body.light #quickMessagesModal .form-input{ background:#ffffff !important; color:#111b21 !important; border:1px solid #d1d7db !important; }
body.light #closeModal .vendedor-item, body.light #closeModal .checkbox-item, body.light #closeModal .multi-select-trigger, body.light #closeModal .multi-select-dropdown, body.light #transferModal .vendedor-item, body.light #transferModal .checkbox-item, body.light #transferModal .multi-select-trigger, body.light #transferModal .multi-select-dropdown, body.light #novaConversaModal .vendedor-item, body.light #novaConversaModal .checkbox-item, body.light #novaConversaModal .multi-select-trigger, body.light #novaConversaModal .multi-select-dropdown, body.light #segmentadorModal .vendedor-item, body.light #segmentadorModal .checkbox-item, body.light #segmentadorModal .multi-select-trigger, body.light #segmentadorModal .multi-select-dropdown, body.light #quickMessagesModal .vendedor-item, body.light #quickMessagesModal .checkbox-item, body.light #quickMessagesModal .multi-select-trigger, body.light #quickMessagesModal .multi-select-dropdown{ background:#f0f2f5 !important; color:#111b21 !important; border-color:#e9edef !important; }
body.light #closeModal .vendedor-name, body.light #closeModal .vendedor-item, body.light #closeModal .checkbox-item, body.light #closeModal label, body.light #transferModal .vendedor-name, body.light #transferModal .vendedor-item, body.light #transferModal .checkbox-item, body.light #transferModal label, body.light #novaConversaModal .vendedor-name, body.light #novaConversaModal .vendedor-item, body.light #novaConversaModal .checkbox-item, body.light #novaConversaModal label, body.light #segmentadorModal .vendedor-name, body.light #segmentadorModal .vendedor-item, body.light #segmentadorModal .checkbox-item, body.light #segmentadorModal label, body.light #quickMessagesModal .vendedor-name, body.light #quickMessagesModal .vendedor-item, body.light #quickMessagesModal .checkbox-item, body.light #quickMessagesModal label{ color:#111b21 !important; }
body.light .modal-close{ color:#54656f !important; }
body.light .edit-profile-content{ background:#ffffff !important; color:#111b21 !important; }
body.light .edit-profile-title{ color:#111b21 !important; }
body.light .edit-profile-input{ background:#ffffff !important; color:#111b21 !important; border:1px solid #d1d7db !important; }
body.light .edit-profile-btn.secondary{ background:#f0f2f5 !important; color:#111b21 !important; }
body.light #customerInfoSidebar{ background:#ffffff !important; color:#111b21 !important; }
body.light #customerInfoSidebar input, body.light #customerInfoSidebar textarea, body.light #customerInfoSidebar select{ background:#ffffff !important; color:#111b21 !important; border:1px solid #d1d7db !important; }

.conv-tab[data-box="followup"], body.light .conv-tab[data-box="followup"]{ color:#ffffff !important; }
body.light #chatInputArea .chat-input{ background:#ffffff !important; border:1px solid #d1d7db !important; }
body.light #chatInputArea .chat-input-btn i{ color:#54656f !important; }
body.light #closeModal .reason-option{ color:#111b21 !important; }
body.light .pipeline-column-subtitle, body.light .pipeline-empty, body.light .pipeline-view p{ color:#3b4a54 !important; }

body.light #chatInputArea{ background:#ffffff !important; border-radius:24px !important; margin:8px 16px 12px !important; padding:6px 12px !important; border:none !important; box-shadow:none !important; }
body.light #chatInputArea .chat-input{ background:transparent !important; border:none !important; }
body.light #chatInputArea .chat-input-btn i, body.light #chatInputArea #chatAudioBtn i{ color:#54656f !important; }

body.light #chatInputArea{ gap:0 !important; }
#chatAtivoBadge{ color:#ffffff !important; }
body.light #chatAudioBtn:hover i{ color:#00a884 !important; }
body.light #audioRecBar{ background:#ffffff !important; border:1px solid #d1d7db !important; border-radius:24px !important; }
body.light #audioRecBar .rec-del, body.light #audioRecBar .rec-del i{ color:#54656f !important; }
body.light #audioRecBar .rec-time{ color:#3b4a54 !important; }
body.light #headerEtqPill{ background:#f0f2f5 !important; }
body.light #headerEtqPill #headerEtqPillText{ color:#111b21 !important; }
body.light #headerEtqPill .fa-tag, body.light #headerEtqPill .fa-chevron-down{ color:#54656f !important; }

body.light #chatInputArea{ margin:8px 6px 12px !important; padding:14px 10px !important; }
#headerEtqPill[data-empty="1"]{ background:transparent !important; }
#headerEtqPill[data-empty="1"] #headerEtqPillText{ color:#8696a0 !important; font-weight:400 !important; }
body.light #headerEtqPill[data-empty="1"] #headerEtqPillText{ color:#667781 !important; }
body.light #headerEtqPill[data-empty="1"] .fa-tag, body.light #headerEtqPill[data-empty="1"] .fa-chevron-down{ color:#8696a0 !important; }

body.light #headerEtqMenu{ background:#ffffff !important; border:1px solid #d1d7db !important; box-shadow:0 6px 24px rgba(0,0,0,0.15) !important; left:auto !important; right:150px !important; }
body.light #headerEtqMenu span{ color:#111b21 !important; }

#headerEtqMenu{ left:auto !important; right:150px !important; }
body.light #etiquetasList span{ color:#ffffff !important; }

.chat-day-divider {
    clear: both;
    text-align: center;
    margin: 14px 0 10px;
}
.chat-day-divider span {
    display: inline-block;
    background: #1e2a31;
    color: #8696a0;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
body.light .chat-day-divider span {
    background: #ffffff;
    color: #667781;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.agente-canais-list { display:flex; flex-wrap:wrap; gap:8px; }
.agente-canal-item { display:inline-flex; align-items:center; gap:6px; background:rgba(128,128,128,0.12); padding:6px 10px; border-radius:6px; cursor:pointer; font-size:13px; }

/* Agente n8n modal - forca overlay full-screen centralizado (id vence .modal duplicado) */
#agenteModal{position:fixed;inset:0;width:100%;max-width:none;height:100%;background:rgba(0,0,0,0.6);border-radius:0;box-shadow:none;align-items:center;justify-content:center;padding:0;overflow:auto;z-index:1000;}
#agenteModal.active{display:flex;}
#agenteModal .modal-content{width:90%;max-width:520px;margin:auto;}

/* ===================================================================
   Redesign visual - Modal "Nova campanha" (Disparos) - jul/2026
   Bloco aditivo com seletores #enviosConfigScreen para vencer por
   especificidade sem remover as regras antigas (menos risco).
=================================================================== */

#enviosConfigScreen { counter-reset: envios-step; }

#enviosConfigScreen .envios-card {
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
    border-left: 3px solid var(--primary);
    counter-increment: envios-step;
}

#enviosConfigScreen .envios-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-dark);
    font-size: 15px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

#enviosConfigScreen .envios-card-title::before {
    content: counter(envios-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #052441;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}

#enviosConfigScreen .envios-config-header {
    background: linear-gradient(135deg, rgba(76,175,80,0.14), rgba(76,175,80,0.03));
    border: 1px solid rgba(76,175,80,0.35);
}

#enviosConfigScreen .envios-config-shell {
    gap: 22px;
}

#enviosConfigScreen label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

#enviosConfigScreen input,
#enviosConfigScreen select,
#enviosConfigScreen textarea {
    transition: border-color .15s ease, box-shadow .15s ease;
}

#enviosConfigScreen input:focus,
#enviosConfigScreen select:focus,
#enviosConfigScreen textarea:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.18);
}

#enviosConfigScreen .envios-origin-switch label {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-dark);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

#enviosConfigScreen .envios-origin-switch label:has(input:checked) {
    background: rgba(76,175,80,0.14);
    border-color: var(--primary);
    color: var(--text);
}

#enviosConfigScreen .envios-window-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
}

#enviosConfigScreen .envios-window-title::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f017";
    font-size: 13px;
}

#enviosConfigScreen .envios-window-card {
    background: rgba(255,255,255,0.02);
}

#enviosConfigScreen .envios-grid-messages { counter-reset: envios-msg; }

#enviosConfigScreen .envios-message-list { counter-increment: envios-msg; position: relative; }

#enviosConfigScreen .envios-message-list label::before {
    content: counter(envios-msg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: #052441;
    font-size: 10px;
    font-weight: 800;
    margin-right: 6px;
}

#enviosConfigScreen .envios-message-list textarea {
    border-radius: 10px;
}

#enviosConfigScreen .envios-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    padding: 12px 14px;
    border-top: 2px solid var(--primary);
}

#enviosConfigScreen .envios-stat strong {
    font-size: 20px;
}

#enviosConfigScreen .envios-primary-btn {
    box-shadow: 0 3px 10px rgba(76,175,80,0.3);
}

#enviosConfigScreen .envios-primary-btn:hover {
    filter: brightness(1.08);
}

#enviosConfigScreen .envios-secondary-btn:hover {
    filter: brightness(1.15);
}

#enviosConfigScreen .envios-upload-box {
    border-radius: 12px;
    transition: border-color .15s ease, background .15s ease;
}

#enviosConfigScreen .envios-upload-box:hover {
    border-color: var(--primary);
    background: rgba(76,175,80,0.05);
}

#enviosConfigScreen .envios-table th {
    background: rgba(76,175,80,0.08);
    color: var(--primary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
}

/* Filtros multi-selecao (Etiqueta/Vendedor/Cidade) - jul/2026 */
#enviosConfigScreen .envios-multi-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--primary);
    background: rgba(76,175,80,0.14);
    border: 1px solid rgba(76,175,80,0.35);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

#enviosConfigScreen select[multiple] {
    padding: 4px;
    background: rgba(255,255,255,0.02);
}

#enviosConfigScreen select[multiple] option {
    padding: 6px 8px;
    border-radius: 6px;
}

#enviosConfigScreen select[multiple] option:checked {
    background: rgba(76,175,80,0.25);
    color: var(--text);
}

.chatbot-container { position: relative; }
.chatbot-novo-chat-wrap { position: absolute; top: 14px; right: 20px; z-index: 5; }
.chatbot-messages { padding-top: 55px; }

/* corrige overlap do botao flutuante com mensagens do chat; aumenta area visivel do chat (jul/2026) */
.chatbot-novo-chat-wrap { position: static; display: flex; justify-content: flex-end; padding: 10px 14px 6px 14px; background: transparent; }
.chatbot-messages { padding-top: 15px; }
.chatbot-container { height: calc(100vh - 90px); }

/* jul/2026 rodada 3: usuario reforcou que quer o botao flutuando de fato (reclamando de espaco desperdicado / chat comecando baixo demais). Volta a flutuar (pill pequeno, nao a linha inteira), reclama o espaco da linha reservada. Pequeno overlap ocasional com mensagens e um trade-off aceito explicitamente pelo usuario. */
.chatbot-novo-chat-wrap { position: absolute; top: 10px; right: 16px; z-index: 5; }
.chatbot-messages { padding-top: 8px; }

/* jul/2026 rodada 4: usuario pediu para a 1a mensagem subir mais ~1cm. Reduz paddings superiores acumulados (view + container + messages) e reposiciona o pill do botao mais proximo do topo. */
#viewChatbot { padding-top: 4px; }
.chatbot-container { padding-top: 4px; }
.chatbot-messages { padding-top: 0px; }
.chatbot-novo-chat-wrap { top: 4px; }

/* jul/2026 rodada 5: zera de vez a folga restante, chat deve comecar colado na barra de titulos */
#viewChatbot { padding-top: 0px; }
.chatbot-container { padding-top: 0px; }
.chatbot-novo-chat-wrap { top: 2px; }

/* reaction-badge (WhatsApp-style corner badge) */
.reaction-badge {
  position: absolute;
  bottom: -8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161717;
  border: none;
  border-radius: 50%;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  z-index: 3;
  pointer-events: none;
}
.reaction-badge img.apple-emoji { width: 13px; height: 13px; margin: 0; vertical-align: middle; }
.message-row.sent .reaction-badge { right: -6px; }
.message-row.received .reaction-badge { left: -6px; }

/* Reaction quick-trigger icon (hover, WhatsApp Web style) */
.reaction-quick-trigger {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: #8696a0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 4;
  padding: 0;
}
.message-row:hover .reaction-quick-trigger { opacity: 1; visibility: visible; }
.reaction-quick-trigger:hover { background: rgba(255,255,255,0.14); color: #e9edef; }
.message-row.sent .reaction-quick-trigger { right: 100%; margin-right: 8px; }
.message-row.received .reaction-quick-trigger { left: 100%; margin-left: 8px; }

/* Floating quick-react popup (WhatsApp Web style) */
.reaction-quick-popup {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 2px;
  background: #233138;
  border-radius: 26px;
  padding: 6px 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  z-index: 9999;
}
.reaction-quick-emoji {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: transform .12s ease, background .12s ease;
}
.reaction-quick-emoji img.apple-emoji { width: 22px; height: 22px; margin: 0; }
.reaction-quick-emoji:hover { transform: scale(1.25); background: rgba(255,255,255,0.08); }
.reaction-quick-more {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #e9edef;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-left: 4px;
}
.reaction-quick-more:hover { background: rgba(255,255,255,0.16); }

/* FIM DA CONTINUACAO de index.css - a partir daqui, ajuste avulso original deste arquivo (chat-input-capsule.css) */

/* FIX (set/2026 - capsula desproporcional, rodada 1): as duas regras que
   existiam aqui (ago/2026) aumentavam SO o padding-top do #chatInputArea
   (6px -> 22px, dark; 6px -> 22px, light) - um contorno manual para a barra
   de rolagem que aparecia na capsula mesmo vazia. Essa barra tinha outra
   causa raiz (a altura do textarea nao era resincronizada ao abrir uma
   conversa - corrigido em updateChatActionButton, chamado agora em
   selectLead/emoji/mensagem rapida), entao esse padding assimetrico ficou
   sem proposito e so desalinhava os icones verticalmente. Removidas
   inicialmente (deixando padding: 6px 16px 18px dark / 6px 10px light, ja
   definidos acima) - mas isso deixou a capsula MENOR do que o usuario
   queria (o padding-top de 22px, mesmo sendo um workaround acidental,
   tinha deixado a capsula com uma altura proxima do WhatsApp Web real).

   FIX (set/2026, rodada 2): usuario reportou "ficou muito pequena, nao esta
   do msm tamanho do whatsapp web... whatsapp e um pouco mais alta". Ajuste
   final, ver bloco "Ajustes capsula" acima: padding do #chatInputArea
   voltou a ser MAIOR que o padrao 6/18 original, porem agora SIMETRICO
   (18px 16px 18px dark, ao inves do antigo 22px/18px assimetrico) para
   restaurar a altura ~igual a versao anterior sem reintroduzir o
   desalinhamento. O fundo visivel da capsula (::before, dark) foi ajustado
   junto para top:14px/bottom:14px (era top:4px/bottom:18px) - com isso o
   antigo espaco vazio de ~18px so em cima desaparece: agora a distancia do
   conteudo (icones/textarea) ate a borda do fundo visivel e a MESMA em cima
   e embaixo (18-14=4px dos dois lados), garantindo centralizacao vertical
   real dentro da capsula. Modo claro (nao usa ::before, o fundo e o proprio
   elemento): padding simetrico 14px 10px (era 6px 10px), mesma logica de
   restaurar altura mantendo simetria. */