/* ==========================================
   TEMA NEON WHATSAPP (escuro / neon / vidro)
   Mesma linha do tema FotoSync, com as cores do WhatsApp.
   ========================================== */

:root,
[data-bs-theme="dark"] {
    --wa-verde: #25d366;        /* verde WhatsApp */
    --wa-verde-2: #00a884;      /* verde-água do WhatsApp atual */
    --wa-teal: #128c7e;
    --wa-escuro: #075e54;
    --wa-neon: #39ff88;         /* brilho */
    --wa-fundo: #07100d;
    --wa-vidro: rgba(17, 27, 33, 0.55);
    --wa-borda: rgba(255, 255, 255, 0.09);
    --wa-texto: #e9edef;
    --wa-texto-2: #8696a0;
    --wa-brilho: 0 0 18px rgba(37, 211, 102, 0.35);
    --wa-gradiente: linear-gradient(135deg, #25d366, #00a884);

    --bs-body-bg: var(--wa-fundo);
    --bs-body-color: var(--wa-texto);
    --bs-secondary-color: var(--wa-texto-2);
    --bs-border-color: var(--wa-borda);
    --bs-link-color: var(--wa-verde);
    --bs-link-color-rgb: 37, 211, 102;
    --bs-link-hover-color: var(--wa-neon);
    --bs-link-hover-color-rgb: 57, 255, 136;
    --bs-success: #25d366;
    --bs-success-rgb: 37, 211, 102;
    --bs-primary: #00a884;
    --bs-primary-rgb: 0, 168, 132;
    --bs-focus-ring-color: rgba(37, 211, 102, 0.3);
    --bs-card-bg: var(--wa-vidro);
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    background-color: var(--wa-fundo);
    background-image:
        radial-gradient(circle at 12% 18%, rgba(37, 211, 102, 0.10), transparent 32%),
        radial-gradient(circle at 88% 35%, rgba(0, 168, 132, 0.10), transparent 30%),
        radial-gradient(circle at 50% 110%, rgba(18, 140, 126, 0.12), transparent 40%);
    background-attachment: fixed;
}

/* Topo em vidro */
.navbar-neon {
    background: rgba(11, 20, 26, 0.72) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--wa-borda);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.navbar-neon .navbar-brand {
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 12px rgba(37, 211, 102, 0.55);
}
.navbar-neon .nav-link { white-space: nowrap; color: var(--wa-texto-2); border-radius: 20px; padding-inline: .8rem !important; transition: all .25s; }
.navbar-neon .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.navbar-neon .nav-link.active {
    color: var(--wa-verde) !important;
    background: rgba(37, 211, 102, 0.12);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.45), var(--wa-brilho);
    text-shadow: 0 0 8px rgba(37, 211, 102, 0.7);
}
.logo-bolha {
    display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--wa-gradiente); box-shadow: var(--wa-brilho); margin-right: .45rem; font-size: 1rem;
}

.seletor-empresa { min-width: 150px; max-width: 190px; }
.navbar-neon .navbar-brand { flex-shrink: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cartões de vidro */
.card {
    background: var(--wa-vidro);
    border: 1px solid var(--wa-borda);
    border-radius: 14px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.card-header { background: rgba(255, 255, 255, 0.03); border-bottom-color: var(--wa-borda); }
.card-neon { border-color: rgba(37, 211, 102, 0.45); box-shadow: var(--wa-brilho), 0 15px 35px rgba(0, 0, 0, 0.45) !important; }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--wa-borda); }
.list-group-item-action:hover { background: rgba(37, 211, 102, 0.07); }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--wa-borda); --bs-table-hover-bg: rgba(37, 211, 102, 0.06); }

/* Botões */
.btn { border-radius: 10px; font-weight: 600; transition: all .25s ease; }
.btn-success, .btn-neon {
    background: var(--wa-gradiente);
    border: none;
    color: #04130c;
    box-shadow: 0 0 14px rgba(37, 211, 102, 0.3);
}
.btn-success:hover, .btn-success:focus, .btn-neon:hover, .btn-neon:focus {
    color: #04130c;
    background: var(--wa-gradiente);
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: 0 0 22px rgba(37, 211, 102, 0.65), 0 0 40px rgba(0, 168, 132, 0.4);
}
.btn-outline-success { color: var(--wa-verde); border-color: rgba(37, 211, 102, 0.5); background: rgba(37, 211, 102, 0.06); }
.btn-outline-success:hover { color: #04130c; background: var(--wa-verde); border-color: var(--wa-verde); box-shadow: var(--wa-brilho); }
.btn-danger { background: rgba(255, 92, 92, 0.12); border: 1px solid rgba(255, 92, 92, 0.55); color: #ff7b7b; }
.btn-danger:hover { background: rgba(255, 92, 92, 0.25); border-color: #ff6b6b; color: #fff; box-shadow: 0 0 15px rgba(255, 92, 92, 0.5); }
.btn-warning { background: rgba(255, 196, 0, 0.14); border: 1px solid rgba(255, 196, 0, 0.6); color: #ffd24d; }
.btn-warning:hover { background: rgba(255, 196, 0, 0.28); color: #fff; box-shadow: 0 0 15px rgba(255, 196, 0, 0.45); }

/* Formulários */
.form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--wa-borda);
    border-radius: 10px;
    color: #fff;
}
.form-control:focus, .form-select:focus {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(37, 211, 102, 0.55);
    box-shadow: 0 0 0 .2rem rgba(37, 211, 102, 0.15), 0 0 15px rgba(37, 211, 102, 0.15);
    color: #fff;
}
.form-control::placeholder { color: var(--wa-texto-2); }
.form-check-input:checked { background-color: var(--wa-verde); border-color: var(--wa-verde); box-shadow: var(--wa-brilho); }
.form-text { color: var(--wa-texto-2); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Alertas e selos */
.alert { border-radius: 12px; backdrop-filter: blur(10px); }
.alert-success { background: rgba(37, 211, 102, 0.12); border-color: rgba(37, 211, 102, 0.4); color: #b8f5cf; }
.badge.text-bg-success { background: var(--wa-gradiente) !important; color: #04130c !important; box-shadow: var(--wa-brilho); }
.badge-neon {
    background: rgba(37, 211, 102, 0.15); color: var(--wa-verde); border: 1px solid rgba(37, 211, 102, 0.5);
    text-shadow: 0 0 8px rgba(37, 211, 102, 0.8);
}
.badge-bloqueado { background: rgba(255, 92, 92, 0.15); color: #ff7b7b; border: 1px solid rgba(255, 92, 92, 0.5); }
.bolinha { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--wa-verde); box-shadow: 0 0 10px var(--wa-verde); }
.pulsar { animation: pulsar 1.8s ease-in-out infinite; }
@keyframes pulsar { 50% { box-shadow: 0 0 22px rgba(37, 211, 102, 0.9); } }

/* Números em destaque */
.numero-neon { color: #fff; text-shadow: 0 0 14px rgba(37, 211, 102, 0.6); }

/* Prévia de mensagem e conversa no estilo WhatsApp (modo escuro) */
.whats-previa {
    white-space: pre-wrap;
    background: #005c4b;
    color: var(--wa-texto);
    border-radius: 10px 10px 2px 10px;
    padding: .75rem 1rem;
    font-size: .95rem;
    box-shadow: 0 0 16px rgba(0, 168, 132, 0.25);
}
.conversa-fundo {
    background-color: #0b141a;
    background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 18px 18px;
    border-radius: 12px;
}
.bolha { max-width: 75%; border-radius: 10px; padding: .5rem .75rem; margin-bottom: .5rem; color: var(--wa-texto); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.bolha-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha-cliente { background: #202c33; border-top-left-radius: 2px; }
.bolha-bot { background: #005c4b; margin-left: auto; border-top-right-radius: 2px; }
.bolha-atendente { background: #103b52; margin-left: auto; border-top-right-radius: 2px; border: 1px solid rgba(83, 189, 235, 0.35); }
.bolha .small { color: rgba(233, 237, 239, 0.6) !important; }
.bolha-pendente { opacity: .7; }
.bolha-comando { background: #2b2440; margin-left: auto; border-top-right-radius: 2px; border: 1px dashed rgba(180, 150, 255, 0.45); font-family: var(--bs-font-monospace); }
.bolha-limpa { opacity: .55; }
.bolha-erro { border-color: rgba(220, 53, 69, 0.7); }
.conversa-rolagem { height: calc(100vh - 330px); min-height: 320px; overflow-y: auto; }
.resposta textarea { resize: none; background: #2a3942; border-color: transparent; color: var(--wa-texto); }
.btn-enviar { border-radius: 50%; width: 42px; height: 42px; padding: 0; flex-shrink: 0; }

/* Não lidas: o mesmo verde do WhatsApp */
.badge-nao-lida { background: #25d366; color: #0b141a; font-weight: 700; }
.linha-nao-lida td { font-weight: 600; }
.texto-nao-lida { color: #25d366 !important; }

/* QR Code: fundo branco de propósito, o celular precisa de contraste para ler */
.qr-moldura { background: #fff; border-radius: 14px; box-shadow: 0 0 25px rgba(37, 211, 102, 0.55); }

/* Telas de entrada e cadastro */
.tela-entrada { min-height: calc(100vh - 140px); display: flex; align-items: center; }
.titulo-neon { font-weight: 800; letter-spacing: .5px; color: #fff; text-shadow: 0 0 18px rgba(37, 211, 102, 0.6); }

/* Barra de rolagem discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(37, 211, 102, 0.25); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }