/* ===================================
   WHATSAPP MODULE — CORPORATE BLUE
   Estilos compartilhados para todas as
   páginas do módulo WhatsApp.
   =================================== */

/* ===================================
   STAT CARDS (numeros.xhtml style)
   =================================== */
.wa-stat-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.04),
        0 4px 12px rgba(20, 40, 70, 0.03);
    border: 1px solid rgba(220, 228, 240, 0.5);
    margin-bottom: 0;
}

.wa-stat-card-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.wa-stat-card-info { flex: 1; }

.wa-stat-card-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #5A6B82;
    margin-bottom: 8px;
}

.wa-stat-card-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1F2A44;
    line-height: 1.2;
}

.wa-stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wa-stat-card-icon i { font-size: 20px; }

.wa-stat-card-icon-blue { background-color: #E8F2FC; }
.wa-stat-card-icon-blue i { color: #3D5A80; }
.wa-stat-card-icon-green { background-color: #EDF3E8; }
.wa-stat-card-icon-green i { color: #658950; }
.wa-stat-card-icon-orange { background-color: #FEF4E6; }
.wa-stat-card-icon-orange i { color: #B7791F; }

.wa-stat-card-footer { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wa-stat-label { font-size: 0.85rem; color: #6B7A90; }

/* ===================================
   STAT CARDS (border-left variant)
   dashboard + relatorios
   =================================== */
.wa-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.wa-stat-bordered {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.04),
        0 4px 12px rgba(20, 40, 70, 0.03);
    border: 1px solid rgba(220, 228, 240, 0.5);
    transition: box-shadow 0.2s;
}
.wa-stat-bordered:hover { box-shadow: 0 2px 8px rgba(20, 40, 70, 0.08), 0 8px 24px rgba(20, 40, 70, 0.06); }

.wa-stat-bordered-info      { background: #EFF6FF; border-left: 4px solid #3B82F6; }
.wa-stat-bordered-success   { background: #EDF3E8; border-left: 4px solid #658950; }
.wa-stat-bordered-warning   { background: #FEF4E6; border-left: 4px solid #D69E2E; }
.wa-stat-bordered-secondary { background: #F5F8FC; border-left: 4px solid #6B7A90; }

.wa-stat-bordered .wa-stat-bordered-icon {
    font-size: 2rem;
    opacity: 0.75;
    flex-shrink: 0;
}
.wa-stat-bordered-info      .wa-stat-bordered-icon { color: #3B82F6; }
.wa-stat-bordered-success   .wa-stat-bordered-icon { color: #658950; }
.wa-stat-bordered-warning   .wa-stat-bordered-icon { color: #D69E2E; }
.wa-stat-bordered-secondary .wa-stat-bordered-icon { color: #6B7A90; }

.wa-stat-bordered-body { display: flex; flex-direction: column; }
.wa-stat-bordered-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1F2A44;
}
.wa-stat-bordered-label {
    font-size: 0.85rem;
    color: #5A6B82;
    margin-top: 0.25rem;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .wa-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .wa-stats-grid { grid-template-columns: 1fr; }
}

/* ===================================
   SIDEBAR OVERLAY
   Padrão unificado: overlay + panel
   =================================== */
.wa-sidebar-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(20, 35, 60, 0.4);
    z-index: 1300;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.wa-sidebar-overlay.visivel { opacity: 1; visibility: visible; }

/* Pattern B: wrapper overlay (respostasRapidas/historico) */
.wa-sidebar-overlay.open { opacity: 1; visibility: visible; }

.wa-sidebar-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    max-width: 90vw;
    height: 100vh;
    height: 100dvh;
    background: #FFFFFF;
    box-shadow: -4px 0 24px rgba(20, 40, 70, 0.12);
    z-index: 1301;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    overflow: hidden;
}
.wa-sidebar-panel.aberto { right: 0; }

/* Width variants */
.wa-sidebar-panel-sm  { width: 450px; right: -450px; }
.wa-sidebar-panel-md  { width: 500px; right: -500px; }
.wa-sidebar-panel-lg  { width: 560px; right: -560px; }
.wa-sidebar-panel-xl  { width: 680px; right: -680px; }
.wa-sidebar-panel-sm.aberto,
.wa-sidebar-panel-md.aberto,
.wa-sidebar-panel-lg.aberto,
.wa-sidebar-panel-xl.aberto { right: 0; }

/* Pattern B: sidebar inside the overlay wrapper */
.wa-sidebar-overlay .wa-sidebar-panel {
    position: relative;
    right: 0;
    margin-left: auto;
    z-index: auto;
}
.wa-sidebar-overlay:not(.open) .wa-sidebar-panel {
    transform: translateX(100%);
}
.wa-sidebar-overlay.open .wa-sidebar-panel {
    transform: translateX(0);
}

.wa-sidebar-panel > form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.wa-sidebar-header {
    padding: 20px 24px;
    border-bottom: 1px solid #E3E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F8FAFC;
    flex-shrink: 0;
}

.wa-sidebar-header h3,
.wa-sidebar-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1F2A44;
    display: flex;
    align-items: center;
}

.wa-sidebar-close {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #6B7A90;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.wa-sidebar-close:hover { background: #E8EDF3; color: #1F2A44; }

.wa-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    min-height: 0;
}

.wa-sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid #E3E8F0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #FFFFFF;
    flex-shrink: 0;
}

/* Scrollbar */
.wa-sidebar-content::-webkit-scrollbar { width: 6px; }
.wa-sidebar-content::-webkit-scrollbar-track { background: transparent; }
.wa-sidebar-content::-webkit-scrollbar-thumb { background: #D8E0EC; border-radius: 3px; }
.wa-sidebar-content::-webkit-scrollbar-thumb:hover { background: #B8C5D6; }

/* PrimeFaces button as close btn */
.wa-btn-close-sidebar {
    width: 36px; height: 36px; border-radius: 8px !important;
    background: transparent !important; border: none !important;
    color: #5A6B82 !important; transition: all 0.2s ease;
}
.wa-btn-close-sidebar:hover { background: #F5F8FC !important; color: #1F2A44 !important; }
.wa-btn-close-sidebar .ui-button-text { display: none; }

@media (max-width: 768px) {
    .wa-sidebar-panel,
    .wa-sidebar-panel-sm,
    .wa-sidebar-panel-md,
    .wa-sidebar-panel-lg,
    .wa-sidebar-panel-xl {
        width: 100%;
        max-width: 100%;
        right: -100%;
    }
}

/* ===================================
   FORM SECTIONS
   =================================== */
.wa-form-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E3E8F0;
}
.wa-form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.wa-form-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1F2A44;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
}
.wa-form-section-title i { color: #3D5A80; }

.wa-form-field { margin-bottom: 16px; }

.wa-field-label {
    display: block;
    font-size: 0.813rem;
    font-weight: 500;
    color: #4A5568;
    margin-bottom: 6px;
}
.wa-field-label.required::after {
    content: " *";
    color: #C53030;
}

.wa-field-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F7FAFC;
    border-radius: 6px;
    border: 1px solid #E3E8F0;
}
.wa-field-info-label {
    font-size: 0.813rem;
    font-weight: 600;
    color: #4A5568;
    flex-shrink: 0;
}
.wa-field-info-value {
    font-size: 0.813rem;
    color: #1F2A44;
    font-family: monospace;
    word-break: break-all;
}

/* ===================================
   ALERT / HINT BOXES
   =================================== */
.wa-alert-info {
    padding: 12px 16px;
    background: #E8F2FC;
    border: 1px solid #BEE3F8;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #2C5282;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.wa-alert-warning {
    padding: 12px 16px;
    background: #FEF4E6;
    border: 1px solid #FED7AA;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #9A3412;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* ===================================
   MENSAGENS CONFIG (mensagens.xhtml)
   =================================== */
.wa-msg-field {
    margin-bottom: 0.5rem;
}

.wa-msg-label-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.wa-msg-icon {
    width: 36px;
    height: 36px;
    background: #E8F2FC;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3D5A80;
    font-size: 1rem;
}

.wa-msg-title {
    display: block;
    font-size: 0.975rem;
    font-weight: 600;
    color: #1F2A44;
    margin-bottom: 0.2rem;
}

.wa-msg-desc {
    font-size: 0.8rem;
    color: #6B7A90;
    margin: 0;
    line-height: 1.4;
}

.wa-msg-divider {
    border: none;
    border-top: 1px solid #E3E8F0;
    margin: 1.5rem 0;
}

.wa-msg-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #E3E8F0;
}

/* ===================================
   HORARIOS (horarios.xhtml)
   =================================== */
.wa-horarios-hint {
    background: #E8F2FC;
    border: 1px solid #BEE3F8;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #2C5282;
    margin-bottom: 1.5rem;
}

.wa-horarios-table {
    border: 1px solid #E3E8F0;
    border-radius: 10px;
    overflow: hidden;
}

.wa-horarios-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E3E8F0;
    padding: 0.6rem 1rem;
    gap: 1rem;
}
.wa-horarios-row:last-child { border-bottom: none; }

.wa-horarios-header {
    background: #F5F8FC;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5A6B82;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 1rem;
}

.wa-horarios-col-dia {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
}

.wa-horarios-col-time {
    flex: 1;
    max-width: 140px;
}

.wa-dia-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}
.wa-dia-util     { background: #DBEAFE; color: #1D4ED8; }
.wa-dia-sabado   { background: #FEF3C7; color: #92400E; }
.wa-dia-domingo  { background: #FCE7F3; color: #9D174D; }

.wa-time-input {
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.wa-horarios-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #E3E8F0;
}

.wa-timeout-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E3E8F0;
}

.wa-timeout-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1F2A44;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.wa-timeout-hint {
    background: #FEF4E6;
    border: 1px solid #FED7AA;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.83rem;
    color: #9A3412;
    margin-bottom: 1rem;
}

.wa-timeout-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.wa-timeout-field .wa-time-input { width: 100px; }

@media (max-width: 640px) {
    .wa-horarios-row { flex-wrap: wrap; gap: 0.5rem; }
    .wa-horarios-col-dia { flex: 0 0 100%; }
    .wa-horarios-col-time { flex: 1; max-width: none; }
}

/* ===================================
   NUMERO INFO (numeros.xhtml)
   =================================== */
.wa-numero-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wa-numero-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3D5A80 0%, #2C4A70 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
    flex-shrink: 0;
}

.wa-numero-dados { display: flex; flex-direction: column; }
.wa-numero-principal { font-weight: 600; color: #1F2A44; }
.wa-numero-detalhe { font-size: 0.813rem; color: #6B7A90; }

/* Detalhe card no sidebar */
.wa-numero-detail-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.wa-numero-detail-card.wa-status-ativo {
    background: linear-gradient(135deg, #E8F2FC 0%, #DBEAFE 100%);
    border: 1px solid #93C5FD;
}
.wa-numero-detail-card.wa-status-ativo .wa-numero-detail-icon {
    background: linear-gradient(135deg, #3D5A80 0%, #2C4A70 100%);
}

.wa-numero-detail-card.wa-status-desconectado {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    border: 1px solid #FFD54F;
}
.wa-numero-detail-card.wa-status-desconectado .wa-numero-detail-icon {
    background: linear-gradient(135deg, #FFA726 0%, #F57C00 100%);
}

.wa-numero-detail-card.wa-status-inativo {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    border: 1px solid #EF9A9A;
}
.wa-numero-detail-card.wa-status-inativo .wa-numero-detail-icon {
    background: linear-gradient(135deg, #EF5350 0%, #C62828 100%);
}

.wa-numero-detail-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 24px;
    flex-shrink: 0;
}

.wa-numero-detail-info { display: flex; flex-direction: column; gap: 4px; }
.wa-numero-detail-principal { font-size: 1.1rem; font-weight: 700; color: #1F2A44; }

/* ===================================
   STATUS TAGS
   =================================== */
.wa-status-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}
.wa-status-aguardando     { background: #FEF4E6; color: #B7791F; }
.wa-status-em_atendimento { background: #E8F2FC; color: #2B6CB0; }
.wa-status-encerrado      { background: #F0F4F8; color: #5A6B82; }
.wa-status-ura            { background: #E8F2FC; color: #3D5A80; }

/* ===================================
   STATUS CONEXAO
   =================================== */
.wa-status-conexao {
    padding: 8px 12px;
    background: #F7FAFC;
    border-radius: 6px;
    border: 1px solid #E3E8F0;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wa-text-success { color: #658950; }
.wa-text-danger  { color: #C53030; }

/* ===================================
   USUARIO / AVATAR
   =================================== */
.wa-usuario-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-avatar-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3D5A80 0%, #2C4A70 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wa-usuario-nome { font-size: 0.875rem; font-weight: 600; color: #1F2A44; }
.wa-usuario-email { font-size: 0.75rem; color: #6B7A90; }

/* ===================================
   CONTATOS (contatos.xhtml)
   =================================== */
.wa-contatos-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.wa-contatos-main { flex: 1; min-width: 0; }
.wa-contatos-sidebar { width: 340px; min-width: 340px; }
.wa-painel-fechado { display: none; }
.wa-painel-aberto { display: block; }

.wa-contato-nome-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-contato-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3D5A80 0%, #2C4A70 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}
.wa-contato-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.wa-contato-nome { font-weight: 600; font-size: 14px; color: #1F2A44; }
.wa-contato-sub  { font-size: 12px; color: #6B7A90; }
.wa-contato-tel  { font-size: 13px; color: #3D4E63; }

/* ===================================
   SECTION TITLE (filas/ura sidebar)
   =================================== */
.wa-section { margin-bottom: 1.5rem; }

.wa-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1F2A44;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E3E8F0;
}

/* ===================================
   FILTER ROW (relatorios.xhtml)
   =================================== */
.wa-filter-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.wa-filter-field { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.wa-filter-field-btn { flex: 0 0 auto; min-width: auto; }

/* ===================================
   TABLE UTILITIES
   =================================== */
.wa-table .ui-datatable-tablewrapper { border: none; }

/* ===================================
   BTN DANGER
   =================================== */
.wa-btn-danger,
.ui-button.wa-btn-danger {
    background: #C53030 !important;
    color: #fff !important;
    border: 1px solid #C53030 !important;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.wa-btn-danger:hover,
.ui-button.wa-btn-danger:hover { background: #9B2C2C !important; border-color: #9B2C2C !important; }

.wa-btn-table-action-danger { color: #C53030 !important; }

.wa-btn-icon-sm {
    background: none !important;
    border: none !important;
    color: #6B7A90 !important;
    padding: 2px 6px !important;
    cursor: pointer;
    font-size: 13px;
}
.wa-btn-icon-sm:hover { color: #3D5A80 !important; }

/* ===================================
   CHAT PANEL (painel.xhtml)
   =================================== */
.wp-panel {
    display: flex;
    height: calc(100vh - 120px);
    background: #F5F8FC;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.04),
        0 4px 12px rgba(20, 40, 70, 0.03);
    border: 1px solid rgba(220, 228, 240, 0.5);
}

/* Sidebar esquerda */
.wp-sidebar {
    width: 350px;
    min-width: 350px;
    background: #fff;
    border-right: 1px solid #E3E8F0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Abas da sidebar */
.wp-tab-bar {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
}
.wp-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 6px;
    font-size: 0.813rem;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .2s, border-color .2s;
    text-decoration: none;
}
.wp-tab:hover { color: #3D5A80; text-decoration: none; }
.wp-tab.active { color: #1E293B; border-bottom-color: #3D5A80; }
.wp-tab-badge {
    background: #F0F4F8;
    color: #64748B;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}
.wp-tab.active .wp-tab-badge { background: #3D5A80; color: #fff; }
.wp-tab-content {
    flex: 1;
    overflow-y: auto;
}

/* Busca de contatos na sidebar */
.wp-contato-busca {
    display: flex;
    padding: 8px 10px;
    gap: 6px;
    border-bottom: 1px solid #E3E8F0;
    background: #F8FAFC;
}
.wp-busca-input {
    flex: 1;
    border: 1px solid #D8E0EC;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.813rem;
    outline: none;
    background: #fff;
    transition: border-color 0.2s;
}
.wp-busca-input:focus { border-color: #3D5A80; }
.wp-busca-btn.ui-button {
    background: #3D5A80;
    color: #fff;
    border: 1px solid #3D5A80;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    min-width: auto;
    transition: all 0.2s ease;
}
.wp-busca-btn.ui-button:hover { background: #4A6B94; border-color: #4A6B94; }
.wp-busca-btn.ui-button .ui-icon { color: #fff; }
.btn-iniciar-chat.ui-button {
    background: #FFFFFF;
    border: 1px solid #D8E0EC;
    color: #3D5A80;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    min-width: auto;
    transition: all 0.2s ease;
}
.btn-iniciar-chat.ui-button:hover { background: #F5F8FC; border-color: #C8D4E3; }
.btn-iniciar-chat.ui-button:hover .ui-icon { color: #3D5A80; }
.btn-iniciar-chat.ui-button .ui-icon { color: #3D5A80; }

.wp-sidebar-header {
    flex-shrink: 0;
    background: #fff;
}
.wp-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
}
.wp-status-info {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.wp-status-avatar {
    font-size: 20px;
    color: #8896A8;
    flex-shrink: 0;
}
.wp-status-nome {
    font-size: 0.813rem;
    font-weight: 600;
    color: #1E293B;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-btn-status {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
}
.wp-btn-status-disponivel { background: #3D5A80; color: #fff; }
.wp-btn-status-disponivel .ui-icon { color: #fff !important; }
.wp-btn-status-ausente { background: #FEF4E6; color: #B7791F; }
.wp-btn-status-ausente .ui-icon { color: #B7791F !important; }

.wp-section-header {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #5A6B82;
    background: #F8FAFC;
    border-bottom: 1px solid #E3E8F0;
    gap: 4px;
}
.wp-count-badge {
    margin-left: auto;
    background: #E3E8F0;
    color: #5A6B82;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
}
.wp-count-active { background: #3D5A80; color: #fff; }

.wp-conv-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #EEF2F7;
    transition: background .15s;
}
.wp-conv-item:hover { background: #F5F8FC; }
.wp-conv-item.selected { background: #E8EDF3; }
.wp-conv-item-link { display: block; text-decoration: none !important; color: inherit !important; }
.wp-conv-item-link:hover,
.wp-conv-item-link:focus,
.wp-conv-item-link:active { text-decoration: none !important; color: inherit !important; }
.wp-conv-item-link *,
.wp-conv-item-link *:hover { text-decoration: none !important; }

.wp-conv-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}
.wp-conv-item-nome {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 210px;
}
.wp-conv-item-tempo {
    font-size: 11px;
    color: #6B7A90;
    white-space: nowrap;
}
/* Layout com avatar */
.wp-conv-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wp-conv-item-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #3D5A80;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-conv-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wp-conv-avatar-initial {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.wp-conv-item-info {
    flex: 1;
    min-width: 0;
}
/* Coluna direita: hora + prioridade + badge */
.wp-conv-item-end {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

/* Hora */
.wp-conv-item-hora {
    font-size: 11px;
    color: #8696a0;
    white-space: nowrap;
}

/* Badge de prioridade */
.wp-conv-prioridade {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: .2px;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
/* Cores por valor de prioridade (0=maxima) */
.wp-conv-prioridade-0 { background: #FFEBEE; color: #C62828; }
.wp-conv-prioridade-1 { background: #FFF3E0; color: #E65100; }
.wp-conv-prioridade-2 { background: #EDF2F7; color: #64748B; }
.wp-conv-prioridade-3 { background: #E8F5E9; color: #2E7D32; }

/* Badge headset/nao-lidas dentro da coluna end */
.wp-conv-item-end .conv-badge {
    width: 18px;
    height: 18px;
    font-size: 9px;
}
.wp-conv-item-end .conv-badge i { font-size: 9px; }
.wp-conv-item-end .conv-badge-new {
    min-width: 18px;
    height: 18px;
    font-size: 9px;
    padding: 0 4px;
}

.wp-conv-item-sub,
.wp-conv-item-fila {
    font-size: 12px;
    color: #6B7A90;
}
.wp-conv-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
.wp-btn-assumir {
    font-size: 11px;
    padding: 3px 8px;
    background: #3D5A80;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.wp-conv-badge {
    background: #3D5A80;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}
.wp-conv-badge-new {
    background: #C53030;
    min-width: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-weight: 700;
    animation: wp-pulse-badge .8s ease-in-out infinite alternate;
}
@keyframes wp-pulse-badge {
    from { transform: scale(1); }
    to   { transform: scale(1.15); }
}

.wp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    color: #B8C5D6;
    font-size: 12px;
}
.wp-empty-state i { font-size: 20px; }

/* Area central de mensagens */
.wp-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wp-chat-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wp-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #B8C5D6;
    gap: 12px;
    padding: 40px;
    text-align: center;
}
.wp-chat-empty-icon { font-size: 64px; color: #3D5A80; opacity: .3; }
.wp-chat-empty h3 { font-size: 20px; color: #5A6B82; margin: 0; }
.wp-chat-empty p { font-size: 14px; color: #B8C5D6; margin: 0; max-width: 300px; }

.wp-chat-header {
    background: #F5F8FC;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #E3E8F0;
    flex-shrink: 0;
}
.wp-chat-header-avatar {
    font-size: 40px;
    color: #B8C5D6;
    line-height: 1;
}
.wp-chat-header-nome {
    font-size: 16px;
    font-weight: 600;
    color: #1F2A44;
}
.wp-chat-header-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    font-size: 12px;
}
.wp-status-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.wp-status-em-atendimento { background: #E8F2FC; color: #2B6CB0; }
.wp-fila-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    background: #E3E8F0;
    color: #4A5568;
    padding: 2px 8px;
    border-radius: 10px;
}

.wp-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #F0F4F8;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wp-msg-row { display: flex; }
.wp-msg-row-in { justify-content: flex-start; }
.wp-msg-row-out { justify-content: flex-end; }

.wp-msg-in, .wp-msg-out {
    border-radius: 8px;
    padding: 6px 10px 4px;
    max-width: 65%;
    min-width: 60px;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(20, 40, 70, 0.08);
}
.wp-msg-in {
    background: #fff;
    border-top-left-radius: 0;
}
.wp-msg-out {
    background: #DBEAFE;
    border-top-right-radius: 0;
}
.wp-msg-texto { font-size: 14px; color: #1F2A44; white-space: pre-wrap; }
.wp-msg-midia-label { font-size: 13px; color: #6B7A90; display: flex; align-items: center; }
.wp-msg-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #8696a0;
    margin-top: 2px;
}
.wp-msg-meta-out { justify-content: flex-end; }
.wp-msg-remetente { font-size: 11px; color: #8696a0; }
.wp-entregue { font-size: 12px; color: #8696a0; }
.wp-lido { color: #53bdeb; }
.wp-erro { font-size: 12px; color: #e74c3c; cursor: pointer; }

.wp-msg-sistema {
    text-align: center;
    margin: 8px auto;
    background: rgba(255,255,255,.7);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    color: #5A6B82;
    max-width: 80%;
}
.wp-messages-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: auto;
    color: #B8C5D6;
    font-size: 13px;
}

.wp-upload-area {
    background: #F5F8FC;
    padding: 6px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    border-top: 1px solid #E3E8F0;
}
.wp-upload-area .wp-file-upload { flex-shrink: 0; }
.wp-legenda-input { flex: 1; min-width: 0; }
.wp-btn-upload { background: #5A6B82 !important; color: #fff !important; }
.wp-btn-upload:hover { background: #4A5568 !important; }

.wp-input-area {
    background: #F5F8FC;
    padding: 10px 16px;
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-shrink: 0;
    border-top: 1px solid #E3E8F0;
}
.wp-input-text {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #D8E0EC !important;
    padding: 9px 12px;
    font-size: 14px;
    resize: none;
    background: #fff;
    max-height: 120px;
    overflow-y: auto;
}
.wp-btn-send {
    background: #3D5A80;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.wp-btn-send:hover { background: #2C4A70; }

/* Painel direito de ações */
.wp-actions {
    width: 260px;
    min-width: 260px;
    background: #fff;
    border-left: 1px solid #E3E8F0;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.wp-actions-section { /* container de cada bloco */ }
.wp-actions-title {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #5A6B82;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #E3E8F0;
}

.wp-resposta-item {
    display: block;
    padding: 8px 10px;
    border: 1px solid #E3E8F0;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.wp-resposta-item:hover { background: #F5F8FC; text-decoration: none; }
.wp-resposta-titulo {
    font-size: 13px;
    font-weight: 600;
    color: #1F2A44;
    display: flex;
    align-items: center;
}
.wp-resposta-preview {
    font-size: 12px;
    color: #6B7A90;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-contato-info { display: flex; flex-direction: column; gap: 6px; }
.wp-contato-row { font-size: 13px; color: #3D4E63; display: flex; align-items: center; gap: 4px; }

/* Historico de conversas */
.wp-hist-item {
    display: block;
    padding: 8px 10px;
    border: 1px solid #E3E8F0;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.wp-hist-item:hover { background: #F0F4FA; border-color: #C5D0E0; text-decoration: none; }
.wp-hist-status { margin-bottom: 4px; }
.wp-hist-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: .2px;
}
.wp-hist-badge-encerrado { background: #E8F5E9; color: #2E7D32; }
.wp-hist-badge-em_atendimento { background: #E3F2FD; color: #1565C0; }
.wp-hist-badge-aguardando { background: #FFF3E0; color: #E65100; }
.wp-hist-badge-ura { background: #F3E5F5; color: #7B1FA2; }
.wp-hist-meta {
    font-size: 12px;
    color: #6B7A90;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* Sidebar historico de conversa */
.wp-sidebar-historico {
    width: 440px !important;
    max-width: 92vw;
    height: 100vh !important;
    box-shadow: -4px 0 24px rgba(20,40,70,.12) !important;
    overflow: hidden !important;
}
.wp-sidebar-historico .ui-sidebar-close {
    display: none;
}
.wp-sidebar-historico .ui-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}
.wp-sidebar-historico .ui-sidebar-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.wp-sidebar-hist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #E3E8F0;
    background: #1F2A44;
    flex-shrink: 0;
}
.wp-sidebar-hist-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
}
.wp-sidebar-hist-header .btn-icon-sm {
    color: #fff;
    opacity: .7;
    transition: opacity .15s;
}
.wp-sidebar-hist-header .btn-icon-sm:hover { opacity: 1; }
.wp-sidebar-hist-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #F0F4F8;
}
/* Ajuste de imagens e videos dentro da sidebar historico */
.wp-sidebar-hist-body .wp-msg-image { max-width: 100%; border-radius: 6px; }
.wp-sidebar-hist-body .wp-msg-video { max-width: 100%; border-radius: 6px; }

/* Dialog transferencia */
.wp-dlg-transf-info {
    background: #F8FAFC;
    border: 1px solid #E3E8F0;
    border-radius: 8px;
    padding: 10px 14px;
}
.wp-dlg-transf-row {
    font-size: 13px;
    color: #3D4E63;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

/* p:sidebar filas de atendimento */
.wp-sidebar-filas {
    width: 400px !important;
    max-width: 92vw;
    padding: 0 !important;
}
.wp-sidebar-filas-wide {
    width: 500px !important;
}
.wp-sidebar-filas .ui-sidebar-close { display: none; }
.wp-sidebar-filas .ui-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 !important;
}
.wp-sidebar-filas .ui-sidebar-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.wp-sidebar-filas .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #E3E8F0;
    background: #F8FAFC;
    flex-shrink: 0;
}
.wp-sidebar-filas .sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
}
.wp-sidebar-filas .sidebar-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #E3E8F0;
    background: #F8FAFC;
    flex-shrink: 0;
}
.wp-dlg-transf-row:last-child { margin-bottom: 0; }

/* ===================================
   HISTORICO — Bolhas de mensagem
   =================================== */
.wa-msg-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid;
}
.wa-msg-bubble-in {
    background: #FFFFFF;
    border-color: #E3E8F0;
}
.wa-msg-bubble-out {
    background: #DBEAFE;
    border-color: #93C5FD;
}

/* ===================================
   COMMON INLINE CLASSES
   Usadas pelas páginas WhatsApp sem prefixo.
   Evita renomear HTML em 12 páginas.
   =================================== */

/* Sidebar (filas, ura, numeros — pattern A: visivel/aberto) */
.sidebar-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(20, 35, 60, 0.4);
    z-index: 1300;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.sidebar-overlay.visivel { opacity: 1; visibility: visible; }

/* Pattern B: open class (respostasRapidas, historico) */
.sidebar-overlay.open { opacity: 1; visibility: visible; }

.sidebar-detalhes {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    max-width: 90vw;
    height: 100vh;
    height: 100dvh;
    background: #FFFFFF;
    box-shadow: -4px 0 24px rgba(20, 40, 70, 0.12);
    z-index: 1301;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    overflow: hidden;
}
.sidebar-detalhes.aberto { right: 0; }

/* Width variants */
.sidebar-detalhes-wide { width: 520px; right: -520px; }
.sidebar-detalhes-wide.aberto { right: 0; }
.sidebar-larga { width: 560px; right: -560px; }
.sidebar-larga.aberto { right: 0; }
.sidebar-detalhes-xl { width: 680px; right: -680px; }
.sidebar-detalhes-xl.aberto { right: 0; }

/* Pattern B: sidebar inside overlay wrapper */
.sidebar-overlay .sidebar-detalhes {
    position: relative;
    right: 0;
    margin-left: auto;
    z-index: auto;
    transition: transform 0.3s ease;
}
.sidebar-overlay:not(.open) .sidebar-detalhes {
    transform: translateX(100%);
}
.sidebar-overlay.open .sidebar-detalhes {
    transform: translateX(0);
}

.sidebar-detalhes > form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sidebar-header {
    padding: 20px 24px;
    border-bottom: 1px solid #E3E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F8FAFC;
    flex-shrink: 0;
}

.sidebar-header h3,
.sidebar-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1F2A44;
    display: flex;
    align-items: center;
}

.sidebar-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1F2A44;
    display: flex;
    align-items: center;
}

.sidebar-close {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #6B7A90;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.sidebar-close:hover { background: #E8EDF3; color: #1F2A44; }

.btn-close-sidebar {
    width: 36px; height: 36px; border-radius: 8px !important;
    background: transparent !important; border: none !important;
    color: #5A6B82 !important; transition: all 0.2s ease;
}
.btn-close-sidebar:hover { background: #F5F8FC !important; color: #1F2A44 !important; }
.btn-close-sidebar .ui-button-text { display: none; }

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    min-height: 0;
}

.sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid #E3E8F0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #FFFFFF;
    flex-shrink: 0;
}

.sidebar-content::-webkit-scrollbar { width: 6px; }
.sidebar-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-content::-webkit-scrollbar-thumb { background: #D8E0EC; border-radius: 3px; }
.sidebar-content::-webkit-scrollbar-thumb:hover { background: #B8C5D6; }

@media (max-width: 768px) {
    .sidebar-detalhes,
    .sidebar-detalhes-wide,
    .sidebar-larga,
    .sidebar-detalhes-xl {
        width: 100%;
        max-width: 100%;
        right: -100%;
    }
}

/* Form sections (numeros, filas, ura sidebars) */
.form-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E3E8F0;
}
.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.form-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1F2A44;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
}
.form-section-title i { color: #3D5A80; }

.section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1F2A44;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E3E8F0;
}

.gerenciar-section { margin-bottom: 1.5rem; }
.ura-section { margin-bottom: 1.5rem; }
.sidebar-form .form-field { margin-bottom: 1.25rem; }
.form-field { margin-bottom: 1.1rem; }

/* Field / Field Label */
.field { margin-bottom: 16px; }

.field-label {
    display: block;
    font-size: 0.813rem;
    font-weight: 500;
    color: #4A5568;
    margin-bottom: 6px;
}
.field-label.required::after {
    content: " *";
    color: #C53030;
}

/* Field info (read-only display) */
.field-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F7FAFC;
    border-radius: 6px;
    border: 1px solid #E3E8F0;
}
.field-info-label {
    font-size: 0.813rem;
    font-weight: 600;
    color: #4A5568;
    flex-shrink: 0;
}
.field-info-value {
    font-size: 0.813rem;
    color: #1F2A44;
    font-family: monospace;
    word-break: break-all;
}

/* Alert info box */
.alert-info-box {
    padding: 12px 16px;
    background: #E8F2FC;
    border: 1px solid #BEE3F8;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #2C5282;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Status conexão */
.status-conexao-box {
    padding: 8px 12px;
    background: #F7FAFC;
    border-radius: 6px;
    border: 1px solid #E3E8F0;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.text-success { color: #658950; }

/* Numero info na tabela */
.numero-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.numero-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3D5A80 0%, #2C4A70 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
    flex-shrink: 0;
}
.numero-dados { display: flex; flex-direction: column; }
.numero-principal { font-weight: 600; color: #1F2A44; }
.numero-detalhe { font-size: 0.813rem; color: #6B7A90; }

/* Detalhe card no sidebar */
.numero-detalhe-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.numero-detalhe-card.status-ativo {
    background: linear-gradient(135deg, #E8F2FC 0%, #DBEAFE 100%);
    border: 1px solid #93C5FD;
}
.numero-detalhe-card.status-ativo .numero-detalhe-icon {
    background: linear-gradient(135deg, #3D5A80 0%, #2C4A70 100%);
}
.numero-detalhe-card.status-desconectado {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    border: 1px solid #FFD54F;
}
.numero-detalhe-card.status-desconectado .numero-detalhe-icon {
    background: linear-gradient(135deg, #FFA726 0%, #F57C00 100%);
}
.numero-detalhe-card.status-inativo {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    border: 1px solid #EF9A9A;
}
.numero-detalhe-card.status-inativo .numero-detalhe-icon {
    background: linear-gradient(135deg, #EF5350 0%, #C62828 100%);
}

.numero-detalhe-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 24px;
    flex-shrink: 0;
}
.numero-detalhe-info { display: flex; flex-direction: column; gap: 4px; }
.numero-detalhe-principal { font-size: 1.1rem; font-weight: 700; color: #1F2A44; }

/* Usuario info */
.usuario-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.avatar-circle-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3D5A80 0%, #2C4A70 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.usuario-nome { font-size: 0.875rem; font-weight: 600; color: #1F2A44; }
.usuario-email { font-size: 0.75rem; color: #6B7A90; }
.adicionar-usuario { padding-top: 12px; }

/* Tabela vínculos */
.tabela-vinculos .ui-datatable { font-size: 0.875rem; }

/* Stat cards (numeros.xhtml) */
.stat-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.04),
        0 4px 12px rgba(20, 40, 70, 0.03);
    border: 1px solid rgba(220, 228, 240, 0.5);
    margin-bottom: 0;
}
.stat-card-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}
.stat-card-info { flex: 1; }
.stat-card-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #5A6B82;
    margin-bottom: 8px;
}
.stat-card-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1F2A44;
    line-height: 1.2;
}
.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-card-icon i { font-size: 20px; }
.stat-card-icon-blue { background-color: #E8F2FC; }
.stat-card-icon-blue i { color: #3D5A80; }
.stat-card-icon-green { background-color: #EDF3E8; }
.stat-card-icon-green i { color: #658950; }
.stat-card-icon-orange { background-color: #FEF4E6; }
.stat-card-icon-orange i { color: #B7791F; }
.stat-card-footer { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.stat-label { font-size: 0.85rem; color: #6B7A90; }

/* Stat cards border-left (dashboard, relatorios) */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}
@media (max-width: 1024px) {
    .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .dashboard-stats-grid { grid-template-columns: 1fr; }
}

.stat-card.stat-card-info      { background: #EFF6FF; border-left: 4px solid #3B82F6; }
.stat-card.stat-card-success   { background: #EDF3E8; border-left: 4px solid #658950; }
.stat-card.stat-card-warning   { background: #FEF4E6; border-left: 4px solid #D69E2E; }
.stat-card.stat-card-secondary { background: #F5F8FC; border-left: 4px solid #6B7A90; }

.stat-card.stat-card-info      .stat-card-icon { color: #3B82F6; font-size: 2rem; opacity: 0.75; }
.stat-card.stat-card-success   .stat-card-icon { color: #658950; font-size: 2rem; opacity: 0.75; }
.stat-card.stat-card-warning   .stat-card-icon { color: #D69E2E; font-size: 2rem; opacity: 0.75; }
.stat-card.stat-card-secondary .stat-card-icon { color: #6B7A90; font-size: 2rem; opacity: 0.75; }

.stat-card-body { display: flex; flex-direction: column; }

/* Contatos */
.contatos-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.contatos-main { flex: 1; min-width: 0; }
.contatos-sidebar { width: 340px; min-width: 340px; }
.painel-fechado { display: none; }
.painel-aberto { display: block; }

.contato-nome-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.contato-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3D5A80 0%, #2C4A70 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}
.contato-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 20px;
}
.contato-nome { font-weight: 600; font-size: 14px; color: #1F2A44; }
.contato-sub { font-size: 12px; color: #6B7A90; }
.contato-tel { font-size: 13px; color: #3D4E63; }

.status-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}
.status-aguardando     { background: #FEF4E6; color: #B7791F; }
.status-em_atendimento { background: #E8F2FC; color: #2B6CB0; }
.status-encerrado      { background: #F0F4F8; color: #5A6B82; }
.status-ura            { background: #E8F2FC; color: #3D5A80; }

.btn-table-action-danger { color: #C53030 !important; }
.btn-icon-sm {
    background: none !important;
    border: none !important;
    color: #6B7A90 !important;
    padding: 2px 6px !important;
    cursor: pointer;
    font-size: 13px;
}
.btn-icon-sm:hover { color: #3D5A80 !important; }

/* Mensagens config (mensagens.xhtml) */
.msg-config-field { margin-bottom: 0.5rem; }
.msg-config-label-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.msg-config-icon {
    width: 36px;
    height: 36px;
    background: #E8F2FC;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3D5A80;
    font-size: 1rem;
}
.msg-config-title {
    display: block;
    font-size: 0.975rem;
    font-weight: 600;
    color: #1F2A44;
    margin-bottom: 0.2rem;
}
.msg-config-desc {
    font-size: 0.8rem;
    color: #6B7A90;
    margin: 0;
    line-height: 1.4;
}
.msg-divider {
    border: none;
    border-top: 1px solid #E3E8F0;
    margin: 1.5rem 0;
}
.msg-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #E3E8F0;
}

/* Horarios (horarios.xhtml) */
.horarios-hint {
    background: #E8F2FC;
    border: 1px solid #BEE3F8;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #2C5282;
    margin-bottom: 1.5rem;
}
.horarios-table {
    border: 1px solid #E3E8F0;
    border-radius: 10px;
    overflow: hidden;
}
.horarios-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E3E8F0;
    padding: 0.6rem 1rem;
    gap: 1rem;
}
.horarios-row:last-child { border-bottom: none; }
.horarios-header {
    background: #F5F8FC;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5A6B82;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 1rem;
}
.horarios-col-dia {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
}
.horarios-col-time {
    flex: 1;
    max-width: 140px;
}
.dia-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}
.dia-util     { background: #DBEAFE; color: #1D4ED8; }
.dia-sabado   { background: #FEF3C7; color: #92400E; }
.dia-domingo  { background: #FCE7F3; color: #9D174D; }
.time-input {
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}
.horarios-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #E3E8F0;
}
.ura-timeout-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E3E8F0;
}
.ura-timeout-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1F2A44;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}
.ura-timeout-hint {
    background: #FEF4E6;
    border: 1px solid #FED7AA;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.83rem;
    color: #9A3412;
    margin-bottom: 1rem;
}
.ura-timeout-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ura-timeout-field .time-input { width: 100px; }

@media (max-width: 640px) {
    .horarios-row { flex-wrap: wrap; gap: 0.5rem; }
    .horarios-col-dia { flex: 0 0 100%; }
    .horarios-col-time { flex: 1; max-width: none; }
}

/* Filter row (relatorios) */
.filter-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.filter-field { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.filter-field-btn { flex: 0 0 auto; min-width: auto; }

/* Table utilities */
.relatorio-table .ui-datatable-tablewrapper { border: none; }
.dashboard-table .ui-datatable-tablewrapper { border: none; }

/* Card header with border (whatsappConfig-style header bar inside card) */
.card-header-bar {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #E3E8F0;
    gap: 10px;
}
.card-header-bar .card-header-icon {
    color: #4A6B94;
    font-size: 16px;
}
.card-header-bar .card-header-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1F2A44;
}

/* Chat panel layout class - original name */
.whatsapp-panel {
    position: fixed;
    top: 12px;
    left: 72px;
    right: 12px;
    bottom: 12px;
    display: flex;
    background: #F5F8FC;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.04),
        0 4px 12px rgba(20, 40, 70, 0.03);
    border: 1px solid rgba(220, 228, 240, 0.5);
}

@media (max-width: 768px) {
    .whatsapp-panel {
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
}

/* Chat panel buttons - original names */
.btn-status,
.ui-button.btn-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-status-disponivel,
.ui-button.btn-status-disponivel {
    background: #3D5A80;
    border-color: #3D5A80;
    color: #fff;
}
.btn-status-disponivel .ui-icon { color: #fff !important; }
.btn-status-disponivel:hover { background: #4A6B94; border-color: #4A6B94; }
.btn-status-ausente,
.ui-button.btn-status-ausente {
    background: #FFFFFF;
    border-color: #D8E0EC;
    color: #B7791F;
}
.btn-status-ausente .ui-icon { color: #B7791F !important; }
.btn-status-ausente:hover { background: #FEF4E6; }

.btn-assumir,
.ui-button.btn-assumir {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    background: #FFFFFF;
    color: #3D5A80;
    border: 1px solid #D8E0EC;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-assumir:hover,
.ui-button.btn-assumir:hover {
    background: #F5F8FC;
    border-color: #C8D4E3;
}
.conv-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #EEF2F7;
    transition: background .15s;
}
.conv-item:hover { background: #F5F8FC; }
.conv-item.selected { background: #E8EDF3; }
.conv-item-link { display: block; text-decoration: none; color: inherit; }
.conv-item-link:hover { text-decoration: none; }
.conv-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}
.conv-item-nome {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 210px;
}
.conv-item-tempo {
    font-size: 0.75rem;
    color: #64748B;
    white-space: nowrap;
}
.conv-item-sub, .conv-item-fila {
    font-size: 0.75rem;
    color: #64748B;
}
.conv-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
.conv-badge {
    background: #3D5A80;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}
.conv-badge-new {
    background: #C53030;
    min-width: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-weight: 700;
    animation: wp-pulse-badge .8s ease-in-out infinite alternate;
}

.wp-input-buttons {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    align-self: center;
    justify-content: center;
}

.btn-send {
    background: #3D5A80;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.btn-send:hover { background: #2C4A70; }

.btn-upload { background: #5A6B82 !important; color: #fff !important; }
.btn-upload:hover { background: #4A5568 !important; }

.btn-danger {
    background: #C53030 !important;
    color: #fff !important;
    border: 1px solid #C53030 !important;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.btn-danger:hover { background: #9B2C2C !important; border-color: #9B2C2C !important; }

/* Dialog transferencia */
.dlg-transf-info {
    background: #F8FAFC;
    border: 1px solid #E3E8F0;
    border-radius: 8px;
    padding: 10px 14px;
}
.dlg-transf-row {
    font-size: 13px;
    color: #3D4E63;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.dlg-transf-row:last-child { margin-bottom: 0; }

/* Required asterisk */
.required { color: #C53030; }

/* ===================================
   PAINEL — Lead CRM vinculado
   =================================== */
.wp-lead-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px 12px;
}
.wp-lead-nome {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wp-lead-meta {
    font-size: 0.75rem;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}
.wp-lead-etapa-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wp-lead-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #3D5A80;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid #BFDBFE;
    border-radius: 6px;
    background: #EFF6FF;
    transition: all 0.15s ease;
}
.wp-lead-btn-link:hover {
    background: #DBEAFE;
    color: #1E40AF;
    text-decoration: none;
}
.wp-lead-empty {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #94A3B8;
    padding: 6px 2px;
}
.wp-lead-empty i { font-size: 0.7rem; }

/* ===================================
   BOOTSTRAP-COMPAT UTILITIES
   Classes Bootstrap usadas por páginas WhatsApp
   que não existem no PrimeFlex.
   =================================== */
.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }
.ms-1 { margin-left: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }
.fw-semibold { font-weight: 600; }
.text-muted { color: #6B7A90; }
.text-danger { color: #C53030; }
.text-warning { color: #D69E2E; }
.text-secondary { color: #5A6B82; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.flex-fill { flex: 1 1 auto; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-end { text-align: right; }
.d-inline-block { display: inline-block; }

/* Bootstrap form compat */
.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5A6B82;
    margin-bottom: 0.4rem;
}

/* Bootstrap close button compat */
.btn-close {
    background: transparent;
    border: none;
    font-size: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    color: #6B7A90;
    transition: all 0.15s ease;
}
.btn-close::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
}
.btn-close:hover { background: #E8EDF3; color: #1F2A44; }

/* Bootstrap grid compat (historico filters) */
.row { display: flex; flex-wrap: wrap; margin: -0.5rem; }
.row > [class*="col-"] { padding: 0.5rem; }
.g-3 { gap: 0; }
.g-3 > * { padding: 0.5rem; }
.col-md-2 { flex: 0 0 auto; width: 16.666%; }
.col-md-3 { flex: 0 0 auto; width: 25%; }
.col-md-4 { flex: 0 0 auto; width: 33.333%; }
@media (max-width: 768px) {
    .col-md-2, .col-md-3, .col-md-4 { width: 100%; }
}

/* Mensagens container (historico sidebar) */
.mensagens-container::-webkit-scrollbar { width: 6px; }
.mensagens-container::-webkit-scrollbar-track { background: transparent; }
.mensagens-container::-webkit-scrollbar-thumb { background: #D8E0EC; border-radius: 3px; }

/* Historico message bubbles — corporate blue */
.mensagem-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
}
.mensagem-entrada {
    background: #FFFFFF !important;
    border: 1px solid #E3E8F0 !important;
}
.mensagem-saida {
    background: #DBEAFE !important;
    border: 1px solid #93C5FD !important;
}

/* ===================================
   UTILITY OVERRIDES
   =================================== */
.wa-text-muted { color: #6B7A90; font-size: 0.813rem; display: block; margin-top: 4px; }
.wa-text-danger { color: #C53030; }
.wa-required { color: #C53030; }

/* ===================================
   NUMEROS PAGE — Loading / QR / Pairing
   =================================== */

/* Loading dialog content */
.loading-dialog-content {
    text-align: center;
    padding: 36px 28px;
}
.loading-dialog-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #E8F2FC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.loading-dialog-icon i {
    font-size: 1.5rem;
    color: #3D5A80;
}
.loading-dialog-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1F2A44;
    margin: 0 0 8px 0;
}
.loading-dialog-text {
    font-size: 0.875rem;
    color: #6B7A90;
    margin: 0;
    line-height: 1.5;
}

/* QR Code display box */
.qr-code-box {
    text-align: center;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #E3E8F0;
    border-radius: 12px;
}
.qr-code-img {
    max-width: 220px;
    width: 100%;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

/* Pairing Code display box */
.pairing-code-box {
    text-align: center;
    padding: 24px 20px;
    background: #F8FAFC;
    border: 1px solid #E3E8F0;
    border-radius: 12px;
}
.pairing-code-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: #1F2A44;
    font-family: 'Courier New', monospace;
}

/* ===================================
   PAINEL — Avatar com foto de perfil
   =================================== */
.wp-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* ===================================
   PAINEL — Reações em mensagens
   =================================== */
.wp-msg-reactions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.wp-msg-react-btn {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}
.wp-msg-in:hover .wp-msg-react-btn,
.wp-msg-out:hover .wp-msg-react-btn {
    opacity: 1;
}
.wp-msg-react-btn:hover {
    background: rgba(0,0,0,0.05);
    border-color: #E3E8F0;
}

/* ===================================
   PAINEL — Players de mídia inline
   =================================== */

/* --- Audio player customizado (estilo WhatsApp) --- */
.wp-audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
    max-width: 320px;
    padding: 6px 4px;
}
.wp-audio-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    border: none;
    background: #3D5A80;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 15px;
    transition: background 0.15s;
}
.wp-audio-btn:hover { background: #2E4A6B; }
.wp-audio-btn:active { transform: scale(0.95); }
.wp-audio-btn .fa-spinner { animation: fa-spin 1s infinite linear; }
.wp-audio-progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.wp-audio-bar {
    height: 6px;
    background: #D8E0EC;
    border-radius: 3px;
    overflow: visible;
    cursor: pointer;
    position: relative;
}
.wp-audio-bar-fill {
    height: 100%;
    background: #3D5A80;
    border-radius: 3px;
    width: 0%;
    transition: width 0.15s linear;
    position: relative;
}
.wp-audio-bar-thumb {
    width: 12px;
    height: 12px;
    background: #3D5A80;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.15s;
}
.wp-audio-player:hover .wp-audio-bar-thumb,
.wp-audio-player.playing .wp-audio-bar-thumb { opacity: 1; }
.wp-audio-time {
    font-size: 11px;
    color: #6B7A90;
    font-variant-numeric: tabular-nums;
}
.wp-audio-mic {
    color: #93A3B8;
    font-size: 16px;
    flex-shrink: 0;
}

/* --- Transcrição de áudio --- */
.wp-audio-transcricao {
    margin-top: 4px;
    padding: 0 4px;
}
.wp-transcricao-texto {
    display: block;
    font-size: 13px;
    color: #4A5568;
    line-height: 1.4;
    padding: 6px 8px;
    background: rgba(0,0,0,0.03);
    border-radius: 6px;
    border-left: 3px solid #3D5A80;
    font-style: italic;
}
.wp-btn-transcrever {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    color: #3D5A80;
    background: transparent;
    border: 1px solid #D8E0EC;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.wp-btn-transcrever:hover {
    background: #EDF2F7;
    border-color: #3D5A80;
}
.wp-btn-transcrever:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* --- Imagem, vídeo, legenda, mídia genérica --- */
.wp-msg-image {
    display: block;
    max-width: 280px;
    max-height: 300px;
    border-radius: 6px;
    cursor: pointer;
    object-fit: contain;
}
.wp-msg-image:hover { opacity: 0.92; }
.wp-msg-video {
    display: block;
    max-width: 300px;
    max-height: 240px;
    border-radius: 6px;
}
.wp-msg-legenda {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}
.wp-msg-midia-label {
    font-size: 13px;
    color: #3D5A80;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.wp-msg-midia-label:hover { text-decoration: underline; }

/* ===================================
   DIALOG — Clean style (reutilizavel)
   =================================== */
.dlg-clean .ui-dialog-content {
    padding: 0 !important;
    border-radius: 10px;
}
.dlg-clean-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E2E8F0;
}
.dlg-clean-header-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dlg-clean-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.3;
}
.dlg-clean-subtitle {
    font-size: 0.78rem;
    color: #64748B;
}
.dlg-clean-close {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #94A3B8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.dlg-clean-close:hover {
    background: #F1F5F9;
    color: #475569;
}
.dlg-clean-body {
    padding: 20px;
}
.dlg-clean-field {
    margin-bottom: 16px;
}
.dlg-clean-field:last-child {
    margin-bottom: 0;
}
.dlg-clean-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 6px;
}
.dlg-clean-optional {
    font-weight: 400;
    font-size: 0.72rem;
    color: #94A3B8;
    margin-left: 4px;
}
.dlg-clean-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #E2E8F0;
}
.dlg-clean-btn-cancel {
    background: transparent !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px !important;
    color: #64748B !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    transition: all 0.15s ease;
}
.dlg-clean-btn-cancel:hover {
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}
.dlg-clean-btn-primary {
    background: #3D5A80 !important;
    border: 1px solid #3D5A80 !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    padding: 7px 18px !important;
    transition: all 0.15s ease;
}
.dlg-clean-btn-primary:hover {
    background: #2C4A6E !important;
    border-color: #2C4A6E !important;
}

/* ===================================
   QUICK REPLY AUTOCOMPLETE (/)
   =================================== */
.wp-qr-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 60px;
    margin-bottom: 4px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    z-index: 100;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wp-qr-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
}
.wp-qr-header i {
    font-size: 0.7rem;
    color: #94A3B8;
}
.wp-qr-hint {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.7rem;
    color: #94A3B8;
}
.wp-qr-list {
    overflow-y: auto;
    flex: 1;
}
.wp-qr-list::-webkit-scrollbar { width: 4px; }
.wp-qr-list::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 2px; }
.wp-qr-item {
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid #F8FAFC;
    transition: background 0.1s ease;
}
.wp-qr-item:last-child { border-bottom: none; }
.wp-qr-item:hover,
.wp-qr-item.wp-qr-active {
    background: #F1F5F9;
}
.wp-qr-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.wp-qr-item-titulo {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1E293B;
}
.wp-qr-badge {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 10px;
}
.wp-qr-badge-fila {
    background: #DBEAFE;
    color: #2563EB;
}
.wp-qr-badge-pessoal {
    background: #ECFDF5;
    color: #059669;
}
.wp-qr-item-preview {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wp-qr-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 0.78rem;
    color: #94A3B8;
}
.wp-qr-empty i {
    margin-right: 4px;
}

/* ===================================
   TABLE ACTION — linked state
   =================================== */
.btn-table-action-linked {
    color: #3D5A80 !important;
    background: #E8F2FC !important;
}
.btn-table-action-linked:hover {
    background: #D0E4F5 !important;
    color: #2C4A6E !important;
}

/* ===================================
   BUTTON — danger outline
   =================================== */
.btn-danger-outline {
    background: transparent !important;
    border: 1px solid #FC8181 !important;
    border-radius: 6px !important;
    color: #C53030 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    padding: 7px 14px !important;
    transition: all 0.15s ease;
}
.btn-danger-outline:hover {
    background: #FFF5F5 !important;
    border-color: #C53030 !important;
}

/* ===================================
   DIALOG FOOTER — right group
   =================================== */
.dlg-clean-footer {
    align-items: center;
}
.dlg-clean-footer-right {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ===================================
   DIALOG — Vincular Lead
   =================================== */
.vincular-dlg-icon {
    width: 36px;
    height: 36px;
    background: #E8F2FC;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3D5A80;
    font-size: 0.95rem;
}

.vincular-current {
    background: #F0F7FF;
    border: 1px solid #C8DCEF;
    border-radius: 8px;
    padding: 12px 14px;
}
.vincular-current-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #3D5A80;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.vincular-current-nome {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1F2A44;
}
.vincular-current-empresa {
    font-size: 0.78rem;
    color: #5A6B82;
    display: block;
    margin-top: 1px;
}

.vincular-results-wrap {
    min-height: 40px;
}
.vincular-results {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}
.vincular-results::-webkit-scrollbar { width: 4px; }
.vincular-results::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 2px; }

.vincular-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.1s ease;
    gap: 12px;
}
.vincular-result-item:last-child { border-bottom: none; }
.vincular-result-item:hover { background: #F8FAFC; }
.vincular-result-selected { background: #EBF4FF !important; }

.vincular-result-info { flex: 1; min-width: 0; }
.vincular-result-nome {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1F2A44;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vincular-result-empresa {
    font-size: 0.75rem;
    color: #5A6B82;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vincular-empty {
    padding: 16px 14px;
    font-size: 0.8rem;
    color: #94A3B8;
    text-align: center;
    border: 1px dashed #E2E8F0;
    border-radius: 8px;
}

.vincular-selecao {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #065F46;
}