/* =====================================================================
   AK AI Chat Widget — Arah Kiblat Plugin
   Floating AI Assistant — Dark Glassmorphism Theme
   ===================================================================== */

/* ── CSS Variables ─────────────────────────────────────────────────── */
.ak-ai-root {
    --ak-ai-gold:      #c9a227;
    --ak-ai-gold-lt:   #e5c040;
    --ak-ai-gold-dk:   #9a6b10;
    --ak-ai-green:     #1a5c34;
    --ak-ai-green-lt:  #2d8a52;
    --ak-ai-bg:        #0d1117;
    --ak-ai-surface:   #161b22;
    --ak-ai-surface2:  #1e2530;
    --ak-ai-border:    rgba(201, 162, 39, 0.18);
    --ak-ai-border2:   rgba(255, 255, 255, 0.06);
    --ak-ai-text:      #e6edf3;
    --ak-ai-text-dim:  #8b949e;
    --ak-ai-radius:    18px;
    --ak-ai-shadow:    0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(201,162,39,.12);
    --ak-ai-z:         9999;
    --ak-ai-w:         380px;
    --ak-ai-h:         520px;
}

/* ── Floating Toggle Button ─────────────────────────────────────────── */
#ak-ai-toggle {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: var(--ak-ai-z);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid var(--ak-ai-gold);
    background: linear-gradient(135deg, var(--ak-ai-green) 0%, #0f3d23 100%);
    box-shadow: 0 6px 28px rgba(0,0,0,.45), 0 0 0 0 rgba(201,162,39,.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, box-shadow .25s ease;
    outline: none;
    padding: 0;
    animation: ak-ai-pulse 3s ease-in-out infinite;
}

#ak-ai-toggle:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 10px 36px rgba(0,0,0,.55), 0 0 0 6px rgba(201,162,39,.18);
    animation: none;
}

#ak-ai-toggle.is-open {
    animation: none;
    background: linear-gradient(135deg, #2d1a00 0%, #1a0e00 100%);
}

#ak-ai-toggle svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    transition: opacity .2s, transform .3s;
}

#ak-ai-toggle .ak-ai-icon-chat { opacity: 1; }
#ak-ai-toggle .ak-ai-icon-close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
}
#ak-ai-toggle.is-open .ak-ai-icon-chat {
    opacity: 0;
    transform: rotate(90deg);
}
#ak-ai-toggle.is-open .ak-ai-icon-close {
    opacity: 1;
    transform: rotate(0deg);
}

/* Unread badge */
#ak-ai-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ak-ai-bg);
    display: none;
}

@keyframes ak-ai-pulse {
    0%, 100% { box-shadow: 0 6px 28px rgba(0,0,0,.45), 0 0 0 0 rgba(201,162,39,.4); }
    50%       { box-shadow: 0 6px 28px rgba(0,0,0,.45), 0 0 0 10px rgba(201,162,39,.0); }
}

/* ── Chat Panel ─────────────────────────────────────────────────────── */
#ak-ai-panel {
    position: fixed;
    bottom: 100px;
    right: 28px;
    z-index: var(--ak-ai-z);
    width: var(--ak-ai-w);
    max-height: var(--ak-ai-h);
    border-radius: var(--ak-ai-radius);
    background: var(--ak-ai-surface);
    border: 1px solid var(--ak-ai-border);
    box-shadow: var(--ak-ai-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    transform: scale(0.85) translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
}

#ak-ai-panel.is-open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ── Panel Header ───────────────────────────────────────────────────── */
.ak-ai-header {
    background: linear-gradient(135deg, var(--ak-ai-green) 0%, #0f3d23 100%);
    border-bottom: 1px solid var(--ak-ai-border);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ak-ai-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(201,162,39,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ak-ai-header-info {
    flex: 1;
    min-width: 0;
}

.ak-ai-header-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.ak-ai-header-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ak-ai-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    animation: ak-ai-blink 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes ak-ai-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}

.ak-ai-header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ak-ai-header-btn {
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.7);
    transition: background .2s, color .2s;
    padding: 0;
}

.ak-ai-header-btn:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.ak-ai-header-btn svg { width: 14px; height: 14px; }

/* ── Messages Area ──────────────────────────────────────────────────── */
.ak-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--ak-ai-bg);
    scroll-behavior: smooth;
}

.ak-ai-messages::-webkit-scrollbar { width: 4px; }
.ak-ai-messages::-webkit-scrollbar-track { background: transparent; }
.ak-ai-messages::-webkit-scrollbar-thumb {
    background: rgba(201,162,39,.25);
    border-radius: 4px;
}

/* Bubble base */
.ak-ai-bubble {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 14px;
    line-height: 1.55;
    font-size: 13.5px;
    word-break: break-word;
    animation: ak-ai-fadein .25s ease;
}

@keyframes ak-ai-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* AI bubble */
.ak-ai-bubble.is-ai {
    align-self: flex-start;
    background: var(--ak-ai-surface2);
    border: 1px solid var(--ak-ai-border2);
    color: var(--ak-ai-text);
    border-bottom-left-radius: 4px;
}

/* User bubble */
.ak-ai-bubble.is-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--ak-ai-green) 0%, var(--ak-ai-green-lt) 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* AI sender label */
.ak-ai-sender {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ak-ai-gold);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: .3px;
}

/* Loading dots */
.ak-ai-loading {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 4px 0;
}

.ak-ai-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ak-ai-gold);
    animation: ak-ai-dot 1.2s ease-in-out infinite;
    opacity: .4;
}

.ak-ai-loading span:nth-child(2) { animation-delay: .2s; }
.ak-ai-loading span:nth-child(3) { animation-delay: .4s; }

@keyframes ak-ai-dot {
    0%, 80%, 100% { opacity: .3; transform: scale(.8); }
    40%           { opacity: 1;  transform: scale(1.1); }
}

/* Markdown elements inside AI bubble */
.ak-ai-bubble.is-ai strong { color: var(--ak-ai-gold-lt); font-weight: 700; }
.ak-ai-bubble.is-ai em { color: rgba(230,237,243,.7); font-style: italic; }
.ak-ai-bubble.is-ai code {
    background: rgba(201,162,39,.1);
    border: 1px solid rgba(201,162,39,.2);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #e5c040;
}
.ak-ai-bubble.is-ai pre {
    background: rgba(0,0,0,.4);
    border: 1px solid var(--ak-ai-border2);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 8px 0 0;
    position: relative;
}
.ak-ai-bubble.is-ai pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--ak-ai-text);
}

/* ── Input Area ─────────────────────────────────────────────────────── */
.ak-ai-input-area {
    border-top: 1px solid var(--ak-ai-border2);
    background: var(--ak-ai-surface);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}

.ak-ai-input {
    flex: 1;
    min-width: 0;
    background: var(--ak-ai-surface2);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    color: var(--ak-ai-text);
    font-family: inherit;
    font-size: 13px;
    padding: 10px 14px;
    resize: none;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    line-height: 1.5;
    max-height: 100px;
    overflow-y: auto;
}

.ak-ai-input::placeholder { color: var(--ak-ai-text-dim); }

.ak-ai-input:focus {
    border-color: rgba(201,162,39,.45);
    box-shadow: 0 0 0 3px rgba(201,162,39,.08);
}

.ak-ai-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.ak-ai-send {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--ak-ai-gold) 0%, var(--ak-ai-gold-dk) 100%);
    color: #0d1117;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s, opacity .2s, box-shadow .2s;
    box-shadow: 0 3px 12px rgba(201,162,39,.35);
}

.ak-ai-send:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 6px 18px rgba(201,162,39,.5);
}

.ak-ai-send:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ak-ai-send svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    overflow: visible;
    pointer-events: none;
    flex-shrink: 0;
}

.ak-ai-send svg path {
    stroke: currentColor !important;
}

#ak-ai-send svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    overflow: visible;
    color: inherit;
}

/* ── Footer branding ────────────────────────────────────────────────── */
.ak-ai-footer {
    padding: 6px 14px 8px;
    text-align: center;
    font-size: 10px;
    color: var(--ak-ai-text-dim);
    background: var(--ak-ai-surface);
    border-top: 1px solid var(--ak-ai-border2);
    flex-shrink: 0;
}

.ak-ai-footer a {
    color: var(--ak-ai-gold);
    text-decoration: none;
    opacity: .7;
}

/* ── Responsive (mobile) ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ak-ai-root {
        --ak-ai-w: calc(100vw - 24px);
    }
    #ak-ai-panel {
        right: 12px;
        bottom: 90px;
    }
    #ak-ai-toggle {
        bottom: 18px;
        right: 18px;
    }
}

/* ── Error state ────────────────────────────────────────────────────── */
.ak-ai-bubble.is-error {
    border-color: rgba(239,68,68,.25) !important;
    background: rgba(239,68,68,.06) !important;
    color: #fca5a5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   AI RINGKASAN KIBLAT — Inline Summary Section
   Mengikuti design system situs: light theme, aksen hijau + gold.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-ai-summary-section {
    margin-top: 40px;
    padding: 0 0 8px;
    animation: ak-ai-fade-up .5s ease both;
}

@keyframes ak-ai-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header badge + title ────────────────────────────────────────────── */
/* Menggunakan .ak-guide-header dan .ak-guide-badge dari ak-frontend.css
   sehingga tampilan otomatis selaras. Hanya override khusus di sini. */

.ak-ai-summary-title {
    /* Override: cocok dengan .ak-guide-header h2 */
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
    letter-spacing: -.022em;
    line-height: 1.25;
}

/* ── Main card ──────────────────────────────────────────────────────── */
.ak-ai-summary-card {
    margin-top: 20px;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    position: relative;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.ak-ai-summary-card:hover {
    border-color: #bbf7d0;
    box-shadow: 0 6px 28px rgba(26,92,52,.1);
}

/* Garis aksen atas — gold tipis seperti ak-stat-card */
.ak-ai-summary-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1a5c34, #c9a227, #1a5c34);
    border-radius: 20px 20px 0 0;
}

/* ── Stats bar (azimuth, jarak, arah) ───────────────────────────────── */
.ak-ai-summary-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.ak-ai-stat {
    flex: 1;
    min-width: 120px;
    background: #f8faf8;
    border: 1.5px solid #e9f5ee;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .2s, box-shadow .2s;
}

.ak-ai-stat:hover {
    border-color: #86efac;
    box-shadow: 0 3px 12px rgba(26,92,52,.08);
}

.ak-ai-stat:nth-child(2) {
    background: #fffdf0;
    border-color: #fde68a;
}

.ak-ai-stat:nth-child(2):hover {
    border-color: #c9a227;
    box-shadow: 0 3px 12px rgba(201,162,39,.12);
}

.ak-ai-stat-label {
    font-size: 10.5px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.ak-ai-stat-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a5c34;
    letter-spacing: .01em;
    line-height: 1.2;
}

.ak-ai-stat:nth-child(2) .ak-ai-stat-value {
    color: #92400e;
}

/* ── Skeleton loader (light mode) ───────────────────────────────────── */
.ak-ai-summary-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ak-ai-skel-line {
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg,
        #f3f4f6 25%,
        #e5e7eb 50%,
        #f3f4f6 75%
    );
    background-size: 200% 100%;
    animation: ak-ai-shimmer 1.6s infinite linear;
}
.ak-ai-skel-gap  { height: 8px; }
.ak-ai-skel-60  { width: 60%; }
.ak-ai-skel-70  { width: 70%; }
.ak-ai-skel-80  { width: 80%; }
.ak-ai-skel-85  { width: 85%; }
.ak-ai-skel-90  { width: 90%; }
.ak-ai-skel-100 { width: 100%; }

@keyframes ak-ai-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Konten jawaban AI ──────────────────────────────────────────────── */
.ak-ai-summary-content {
    color: #374151;
    font-size: .96rem;
    line-height: 1.8;
}

.ak-ai-summary-content p {
    margin: 0 0 14px;
}

.ak-ai-summary-content p:last-child {
    margin-bottom: 0;
}

.ak-ai-summary-content strong {
    color: #1a5c34;
    font-weight: 700;
}

.ak-ai-summary-content em {
    color: #92400e;
}

/* ── Footer disclaimer ──────────────────────────────────────────────── */
.ak-ai-summary-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ak-ai-summary-footer svg {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    color: #6b7280;
}

/* ── AI badge di header ─────────────────────────────────────────────── */
/* Override badge default supaya berbeda dari "Panduan Lengkap" */
.ak-ai-summary-section .ak-guide-badge {
    background: linear-gradient(135deg, #fef9ec, #fde68a);
    color: #92400e;
    border-color: #fbbf24;
}

.ak-ai-summary-section .ak-guide-badge-dot {
    background: #c9a227;
    animation: ak-pulse-dot 2s ease-in-out infinite;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ak-ai-summary-card {
        padding: 18px 16px;
    }

    .ak-ai-summary-stats {
        gap: 8px;
    }

    .ak-ai-stat {
        min-width: 100px;
        padding: 10px 12px;
    }

    .ak-ai-stat-value {
        font-size: .95rem;
    }
}