/* ═══════════════════════════════════════════════
   TOBER WA CHAT — Frontend Widget Styles
   Tampilan tombol WA + popup di website pengunjung
   ═══════════════════════════════════════════════ */

/* ── WRAPPER (container utama, posisinya diatur inline oleh PHP) ── */
/* CRITICAL: pointer-events:none di wrapper supaya area transparan di sekeliling
   bubble TIDAK nge-block klik ke elemen di belakang (popup notifikasi tema,
   chat widget lain, Elementor lightbox, dll). Interactive children (bubble +
   popup saat visible) override jadi pointer-events:auto. */
#twac-wrapper {
    position: fixed;  /* Tetap di sudut layar saat user scroll */
    z-index: 99999;   /* Pastikan di atas semua elemen lain */
    pointer-events: none;
    /* Width auto = sesuaikan ke bubble (56px) saja. Popup di-positioned
       absolute jadi gak ngambil space di wrapper bounding box. */
    width: 56px;
    height: 56px;
}

/* Bubble tetap clickable */
.twac-bubble { pointer-events: auto; }

/* ── TOMBOL BUBBLE ── */
.twac-bubble {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(37, 211, 102, 0.4);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
    position: relative;
    /* Pulse animation agar menarik perhatian */
    animation: twac-pulse 2.5s infinite;
}

.twac-bubble:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
    animation: none; /* Hentikan pulse saat hover */
}

.twac-bubble:active {
    transform: scale(0.95);
}

/* Pulse animation: efek lingkaran memudar keluar */
@keyframes twac-pulse {
    0%   { box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 0 rgba(37, 211, 102, 0.4); }
    70%  { box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ── IKON DI BUBBLE (WA & close bergantian) ── */
.twac-bubble-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Default: tampilkan ikon WA, sembunyikan ikon X */
.twac-icon-wa   { opacity: 1; transform: rotate(0deg) scale(1); }
.twac-icon-close{ opacity: 0; transform: rotate(-90deg) scale(0.5); }

/* Saat popup terbuka (kelas .is-open ditambahkan via JS) */
.twac-bubble.is-open .twac-icon-wa    { opacity: 0; transform: rotate(90deg) scale(0.5); }
.twac-bubble.is-open .twac-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* ── POPUP ── */
/* CRITICAL: position:absolute supaya popup TIDAK take space di wrapper layout.
   Tanpa ini, wrapper jadi tinggi ~470px (bubble+popup) walau popup invisible →
   nge-block klik di area itu ke elemen lain di belakang. */
.twac-popup {
    position: absolute;
    bottom: calc(100% + 12px); /* default: muncul di atas bubble + gap */
    right: 0;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    width: 300px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0,0,0,0.08);

    /* Animasi muncul/hilang */
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none; /* Tidak bisa diklik saat tersembunyi */
    transition: opacity 0.25s ease,
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom right;
}

/* Saat popup aktif */
.twac-popup.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Posisi kiri (left:) — popup geser ke kanan */
#twac-wrapper[style*="left:"] .twac-popup {
    right: auto;
    left: 0;
    transform-origin: bottom left;
}

/* Posisi atas (top:) — popup muncul di BAWAH bubble */
#twac-wrapper[style*="top:"] .twac-popup {
    bottom: auto;
    top: calc(100% + 12px);
    transform-origin: top right;
}
#twac-wrapper[style*="top:"][style*="left:"] .twac-popup {
    transform-origin: top left;
}

/* ── HEADER POPUP ── */
.twac-popup-header {
    background: #075E54; /* Warna hijau tua WhatsApp */
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.twac-popup-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.twac-popup-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.twac-popup-titles h3 {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 2px;
    line-height: 1.2;
}

.twac-popup-titles p {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

/* Tombol tutup (×) */
.twac-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.twac-close-btn:hover {
    background: rgba(255,255,255,0.25);
}

/* ── DAFTAR ADMIN ── */
.twac-admin-list {
    max-height: 280px; /* Scroll kalau admin banyak */
    overflow-y: auto;
    /* Custom scrollbar supaya cantik */
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}

.twac-admin-list::-webkit-scrollbar { width: 4px; }
.twac-admin-list::-webkit-scrollbar-track { background: transparent; }
.twac-admin-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

/* Item satu admin */
.twac-admin-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

.twac-admin-item:hover {
    background: #f0fdf4; /* Hijau sangat terang */
}

.twac-admin-item:hover .twac-arrow {
    color: #25D366;
    transform: translateX(3px);
}

/* ── AVATAR INISIAL ── */
.twac-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Warna avatar — 5 pilihan berputar */
.twac-avatar-green  { background: #dcfce7; color: #166534; }
.twac-avatar-blue   { background: #dbeafe; color: #1e40af; }
.twac-avatar-amber  { background: #fef3c7; color: #92400e; }
.twac-avatar-coral  { background: #fee2e2; color: #991b1b; }
.twac-avatar-purple { background: #ede9fe; color: #5b21b6; }

/* Info admin (nama & jabatan) */
.twac-admin-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.twac-admin-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.twac-admin-label {
    font-size: 11px;
    color: #6b7280;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Panah navigasi → */
.twac-arrow {
    color: #d1d5db;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
    display: flex;
    align-items: center;
}

/* Garis pemisah antar admin */
.twac-item-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 0 16px;
}

/* ── FOOTER POPUP ── */
.twac-popup-footer {
    padding: 8px 16px;
    background: #fafafa;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.twac-popup-footer span {
    font-size: 10px;
    color: #9ca3af;
}

/* ── RESPONSIF UNTUK LAYAR KECIL ── */
@media (max-width: 400px) {
    .twac-popup {
        width: calc(100vw - 40px); /* Sesuaikan dengan lebar layar HP */
        max-width: 320px;
    }
    /* TIDAK paksa posisi ke bottom-right di mobile — respect setting user.
       Sebelumnya `bottom:16px !important; right:16px !important;` malah bikin
       posisi pilihan user (mis. top-left) ke-override → confusing UX. */
}

/* ── AKSESIBILITAS: fokus keyboard ── */
.twac-bubble:focus-visible {
    outline: 3px solid #25D366;
    outline-offset: 3px;
}

.twac-admin-item:focus-visible {
    outline: 2px solid #25D366;
    outline-offset: -2px;
}

.twac-close-btn:focus-visible {
    outline: 2px solid rgba(255,255,255,0.8);
    outline-offset: 2px;
}