/* ========================================================= NORCOMDESK v3.0 ========================================================= */ /* NOVO ATENDIMENTO */ .nd3-new-card{ width:min(620px,94vw) !important; max-width:620px !important; } .nd3-modal-sub{ display:block; margin-top:2px; font-size:9px; color:#718096; font-weight:500; } .nd3-section{ margin-bottom:12px; } .nd3-section label{ display:block; margin-bottom:5px; font-size:9px; font-weight:750; color:#455468; } .nd3-section select{ width:100%; } .nd3-contact-fields{ margin-bottom:10px; padding:11px; border:1px solid #d8e0e8; border-radius:10px; background:#f8fafc; } #nd3NewError{ margin-bottom:10px; padding:9px 11px; border-radius:8px; background:#fff1f1; border:1px solid #efbbbb; color:#b4232f; font-size:10px; font-weight:650; } #nd3NewError.hidden{ display:none !important; } .nd3-help{ display:block; margin-top:5px; color:#718096; font-size:8px; } /* AVATAR NA FILA */ #deskConversationList .desk-conversation{ position:relative; } #deskConversationList .desk-conversation.nd3-has-photo{ padding-left:50px !important; } .nd3-row-avatar{ position:absolute; left:9px; top:50%; width:34px; height:34px; transform:translateY(-50%); border-radius:50%; overflow:hidden; background:#e6eef8; box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(15,23,42,.12); z-index:3; } .nd3-row-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } /* FILA RECOLHIDA */ #deskShell.desk-queue-collapsed .desk-conversation.nd3-has-photo{ padding:0 !important; } #deskShell.desk-queue-collapsed .nd3-row-avatar{ left:50%; top:50%; width:38px; height:38px; transform: translate(-50%,-50%); } /* CABEÇALHO CHAT */ .nd3-header-avatar{ flex:0 0 38px; width:38px; height:38px; margin-right:9px; overflow:hidden; border-radius:50%; background:#e6eef8; box-shadow: 0 0 0 2px #fff, 0 1px 6px rgba(15,23,42,.16); } .nd3-header-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } /* FOTO GRANDE PAINEL DIREITO */ .nd3-client-photo{ width:70px; height:70px; margin: 12px auto 9px; overflow:hidden; border-radius:50%; background:#e6eef8; box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(15,23,42,.16); } .nd3-client-photo img{ width:100%; height:100%; object-fit:cover; display:block; } /* painel recolhido */ #deskShell.desk-info-collapsed .nd3-client-photo{ display:none !important; } /* mobile */ @media(max-width:760px){ .nd3-new-card{ width:96vw !important; } } /* ========================================================= NORCOMDESK v3.0.1 CORREÇÃO DOS AVATARES WHATSAPP ========================================================= */ /* --------------------------------------------------------- FILA ABERTA Reserva espaço real para a foto --------------------------------------------------------- */ #page-conversations #deskConversationList .desk-conversation.nd3-has-photo{ position:relative !important; padding-left:56px !important; padding-right:9px !important; box-sizing:border-box !important; } #page-conversations #deskConversationList .desk-conversation.nd3-has-photo .nd3-row-avatar{ display:block !important; position:absolute !important; left:10px !important; top:50% !important; width:36px !important; height:36px !important; transform: translateY(-50%) !important; margin:0 !important; border-radius:50% !important; overflow:hidden !important; z-index:20 !important; } #page-conversations #deskConversationList .desk-conversation.nd3-has-photo .nd3-row-avatar img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important; } /* garante que nome/mensagem não voltem para baixo da foto */ #page-conversations #deskConversationList .desk-conversation.nd3-has-photo .desk-conversation-top, #page-conversations #deskConversationList .desk-conversation.nd3-has-photo .desk-preview, #page-conversations #deskConversationList .desk-conversation.nd3-has-photo .desk-meta{ width:100% !important; min-width:0 !important; margin-left:0 !important; box-sizing:border-box !important; } /* --------------------------------------------------------- FILA RECOLHIDA Foto substitui completamente o avatar antigo --------------------------------------------------------- */ #page-conversations #deskShell.desk-queue-collapsed .desk-conversation.nd3-has-photo{ padding:0 !important; position:relative !important; overflow:visible !important; } /* * O layout antigo desenha a inicial usando pseudo-elemento. * Quando existe foto do WhatsApp, desligamos esse avatar. */ #page-conversations #deskShell.desk-queue-collapsed .desk-conversation.nd3-has-photo::before, #page-conversations #deskShell.desk-queue-collapsed .desk-conversation.nd3-has-photo::after{ content:none !important; } /* foto centralizada */ #page-conversations #deskShell.desk-queue-collapsed .desk-conversation.nd3-has-photo .nd3-row-avatar{ display:block !important; position:absolute !important; left:50% !important; top:50% !important; width:38px !important; height:38px !important; transform: translate(-50%,-50%) !important; margin:0 !important; z-index:50 !important; border-radius:50% !important; overflow:hidden !important; } /* não esconde nossa foto junto com os textos */ #page-conversations #deskShell.desk-queue-collapsed .nd3-row-avatar{ visibility:visible !important; opacity:1 !important; } /* --------------------------------------------------------- NÃO LIDAS + FOTO --------------------------------------------------------- */ #page-conversations #deskShell.desk-queue-collapsed .desk-conversation.nd3-has-photo[data-unread]:not([data-unread=""]){ box-shadow: inset 4px 0 0 #1677ff !important; } /* * O ::after era usado pelo contador na versão anterior. * Como precisamos liberar o pseudo-elemento para evitar * conflito com avatar, usamos o badge real quando existir. */ #page-conversations #deskShell.desk-queue-collapsed .desk-conversation.nd3-has-photo .desk-unread{ display:flex !important; position:absolute !important; top:5px !important; right:4px !important; z-index:100 !important; } /* --------------------------------------------------------- CABEÇALHO DO CHAT --------------------------------------------------------- */ #page-conversations .nd3-header-avatar{ width:38px !important; height:38px !important; min-width:38px !important; flex:0 0 38px !important; } /* --------------------------------------------------------- PAINEL DO CLIENTE --------------------------------------------------------- */ #page-conversations .nd3-client-photo{ width:72px !important; height:72px !important; } /* ========================================================= FIM v3.0.1 ========================================================= */