/* ==== WOW Layer: Cmd+K, Notifications, Chat, What's New ==== */

/* Theme data attr (light mode support) */
html[data-theme-active="light"] {
    --bg-body:#f5f5f5; --bg-deep:#ffffff; --bg-card:#ffffff;
    --bg-card-hover:#fafafa; --bg-input:#f5f5f5;
    --border:#e0e0e0; --border-subtle:#eeeeee; --border-input:#dcdcdc;
    --text-primary:#1a1a1a; --text-secondary:#555; --text-muted:#999;
    --shadow:0 4px 16px rgba(0,0,0,.08);
}

/* ==== CMD+K MODAL ==== */
#cmdk-modal { position:fixed; inset:0; z-index:9990; display:none; }
#cmdk-modal.active { display:block; }
.cmdk-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.cmdk-panel { position:absolute; top:15%; left:50%; transform:translateX(-50%);
    width:92%; max-width:640px; background:var(--bg-card); border:1px solid var(--border);
    border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.cmdk-input-wrap { display:flex; align-items:center; gap:12px; padding:16px 20px;
    border-bottom:1px solid var(--border-subtle); }
.cmdk-input-wrap i { color:var(--text-muted); }
.cmdk-input-wrap input { flex:1; background:none; border:none; outline:none;
    color:var(--text-primary); font-size:1rem; }
.cmdk-input-wrap kbd { background:var(--bg-deep); color:var(--text-muted);
    padding:3px 8px; border-radius:4px; font-size:.72rem; font-family:monospace; }
#cmdk-results { max-height:400px; overflow-y:auto; }
.cmdk-item { display:flex; align-items:center; gap:12px; padding:12px 20px;
    color:var(--text-primary); text-decoration:none; border-bottom:1px solid var(--border-subtle);
    transition:background .15s; }
.cmdk-item:hover, .cmdk-item.active { background:var(--accent-glow); }
.cmdk-item i { color:var(--accent); width:20px; text-align:center; }
.cmdk-item-content { flex:1; }
.cmdk-item-title { font-weight:600; }
.cmdk-item-sub { font-size:.8rem; color:var(--text-muted); margin-top:2px; }
.cmdk-item-type { background:var(--bg-deep); color:var(--text-muted);
    padding:2px 8px; border-radius:4px; font-size:.7rem; letter-spacing:1px; text-transform:uppercase; }
.cmdk-empty { padding:30px; text-align:center; color:var(--text-muted); }
.cmdk-foot { padding:10px 20px; border-top:1px solid var(--border-subtle);
    font-size:.72rem; color:var(--text-muted); display:flex; gap:12px; justify-content:center; }
.cmdk-foot kbd { background:var(--bg-deep); padding:2px 6px; border-radius:3px; }

/* ==== LANG TOGGLE ==== (default fixed top-right; di-override jadi static kalau di-inline ke header) */
#lang-toggle-btn { position:fixed; top:14px; right:130px; bottom:auto; left:auto; z-index:9974;
    width:40px; height:40px; border-radius:50%;
    background:var(--bg-card); border:1px solid var(--border-subtle);
    color:var(--text-primary); cursor:pointer; box-shadow:var(--shadow);
    font-size:.74rem; font-weight:700; letter-spacing:1px; transition:transform .15s;
    display:inline-flex; align-items:center; justify-content:center; }
#lang-toggle-btn:hover { transform:scale(1.05); }
body[data-tg="1"] #lang-toggle-btn { display:none !important; }

/* THEME TOGGLE */
#theme-toggle-btn { position:fixed; top:14px; right:78px; bottom:auto; left:auto; z-index:9975;
    width:40px; height:40px; border-radius:50%;
    background:var(--bg-card); border:1px solid var(--border-subtle);
    color:var(--text-primary); cursor:pointer; box-shadow:var(--shadow);
    font-size:.95rem; transition:transform .15s;
    display:inline-flex; align-items:center; justify-content:center; }
#theme-toggle-btn:hover { transform:scale(1.05); }
body[data-tg="1"] #theme-toggle-btn { display:none !important; }

@media (max-width: 640px) {
    body:not(.app-body) #lang-toggle-btn,
    body:not(.app-body) #theme-toggle-btn {
        display:none !important;
    }
}

/* ==== NOTIFICATIONS BELL ==== */
#notif-bell { position:fixed; top:12px; right:20px; z-index:9980; }

/* ==== INLINE OVERRIDE — kalau buttons ada di dalam .header-global-actions, jadi inline ==== */
.header-global-actions #lang-toggle-btn,
.header-global-actions #theme-toggle-btn,
.header-global-actions #notif-bell {
    position: static !important;
    top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    z-index:auto !important;
    box-shadow:none !important;
}
.header-global-actions #lang-toggle-btn,
.header-global-actions #theme-toggle-btn {
    width: 38px !important; height: 38px !important;
}
.header-global-actions #notif-btn {
    width: 38px !important; height: 38px !important;
    box-shadow: none !important;
}
.header-global-actions #notif-dropdown {
    /* dropdown anchor ke #notif-bell (yang sekarang relative) */
    position: absolute !important;
    top: 46px !important; right: 0 !important; left: auto !important;
    z-index: 9999 !important;
    /* Solid background — biar stat card di belakang ga nembus */
    background: var(--bg-card, #15252b) !important;
    background-color: #15252b !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}
@media (max-width: 640px) {
    .header-global-actions #notif-dropdown {
        width: calc(100vw - 28px) !important;
        right: -10px !important;
    }
}
#notif-btn { position:relative; width:42px; height:42px; border-radius:50%;
    background:var(--bg-card); border:1px solid var(--border-subtle);
    color:var(--text-primary); cursor:pointer; box-shadow:var(--shadow); }
#notif-btn:hover { background:var(--bg-card-hover); }
#notif-badge { position:absolute; top:-4px; right:-4px; background:var(--danger);
    color:white; font-size:.65rem; padding:2px 6px; border-radius:999px; font-weight:700;
    min-width:18px; }
#notif-badge.hidden { display:none; }
#notif-dropdown { position:absolute; top:50px; right:0; width:360px; max-height:500px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow); overflow:hidden; display:none; }
#notif-dropdown.active { display:block; }
.notif-head { display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:1px solid var(--border-subtle); }
#notif-list { max-height:400px; overflow-y:auto; }
.notif-item { display:flex; gap:10px; padding:12px 18px; color:var(--text-primary);
    text-decoration:none; border-bottom:1px solid var(--border-subtle); transition:background .15s; }
.notif-item:hover { background:var(--bg-card-hover); }
.notif-item.read { opacity:.6; }
.notif-item i { color:var(--accent); margin-top:3px; }
.notif-title { font-weight:600; font-size:.88rem; }
.notif-desc { color:var(--text-muted); font-size:.78rem; margin-top:2px; }
.notif-ago { color:var(--text-muted); font-size:.7rem; margin-top:4px; letter-spacing:1px; }
.notif-empty { text-align:center; padding:40px 20px; color:var(--text-muted); }

/* ==== WHAT'S NEW MODAL ==== */
#whats-new-modal { position:fixed; inset:0; z-index:9985; display:none;
    align-items:center; justify-content:center; padding:20px; }
#whats-new-modal.active { display:flex; }
.wn-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.wn-panel { position:relative; z-index:1; background:var(--bg-card); border:1px solid var(--gold);
    border-radius:16px; padding:28px 30px; max-width:520px; width:100%;
    box-shadow:0 0 40px var(--gold-glow); animation:wn-in .3s ease-out; }
@keyframes wn-in { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
.wn-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.wn-badge { background:linear-gradient(135deg,var(--gold),var(--accent)); color:#04231d;
    font-size:.7rem; padding:4px 12px; border-radius:999px; font-weight:800; letter-spacing:2px; }
.wn-close { background:none; border:none; color:var(--text-muted); font-size:1.2rem; cursor:pointer; }
.wn-panel h2 { margin:0 0 16px; font-size:1.3rem; }
.wn-panel ul { margin:0 0 20px; padding-left:22px; line-height:2; color:var(--text-secondary); }
.wn-panel ul a { color:var(--accent); }
.wn-panel kbd { background:var(--bg-deep); padding:2px 6px; border-radius:3px;
    font-family:monospace; font-size:.82em; color:var(--accent); }
.wn-actions { display:flex; gap:10px; justify-content:flex-end; }

/* ==== AI CHAT WIDGET — Premium FAB ==== */
#ncp-chat { position:fixed; bottom:24px; right:24px; z-index:9970; }

/* Hide class — apply ke wrapper saat narrow viewport atau user dismissed.
   Specificity tinggi + !important biar override inline display style. */
#ncp-chat.nc-narrow-hide,
#chat-fab.nc-narrow-hide,
#chat-panel.nc-narrow-hide,
#ncp-summon-dot.nc-narrow-hide { display:none !important; }

/* X button kecil di pojok kanan-atas FAB — appear on hover, klik = dismiss widget
   (fade out + show summon dot). Auto-hide juga fire kalau viewport <= 1024px lewat
   matchMedia listener di wow-layer.js. */
#chat-fab .fab-close {
    position:absolute; top:-6px; right:-6px;
    width:22px; height:22px;
    background:rgba(15,23,42,0.92);
    color:#fff;
    border:1.5px solid rgba(255,255,255,0.20);
    border-radius:50%;
    cursor:pointer;
    font-size:13px; line-height:1; font-weight:600;
    display:none; align-items:center; justify-content:center;
    z-index:3;
    transition:transform .15s, background .15s;
    box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
#chat-fab:hover .fab-close { display:flex; }
#chat-fab .fab-close:hover {
    transform:scale(1.12);
    background:rgba(220,38,38,0.96);
}

/* Summon dot — muncul setelah user dismiss widget, klik = restore bubble.
   Posisi sama dgn FAB (bottom-right 24px), 12×12 mini, opacity 0.45 idle,
   1.0 + scale on hover. Pattern dari Hellox widget. */
#ncp-summon-dot {
    position:fixed; bottom:24px; right:24px;
    width:12px; height:12px;
    border-radius:50%; border:none; cursor:pointer; padding:0;
    background:#1fb8a0;
    opacity:0.45;
    transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease;
    z-index:9970;
    display:none;
    box-shadow:0 0 0 0 rgba(31,184,160,0.5);
}
#ncp-summon-dot:hover {
    opacity:1;
    transform:scale(1.6);
    box-shadow:0 0 0 6px rgba(31,184,160,0.18);
}
@media (max-width: 480px) {
    #ncp-summon-dot { bottom:14px; right:14px; }
}

/* Wrapper biar bisa tampung tooltip + status dot di luar tombol */
#chat-fab {
    position:relative;
    width:68px; height:68px; border-radius:50%;
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,0.18), transparent 55%),
        linear-gradient(135deg, #1fb8a0 0%, #0a4d40 100%);
    border:0; cursor:pointer; padding:0;
    box-shadow:
        0 0 0 1px rgba(95,227,194,0.18),
        0 14px 36px rgba(31,184,160,0.42),
        0 4px 14px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.18);
    transition:transform .28s cubic-bezier(.2,.9,.3,1.4), box-shadow .28s;
    display:flex; align-items:center; justify-content:center;
    animation:fab-idle 4s ease-in-out infinite;
}

/* Layer 1: rotating conic ring (di balik tombol) */
#chat-fab::before {
    content:""; position:absolute; inset:-5px; border-radius:50%;
    background:conic-gradient(from 0deg,
        rgba(31,184,160,0) 0%,
        rgba(31,184,160,0.55) 25%,
        rgba(6,182,212,0.7) 50%,
        rgba(31,184,160,0.55) 75%,
        rgba(31,184,160,0) 100%);
    z-index:-1;
    animation:fab-spin 6s linear infinite;
    opacity:.55;
    filter:blur(2px);
}

/* Layer 2: breathing aura halo */
#chat-fab::after {
    content:""; position:absolute; inset:-14px; border-radius:50%;
    background:radial-gradient(circle, rgba(31,184,160,0.45) 0%, transparent 65%);
    z-index:-2;
    animation:fab-breath 2.8s ease-in-out infinite;
}

#chat-fab:hover {
    transform:scale(1.08) translateY(-3px);
    box-shadow:
        0 0 0 2px rgba(95,227,194,0.35),
        0 18px 48px rgba(31,184,160,0.65),
        0 6px 18px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.25);
    animation-play-state:paused;
}
#chat-fab img {
    width:42px; height:42px; border-radius:50%;
    pointer-events:none;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

/* Online status dot — green pulsing di pojok kanan-bawah */
#chat-fab .fab-status-dot {
    position:absolute; bottom:4px; right:4px;
    width:14px; height:14px; border-radius:50%;
    background:#22c55e;
    border:2.5px solid #04181a;
    box-shadow:0 0 0 0 rgba(34,197,94,0.6);
    animation:fab-dot-pulse 2s ease-in-out infinite;
}

/* Idle floating */
@keyframes fab-idle {
    0%, 100% { transform:translateY(0); }
    50%      { transform:translateY(-4px); }
}

/* Breathing aura */
@keyframes fab-breath {
    0%, 100% { opacity:.4; transform:scale(0.95); }
    50%      { opacity:.85; transform:scale(1.12); }
}

/* Conic ring spin */
@keyframes fab-spin {
    to { transform:rotate(360deg); }
}

/* Status dot pulse */
@keyframes fab-dot-pulse {
    0%   { box-shadow:0 0 0 0 rgba(34,197,94,0.7); }
    70%  { box-shadow:0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* Pulse ring saat ada admin reply baru / handover pending (existing behavior) */
#chat-fab.pulse {
    animation:fab-pulse-attention 1.5s ease-in-out infinite;
}
@keyframes fab-pulse-attention {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(245,215,122,0.7),
            0 14px 36px rgba(31,184,160,0.42);
    }
    70% {
        box-shadow:
            0 0 0 14px rgba(245,215,122,0),
            0 14px 36px rgba(31,184,160,0.42);
    }
}

/* Tooltip "Butuh bantuan?" — muncul saat hover (auto-hide setelah 1× hover di session) */
#chat-fab .fab-tip {
    position:absolute; right:calc(100% + 14px); top:50%;
    transform:translateY(-50%) translateX(8px);
    background:linear-gradient(135deg, rgba(15,23,42,0.96), rgba(31,184,160,0.18));
    color:#fff; font-size:.82rem; font-weight:600;
    padding:10px 14px; border-radius:12px; white-space:nowrap;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    border:1px solid rgba(95,227,194,0.25);
    opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s;
}
#chat-fab .fab-tip::after {
    content:""; position:absolute; left:100%; top:50%;
    transform:translateY(-50%);
    border:6px solid transparent;
    border-left-color:rgba(15,23,42,0.96);
}
#chat-fab:hover .fab-tip,
#chat-fab.show-tip .fab-tip {
    opacity:1; transform:translateY(-50%) translateX(0);
}
@media (max-width: 640px) {
    #chat-fab .fab-tip { display:none; }
}

#chat-panel {
    position:absolute; bottom:80px; right:0; width:380px; height:540px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.2);
    display:none; flex-direction:column; overflow:hidden;
    animation:panel-slide-up .25s ease-out;
}
@keyframes panel-slide-up {
    from { opacity:0; transform:translateY(12px); }
    to { opacity:1; transform:translateY(0); }
}
#chat-panel.active { display:flex; }

.chat-head {
    display:flex; align-items:center; gap:10px;
    padding:14px 18px;
    background:linear-gradient(135deg, rgba(31,184,160,0.18), rgba(245,215,122,0.08));
    border-bottom:1px solid var(--border-subtle);
}
.chat-head img { width:38px; height:38px; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,0.3); }
.chat-head strong { font-size:.95rem; }
.chat-sub { color:var(--text-muted); font-size:.78rem; margin-top:2px; }
#chat-close {
    background:rgba(255,255,255,0.05); border:0; color:var(--text-muted);
    width:30px; height:30px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s;
}
#chat-close:hover { background:rgba(239,68,68,0.15); color:#ef4444; }

#chat-msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; }
.chat-msg {
    padding:9px 13px; border-radius:14px; max-width:85%; font-size:.86rem;
    line-height:1.5; word-wrap:break-word;
    display:inline-flex; align-items:flex-start; gap:8px;
    animation:msg-pop .2s ease-out;
}
@keyframes msg-pop { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.chat-msg.user {
    background:linear-gradient(135deg, var(--accent), #1fb8a0); color:#04231d; font-weight:500;
    align-self:flex-end; border-bottom-right-radius:4px;
}
.chat-msg.assistant {
    background:var(--bg-deep); color:var(--text-primary);
    align-self:flex-start; border-bottom-left-radius:4px;
    border-left:2px solid var(--accent);
}
.chat-msg.admin, .chat-msg.admin-pending {
    background:linear-gradient(135deg, rgba(245,215,122,0.18), rgba(245,215,122,0.08));
    color:var(--text-primary); align-self:flex-start;
    border-bottom-left-radius:4px; border-left:2px solid var(--gold, #f5d77a);
}
.chat-msg.admin-pending { font-style:italic; opacity:0.85; }
.chat-msg.typing { opacity:.6; font-style:italic; }

/* CTA button inline di balasan AI (mis. "Buka Toko") */
.chat-cta {
    display:inline-flex; align-items:center; gap:6px;
    margin-top:10px; padding:7px 14px; border-radius:10px;
    background:linear-gradient(135deg, var(--accent), #1fb8a0);
    color:#04231d !important; font-weight:600; font-size:.82rem;
    text-decoration:none; box-shadow:0 2px 8px rgba(95,227,194,0.25);
    transition:transform .15s ease, box-shadow .15s ease;
}
.chat-cta:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(95,227,194,0.4); }
.chat-cta i { font-size:.9rem; }

/* status badge di header chat (login state) */
.chat-status {
    display:inline-flex; align-items:center; gap:4px;
    font-size:.7rem; font-weight:600; letter-spacing:.02em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%;
}
.chat-status-on  { color:var(--accent, #1fb8a0); }
.chat-status-off { color:var(--text-muted, #94a3b8); }

.chat-input-wrap { display:flex; gap:8px; padding:12px; border-top:1px solid var(--border-subtle); background:var(--bg-deep); align-items:flex-end; }
#chat-input {
    flex:1; padding:10px 14px;
    background:var(--bg-card); color:var(--text-primary);
    border:1px solid var(--border-input); border-radius:18px;
    outline:none; font-size:.88rem;
    transition:border-color .15s;
    font-family:inherit; line-height:1.4;
    min-height:40px;
}
#chat-input:focus { border-color:var(--accent); }
#chat-send {
    width:40px; height:40px; border-radius:50%;
    background:linear-gradient(135deg, var(--accent), #1fb8a0);
    color:#04231d; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s;
}
#chat-send:hover { transform:scale(1.08); }
#chat-send:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ==== Mobile responsive ==== */
@media (max-width: 640px) {
    .cmdk-panel { top:4%; width:96%; }
    #notif-dropdown { width:calc(100vw - 40px); right:-10px; }
    #notif-bell { top:10px; right:14px; bottom:auto; }
    #chat-panel { width:calc(100vw - 40px); height:60vh; right:-10px; }
    #chat-fab { bottom:14px; right:14px; }
    #ncp-chat { bottom:14px; right:14px; }
    .wn-panel { padding:22px; }
}

/* Hide WOW elements di TG Mini App (clean UI) */
body[data-tg="1"] #notif-bell,
body[data-tg="1"] #ncp-chat,
body[data-tg="1"] #whats-new-modal { display:none !important; }