/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --chat-primary: #16a34a;
    --chat-primary-hover: #15803d;
    --chat-primary-light: #f0fdf4;
    --chat-green: #16a34a;
    --chat-green-light: #dcfce7;
    --chat-red: #ef4444;
    --chat-red-light: #fef2f2;
    --chat-yellow: #eab308;
    --chat-yellow-light: #fef9c3;
    --chat-gray-50: #f9fafb;
    --chat-gray-100: #f3f4f6;
    --chat-gray-200: #e5e7eb;
    --chat-gray-300: #d1d5db;
    --chat-gray-400: #9ca3af;
    --chat-gray-500: #6b7280;
    --chat-gray-600: #4b5563;
    --chat-gray-700: #374151;
    --chat-gray-800: #1f2937;
    --chat-gray-900: #111827;
    --chat-white: #ffffff;
    --chat-radius: 20px;
    --chat-radius-sm: 12px;
    --chat-radius-xs: 8px;
    --chat-shadow: 0 4px 24px rgba(0,0,0,0.12);
    --chat-shadow-lg: 0 12px 40px rgba(0,0,0,0.18);
    --chat-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --chat-z: 9999;
    --chat-bubble-size: 60px;
    --chat-widget-width: 460px;  /* v2.36: lebar 460 (lega, chip rapi 2x2) — tablet+desktop */
    --chat-widget-height: 600px; /* v2.36: tinggi 600 (konten muat tanpa sesak) — mobile = full-screen, gak kena var ini */
}

/* rule 49: DARK MODE NEUTRAL — separate SURFACE vars (dark) from TEXT vars (light).
   Same --chat-gray-* is used both as bg AND as text in .dark rules, so we can't
   blanket-flip the ramp. Surfaces get dedicated neutral vars; text stays light. */
html.dark, .dark {
    --chat-surface-base:   #0A0A0A;  /* page / messages bg */
    --chat-surface-card:   #191919;  /* window/header/input-area/option-btn */
    --chat-surface-raised: #222222;  /* bubbles, input field, product card */
    --chat-surface-border: #2a2a2a;  /* borders, dividers */
    --chat-text-primary:   #ffffff;  /* headings, bubble text */
    --chat-text-secondary: #a3a3a3;  /* meta, system text */
}

/* ========================================
   FLOATING BUBBLE BUTTON
   ======================================== */
/* v2.30: launcher = pill "[icon] Chat" (green bg, white text) — bukan bulet lagi */
.rv-chat-bubble {
    position: fixed;
    bottom: 120px;
    right: 24px;
    z-index: var(--chat-z);
    min-height: 60px;
    min-width: 52px;
    padding: 8px 20px 8px 9px;
    border-radius: 999px;
    background: var(--chat-primary);
    color: var(--chat-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    box-shadow: 0 6px 22px rgba(22, 163, 74, 0.42);
    transition: transform var(--chat-transition), box-shadow var(--chat-transition), background var(--chat-transition), width var(--chat-transition);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* v2.54: bubble 2-baris ala "Chat with Sales" — ikon bulat + judul + status jam kerja */
.rv-bubble-ic {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rv-bubble-ic i { font-size: 21px; color: var(--chat-white); }
.rv-bubble-txt { display: flex; flex-direction: column; gap: 3px; text-align: left; line-height: 1; }
.rv-bubble-title { font-size: 15px; font-weight: 700; color: var(--chat-white); white-space: nowrap; line-height: 1.1; }
.rv-bubble-sub { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.94); white-space: nowrap; display: flex; align-items: center; gap: 5px; line-height: 1.1; }
.rv-bubble-sub .sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rv-bubble-sub .sdot.on { background: #d1fae5; box-shadow: 0 0 0 0 rgba(209,250,229,0.6); animation: rvBubbleDot 2.6s ease infinite; }
.rv-bubble-sub .sdot.off { background: rgba(255,255,255,0.55); }
@keyframes rvBubbleDot { 0%,100% { box-shadow: 0 0 0 0 rgba(209,250,229,0.5); } 50% { box-shadow: 0 0 0 3px rgba(209,250,229,0); } }

/* legacy v2.30 single label (kept harmless) */
.rv-chat-bubble-label { font-size: 15px; font-weight: 700; color: var(--chat-white); white-space: nowrap; line-height: 1; }

/* v2.30/2.54: pas chat/options kebuka → pill nyusut jadi bulet ✕ */
.rv-chat-bubble.open {
    width: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    gap: 0;
}
.rv-chat-bubble.open .rv-chat-bubble-label,
.rv-chat-bubble.open .rv-bubble-txt,
.rv-chat-bubble.open .rv-bubble-ic {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.rv-chat-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(22, 163, 74, 0.5);
}

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

.rv-chat-bubble i {
    font-size: 22px;
    transition: transform var(--chat-transition), opacity var(--chat-transition);
}

.rv-chat-bubble .icon-close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
}

.rv-chat-bubble.open .icon-chat {
    opacity: 0;
    transform: rotate(90deg);
}

.rv-chat-bubble.open .icon-close {
    opacity: 1;
    transform: rotate(0deg);
}

/* Unread badge */
.rv-chat-bubble .unread-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--chat-red);
    color: var(--chat-white);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--chat-white);
    transform: scale(0);
    transition: transform var(--chat-transition);
}

.rv-chat-bubble .unread-badge.show {
    transform: scale(1);
}

/* Pulse ring (v2.30: ikut bentuk pill) */
.rv-chat-bubble::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--chat-primary);
    opacity: 0;
    animation: rv-pulse-ring 4.5s ease-out infinite;
    pointer-events: none;
}

.rv-chat-bubble.open::before,
.rv-chat-bubble.no-pulse::before {
    animation: none;
    opacity: 0;
}

/* v2.54: halo di-soften — bubble udah gede 2-baris, glow gede bikin norak */
@keyframes rv-pulse-ring {
    0% { transform: scale(1); opacity: 0.16; }
    100% { transform: scale(1.18); opacity: 0; }
}

/* ========================================
   CS HOURS BANNER (above prechat form)
   ======================================== */
.rv-cs-banner {
    margin: 12px 16px 0;
    padding: 8px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
}
.rv-cs-banner .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rv-cs-banner.online {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    color: #15803d;
}
.rv-cs-banner.online .dot { background: #22c55e; }
.rv-cs-banner.break {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #b45309;
}
.rv-cs-banner.break .dot { background: #f59e0b; }
.rv-cs-banner.offline {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #4b5563;
}
.rv-cs-banner.offline .dot { background: #9ca3af; }

/* ========================================
   MINI SCHEDULE (in options popup) — v2.6
   ======================================== */
.rv-cs-mini {
    background: var(--chat-white);
    border: 1px solid var(--chat-gray-200);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: var(--chat-shadow);
    width: 260px;
    max-width: calc(100vw - 48px);
    font-family: 'Inter', sans-serif;
}
.rv-cs-mini-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--chat-gray-100);
}
.rv-cs-mini-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rv-cs-mini.online .rv-cs-mini-dot {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
    animation: rv-cs-mini-pulse-green 2s infinite;
}
.rv-cs-mini.break .rv-cs-mini-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245,158,11,0.6);
    animation: rv-cs-mini-pulse-amber 2s infinite;
}
.rv-cs-mini.offline .rv-cs-mini-dot { background: #ef4444; }

@keyframes rv-cs-mini-pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
    70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@keyframes rv-cs-mini-pulse-amber {
    0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.6); }
    70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

.rv-cs-mini-label {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.rv-cs-mini-head { flex-wrap: nowrap; }
.rv-cs-mini.online .rv-cs-mini-label { color: #15803d; }
.rv-cs-mini.break .rv-cs-mini-label { color: #b45309; }
.rv-cs-mini.offline .rv-cs-mini-label { color: #b91c1c; }

.rv-cs-mini-sub {
    font-size: 11px;
    color: var(--chat-gray-500);
    font-weight: 500;
}

.rv-cs-mini-list {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    font-size: 12px;
}
.rv-cs-mini-list dt {
    color: var(--chat-gray-500);
    font-weight: 500;
    white-space: nowrap;
}
.rv-cs-mini-list dd { white-space: nowrap; }
.rv-cs-mini-list dd {
    margin: 0;
    color: var(--chat-gray-800);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.rv-cs-mini-list dt.brk {
    color: var(--chat-gray-500);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--chat-gray-200);
    white-space: nowrap;
}
.rv-cs-mini-list dd.brk {
    color: var(--chat-gray-800);
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--chat-gray-200);
}
/* Highlight break row only when CS is actually on break */
.rv-cs-mini.break .rv-cs-mini-list dt.brk { color: #b45309; font-weight: 600; }
.rv-cs-mini.break .rv-cs-mini-list dd.brk { color: #b45309; }
.rv-cs-mini.break .rv-cs-mini-list dt.brk,
.rv-cs-mini.break .rv-cs-mini-list dd.brk { border-top-color: rgba(245,158,11,0.35); }

/* v2.18: Note di bawah button "Chat Langsung di Sini" (standalone, antara button & schedule) */
.rv-chat-opt-note {
    background: var(--chat-primary-light);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 11px;
    color: #166534;
    line-height: 1.4;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    max-width: 260px;
    box-shadow: var(--chat-shadow);
}
.rv-chat-opt-note i { color: var(--chat-primary); flex-shrink: 0; margin-top: 1px; font-size: 13px; }

/* ========================================
   DARK MODE — CS options + schedule popover + banner (rule 49 neutral)
   ======================================== */
/* Tombol opsi "Chat Langsung di Sini" */
.dark .rv-chat-opt-btn {
    background: #191919;
    border-color: #2a2a2a;
    color: #ffffff;
}
.dark .rv-chat-opt-btn:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.dark .rv-chat-opt-btn .opt-sub { color: #a3a3a3; }
/* Note hijau di bawah tombol */
.dark .rv-chat-opt-note {
    background: color-mix(in srgb, #34E646 13%, transparent);
    border-color: color-mix(in srgb, #34E646 35%, transparent);
    color: #34E646;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.dark .rv-chat-opt-note i { color: #34E646; }
/* Popover mini schedule */
.dark .rv-cs-mini {
    background: #191919;
    border-color: #2a2a2a;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.dark .rv-cs-mini-head { border-bottom-color: #2a2a2a; }
.dark .rv-cs-mini-sub { color: #a3a3a3; }
.dark .rv-cs-mini.offline .rv-cs-mini-label { color: #FF6A56; }
.dark .rv-cs-mini.online .rv-cs-mini-label { color: #34E646; }
.dark .rv-cs-mini.break .rv-cs-mini-label { color: #F0D030; }
.dark .rv-cs-mini-list dt { color: #a3a3a3; }
.dark .rv-cs-mini-list dd { color: #ffffff; }
.dark .rv-cs-mini-list dt.brk,
.dark .rv-cs-mini-list dd.brk { border-top-color: #2a2a2a; color: #a3a3a3; }
.dark .rv-cs-mini-list dd.brk { color: #ffffff; }
.dark .rv-cs-mini.break .rv-cs-mini-list dt.brk,
.dark .rv-cs-mini.break .rv-cs-mini-list dd.brk { color: #F0D030; border-top-color: color-mix(in srgb,#F0D030 35%,transparent); }
/* CS status banner (online/break/offline pills) */
.dark .rv-cs-banner.online {
    background: color-mix(in srgb, #34E646 13%, transparent);
    border-color: color-mix(in srgb, #34E646 35%, transparent);
    color: #34E646;
}
.dark .rv-cs-banner.online .dot { background: #34E646; }
.dark .rv-cs-banner.break {
    background: color-mix(in srgb, #F0D030 13%, transparent);
    border-color: color-mix(in srgb, #F0D030 35%, transparent);
    color: #F0D030;
}
.dark .rv-cs-banner.break .dot { background: #F0D030; }
.dark .rv-cs-banner.offline {
    background: #222222;
    border-color: #2a2a2a;
    color: #a3a3a3;
}
.dark .rv-cs-banner.offline .dot { background: #a3a3a3; }

/* ========================================
   OPTIONS POPUP (WhatsApp only)
   ======================================== */
.rv-chat-options {
    position: fixed;
    bottom: 195px;
    right: 24px;
    z-index: var(--chat-z);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--chat-transition), transform var(--chat-transition), visibility var(--chat-transition);
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 48px);
}

.rv-chat-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.rv-chat-option-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 16px;
    background: var(--chat-white);
    border: 1px solid var(--chat-gray-200);
    box-shadow: var(--chat-shadow);
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--chat-gray-800);
    transition: transform var(--chat-transition), box-shadow var(--chat-transition), border-color var(--chat-transition);
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

.rv-chat-option-btn:hover {
    transform: translateX(-4px);
    box-shadow: var(--chat-shadow-lg);
}

.rv-chat-option-btn i { font-size: 20px; }
.rv-chat-option-btn.opt-web i { color: var(--chat-primary); }
.rv-chat-option-btn.opt-wa i { color: #25D366; }
.rv-chat-option-btn.opt-wa:hover { border-color: #25D366; background: #f0fdf4; }
.rv-chat-option-btn.opt-tg i { color: #0088cc; }
.rv-chat-option-btn.opt-tg:hover { border-color: #0088cc; }
.rv-chat-option-btn.opt-web:hover { border-color: var(--chat-primary); }

/* Staggered entrance */
.rv-chat-options.show .rv-chat-option-btn:nth-child(1) {
    animation: rv-option-in 0.3s ease backwards 0.05s;
}
.rv-chat-options.show .rv-chat-option-btn:nth-child(2) {
    animation: rv-option-in 0.3s ease backwards 0.12s;
}

@keyframes rv-option-in {
    from { opacity: 0; transform: translateY(8px) translateX(8px); }
    to { opacity: 1; transform: translateY(0) translateX(0); }
}

/* ========================================
   BACKDROP OVERLAY
   ======================================== */
.rv-chat-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--chat-z) - 2);
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--chat-transition), visibility var(--chat-transition);
}

.rv-chat-backdrop.show { opacity: 1; visibility: visible; }

/* ========================================
   CHAT WINDOW (Desktop: popover)
   ======================================== */
.rv-chat-window {
    position: fixed;
    bottom: 200px;
    right: 24px;
    z-index: var(--chat-z);
    width: var(--chat-widget-width);
    height: var(--chat-widget-height);
    max-height: calc(100vh - 240px);
    background: var(--chat-white);
    border-radius: var(--chat-radius);
    box-shadow: var(--chat-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.96);
    transition: opacity var(--chat-transition), transform var(--chat-transition), visibility var(--chat-transition);
}

.rv-chat-window.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ========================================
   CHAT HEADER
   ======================================== */
.rv-chat-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px;
    background: var(--chat-primary);
    color: var(--chat-white);
    flex-shrink: 0;
}

.rv-chat-header-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rv-chat-header-avatar img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.rv-chat-header-avatar i { font-size: 22px; }

.rv-chat-header-info { flex: 1; min-width: 0; }

.rv-chat-header-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.rv-chat-header-subtitle {
    font-size: 13px;
    opacity: 0.85;
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rv-chat-header-subtitle .online-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: rv-dot-pulse 2s ease infinite;
}

.rv-chat-header-subtitle .offline-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--chat-gray-400);
}

@keyframes rv-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.rv-chat-close-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chat-white);
    cursor: pointer;
    transition: background var(--chat-transition);
    flex-shrink: 0;
    font-size: 18px;
}

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

/* v2.38: End Chat button — outlined pill, lebih prominent biar client gampang nutup chat */
/* v2.39: footer jadi flex (1/2 tombol) — Akhiri Chat + Nyalakan Notifikasi */
.rv-chat-end-link {
    display: flex;
    gap: 8px;
    padding: 8px 16px 12px;
    flex-shrink: 0;
    background: var(--chat-white);
}
.rv-chat-end-link button {
    flex: 1;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 16px;
    border: 1.5px solid var(--chat-gray-200);
    border-radius: 12px;
    background: var(--chat-white);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--chat-gray-600);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.rv-chat-end-link button i { font-size: 15px; }
.rv-chat-end-link button:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #dc2626;
}
/* v2.39: tombol Nyalakan Notifikasi — aksen biru (beda dari Akhiri yg merah) */
.rv-chat-end-link button.rv-end-notif { color: #2563eb; border-color: #bfdbfe; }
.rv-chat-end-link button.rv-end-notif:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }

/* v2.39: Banner permission notifikasi (Web Push) di dalam chat */
.rv-push-banner {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 16px 8px; padding: 12px 14px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 14px;
    flex-shrink: 0;
}
.rv-push-banner-ic {
    width: 32px; height: 32px; border-radius: 50%;
    background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.rv-push-banner-body { min-width: 0; }
.rv-push-banner-title { font-size: 13px; font-weight: 700; color: #1e3a8a; margin: 0 0 2px; }
.rv-push-banner-sub { font-size: 11.5px; color: #1e40af; line-height: 1.45; margin: 0 0 8px; }
.rv-push-banner-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-push-yes {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border: none; border-radius: 10px;
    background: #2563eb; color: #fff; font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: 'Inter', sans-serif; transition: background 0.15s;
}
.rv-push-yes:hover { background: #1d4ed8; }
.rv-push-no {
    padding: 7px 12px; border: none; border-radius: 10px;
    background: transparent; color: #6b7280; font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: 'Inter', sans-serif;
}
.rv-push-no:hover { color: #374151; }

/* ========================================
   PRE-CHAT FORM
   ======================================== */
.rv-chat-prechat {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    overflow-y: auto;
}

.rv-chat-prechat h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--chat-gray-900);
    margin: 0 0 4px 0;
}

.rv-chat-prechat .subtitle {
    font-size: 13px;
    color: var(--chat-gray-500);
    margin: 0 0 20px 0;
}

.rv-chat-field { margin-bottom: 16px; }

.rv-chat-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--chat-gray-700);
    margin-bottom: 6px;
}

.rv-chat-field label .required { color: var(--chat-red); }

.rv-chat-field input,
.rv-chat-field select,
.rv-chat-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--chat-gray-300);
    border-radius: var(--chat-radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--chat-gray-900);
    background: var(--chat-white);
    transition: border-color var(--chat-transition), box-shadow var(--chat-transition);
    outline: none;
    box-sizing: border-box;
}

.rv-chat-field input:focus,
.rv-chat-field select:focus,
.rv-chat-field textarea:focus {
    border-color: var(--chat-primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.rv-chat-field input.error {
    border-color: var(--chat-red);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.rv-chat-field .field-error {
    font-size: 12px;
    color: var(--chat-red);
    margin-top: 4px;
    display: none;
}

.rv-chat-field .field-error.show { display: block; }

.rv-chat-prechat-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--chat-radius-sm);
    background: var(--chat-primary);
    color: var(--chat-white);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--chat-transition), transform var(--chat-transition);
    margin-top: 4px;
}

.rv-chat-prechat-btn:hover { background: var(--chat-primary-hover); }
.rv-chat-prechat-btn:active { transform: scale(0.98); }
.rv-chat-prechat-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* v2.7: Guest form input focus border (replaces inline onfocus/onblur) */
.rv-guest-input:focus { border-color: var(--chat-primary); }
.rv-guest-input { border-color: var(--chat-gray-200); }

/* Google login in pre-chat */
.rv-chat-google-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    font-size: 12px;
    color: var(--chat-gray-400);
}

.rv-chat-google-divider::before,
.rv-chat-google-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--chat-gray-200);
}

.rv-chat-google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 1.5px solid var(--chat-gray-300);
    border-radius: var(--chat-radius-sm);
    background: var(--chat-white);
    color: var(--chat-gray-700);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--chat-transition), background var(--chat-transition);
    text-decoration: none;
}

.rv-chat-google-btn:hover {
    border-color: var(--chat-primary);
    background: var(--chat-gray-50);
}

.rv-chat-google-btn img { width: 18px; height: 18px; }

/* ========================================
   MESSAGES AREA
   ======================================== */
.rv-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.rv-chat-messages::-webkit-scrollbar { width: 4px; }
.rv-chat-messages::-webkit-scrollbar-track { background: transparent; }
.rv-chat-messages::-webkit-scrollbar-thumb { background: var(--chat-gray-300); border-radius: 4px; }

/* Date separator */
.rv-msg-date {
    text-align: center;
    font-size: 11px;
    color: var(--chat-gray-400);
    padding: 8px 0;
    font-weight: 500;
}

/* Message bubble base */
.rv-msg {
    display: flex;
    flex-direction: column;
    max-width: 82%;
    animation: rv-msg-in 0.25s ease;
}

@keyframes rv-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.rv-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.rv-msg-time {
    font-size: 10px;
    color: var(--chat-gray-400);
    margin-top: 2px;
    padding: 0 4px;
}

/* Customer (right) */
.rv-msg.customer { align-self: flex-end; align-items: flex-end; }
.rv-msg.customer .rv-msg-bubble {
    background: var(--chat-primary);
    color: var(--chat-white);
    border-bottom-right-radius: 4px;
}
.rv-msg.customer .rv-msg-time { text-align: right; }

/* CS / Bot (left) */
.rv-msg.cs,
.rv-msg.bot,
.rv-msg.system { align-self: flex-start; align-items: flex-start; }

.rv-msg.cs .rv-msg-bubble,
.rv-msg.bot .rv-msg-bubble {
    background: var(--chat-gray-100);
    color: var(--chat-gray-900);
    border-bottom-left-radius: 4px;
}

/* System message */
.rv-msg.system .rv-msg-bubble {
    background: var(--chat-yellow-light);
    color: var(--chat-gray-700);
    font-size: 12px;
    text-align: center;
    border-radius: 12px;
    max-width: 100%;
}
.rv-msg.system { max-width: 100%; align-self: center; }

/* Sender label */
.rv-msg-sender {
    font-size: 11px;
    font-weight: 600;
    color: var(--chat-gray-500);
    margin-bottom: 2px;
    padding: 0 4px;
}

/* ========================================
   PRODUCT CARD (in chat)
   ======================================== */
.rv-msg-product {
    background: var(--chat-white);
    border: 1.5px solid var(--chat-gray-200);
    border-radius: 16px;
    overflow: hidden;
    max-width: 280px;
    transition: box-shadow var(--chat-transition), border-color var(--chat-transition);
}

/* AI Bot Triage — button menu (Universal Entry Flow), rule 29: full-width stack, 44px touch target */
.rv-triage-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    max-width: 280px;
}
.rv-triage-btn {
    min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--chat-gray-200);
    border-radius: 12px;
    background: var(--chat-white);
    color: var(--chat-gray-800, #1f2937);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--chat-transition), border-color var(--chat-transition);
}
.rv-triage-btn:hover:not(:disabled) { background: var(--chat-gray-50, #f9fafb); border-color: var(--chat-primary); }
.rv-triage-btn:disabled { opacity: 0.5; cursor: default; }
.rv-triage-btn--selected { border-color: var(--chat-primary); background: var(--chat-gray-50, #f9fafb); }
.dark .rv-triage-btn { background: var(--chat-surface-raised); border-color: #2a2a2a; color: var(--chat-text-primary); }
.dark .rv-triage-btn:hover:not(:disabled) { border-color: var(--chat-primary); }

/* AI Bot Triage — tap cards (order_picker item / confirm & delivered summary), Shopee-style: seluruh kartu bisa dipencet */
.rv-triage-outer { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; max-width: 300px; }
.rv-triage-card {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--chat-white);
    border: 1.5px solid var(--chat-gray-200);
    border-radius: 14px;
    padding: 0;
    cursor: default;
    font: inherit;
}
.rv-triage-card--tappable { cursor: pointer; min-height: 44px; transition: background var(--chat-transition), border-color var(--chat-transition), box-shadow var(--chat-transition); }
.rv-triage-card--tappable:hover:not(:disabled) { border-color: var(--chat-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.rv-triage-card--tappable:disabled { opacity: 0.5; cursor: default; }
.rv-triage-card--selected { border-color: var(--chat-primary); background: var(--chat-gray-50, #f9fafb); }
.rv-triage-card--summary { border-color: var(--chat-primary); background: var(--chat-gray-50, #f9fafb); }
.rv-triage-card-inner { display: flex; align-items: flex-start; gap: 10px; padding: 12px; }
.rv-triage-card-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.rv-triage-card-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #f5f5f5; border: 1px solid var(--chat-gray-200, #e5e7eb); }
.dark .rv-triage-card-thumb { background: #f5f5f5; border-color: #2a2a2a; }
.rv-triage-card-body { min-width: 0; flex: 1; }
.rv-triage-card-title { font-size: 14px; font-weight: 700; color: var(--chat-gray-800, #1f2937); line-height: 1.3; }
.rv-triage-card-subtitle { font-size: 12px; color: var(--chat-gray-500, #6b7280); font-family: monospace; margin-top: 2px; word-break: break-all; }
.rv-triage-badge { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.rv-triage-badge--green { background: #E9FCEB; color: #16a34a; }
.rv-triage-badge--yellow { background: #FFF8E3; color: #b45309; }
.rv-triage-badge--red { background: #FFEFEF; color: #dc2626; }
.rv-triage-badge--gray { background: #F2F2F2; color: #6b7280; }
.dark .rv-triage-card { background: var(--chat-surface-raised); border-color: #2a2a2a; }
.dark .rv-triage-card--tappable:hover:not(:disabled) { border-color: var(--chat-primary); }
.dark .rv-triage-card--selected, .dark .rv-triage-card--summary { background: #1f1f1f; border-color: var(--chat-primary); }
.dark .rv-triage-card-title { color: var(--chat-text-primary); }
.dark .rv-triage-card-subtitle { color: #a3a3a3; }
.dark .rv-triage-badge--green { background: color-mix(in srgb, #34E646 13%, transparent); color: #34E646; }
.dark .rv-triage-badge--yellow { background: color-mix(in srgb, #F0D030 13%, transparent); color: #F0D030; }
.dark .rv-triage-badge--red { background: color-mix(in srgb, #FF6A56 13%, transparent); color: #FF6A56; }
.dark .rv-triage-badge--gray { background: color-mix(in srgb, #A3A3A3 13%, transparent); color: #A3A3A3; }

/* AI Bot Triage — delivered fields (Email/Password/Link Join) + tombol Salin */
.rv-triage-fields { background: var(--chat-white); border: 1.5px solid var(--chat-gray-200); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rv-triage-field-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rv-triage-field-label { color: var(--chat-gray-500, #6b7280); flex-shrink: 0; min-width: 60px; }
.rv-triage-field-value { flex: 1; min-width: 0; font-family: monospace; font-weight: 600; color: var(--chat-gray-800, #1f2937); word-break: break-all; }
.rv-triage-copy-btn { flex-shrink: 0; min-height: 28px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--chat-gray-200); background: var(--chat-gray-50, #f9fafb); color: var(--chat-primary); font-size: 11px; font-weight: 700; cursor: pointer; }
.rv-triage-copy-btn:hover { background: var(--chat-gray-100, #f3f4f6); }
.dark .rv-triage-fields { background: var(--chat-surface-raised); border-color: #2a2a2a; }
.dark .rv-triage-field-label { color: #a3a3a3; }
.dark .rv-triage-field-value { color: var(--chat-text-primary); }
.dark .rv-triage-copy-btn { background: #1f1f1f; border-color: #2a2a2a; }

.rv-msg-product:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: var(--chat-gray-300); }

.rv-msg-product-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    background: var(--chat-gray-100);
}

.rv-msg-product-body { padding: 12px 14px; }

.rv-msg-product-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--chat-gray-900);
    margin: 0 0 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rv-msg-product-desc {
    font-size: 12px;
    color: var(--chat-gray-500);
    margin: 0 0 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rv-msg-product-pricing { margin: 0 0 8px; }

.rv-msg-product-pricing .compare {
    font-size: 12px;
    font-weight: 400;
    color: var(--chat-gray-400);
    text-decoration: line-through;
    display: block;
    line-height: 1.2;
}

.rv-msg-product-pricing .current {
    font-size: 17px;
    font-weight: 800;
    color: var(--chat-primary);
    line-height: 1.3;
}

.rv-msg-product-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    flex-wrap: wrap;
}

.rv-msg-product-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.4;
}
.rv-msg-product-badge.stock { background: #dcfce7; color: #16a34a; }
.rv-msg-product-badge.low { background: #fef2f2; color: #ef4444; }
.rv-msg-product-badge.out { background: var(--chat-gray-100); color: var(--chat-gray-400); }
.rv-msg-product-badge.save { background: #fef9c3; color: #a16207; }

.rv-msg-product-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--chat-primary);
    color: var(--chat-white);
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: background var(--chat-transition), transform var(--chat-transition);
}

.rv-msg-product-btn:hover { background: var(--chat-primary-hover); transform: translateY(-1px); }

.rv-msg-product-btn.disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--chat-gray-200);
    color: var(--chat-gray-500);
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: not-allowed;
}

/* ========================================
   TYPING INDICATOR
   ======================================== */
.rv-typing-indicator {
    display: none;
    align-self: flex-start;
    padding: 12px 16px;
    background: var(--chat-gray-100);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
}
.rv-typing-indicator.show { display: flex; gap: 4px; align-items: center; }
/* v1.4: titik ngetik widget duduk DI LUAR kolom pesan (gak kena padding-nya),
   jadi nempel ke pinggir. Samain jaraknya sama gelembung pesan. */
#rvTyping { margin: 2px 16px 10px; flex-shrink: 0; }
@media (max-width: 767px) { #rvTyping { margin: 2px 12px 10px; } }
.rv-typing-indicator .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--chat-gray-400);
    animation: rv-typing-bounce 1.2s ease infinite;
}
.rv-typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
.rv-typing-indicator .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes rv-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

/* ========================================
   INPUT AREA
   ======================================== */
.rv-chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px;
    border-top: 1px solid var(--chat-gray-200);
    background: var(--chat-white);
    flex-shrink: 0;
}

.rv-chat-input-wrap { flex: 1; position: relative; }

.rv-chat-input {
    width: 100%;
    max-height: 100px;
    padding: 10px 14px;
    border: 1.5px solid var(--chat-gray-300);
    border-radius: var(--chat-radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--chat-gray-900);
    resize: none;
    outline: none;
    background: var(--chat-gray-50);
    transition: border-color var(--chat-transition), box-shadow var(--chat-transition);
    box-sizing: border-box;
    line-height: 1.4;
    overflow-y: auto;
}

.rv-chat-input:focus {
    border-color: var(--chat-primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.08);
    background: var(--chat-white);
}

.rv-chat-input::placeholder { color: var(--chat-gray-400); }

.rv-chat-send-btn {
    width: 42px; height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--chat-primary);
    color: var(--chat-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: background var(--chat-transition), transform var(--chat-transition), opacity var(--chat-transition);
}

.rv-chat-send-btn:hover { background: var(--chat-primary-hover); transform: scale(1.05); }
.rv-chat-send-btn:active { transform: scale(0.95); }
.rv-chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ========================================
   RATING PANEL
   ======================================== */
.rv-chat-rating { padding: 24px 20px; text-align: center; display: none; }
.rv-chat-rating.show { display: block; }

.rv-chat-rating h4 { font-size: 16px; font-weight: 700; color: var(--chat-gray-900); margin: 0 0 4px; }
.rv-chat-rating .subtitle { font-size: 13px; color: var(--chat-gray-500); margin: 0 0 12px; }

/* v2.1: Emoji reaction */
.rv-rating-emoji { font-size: 40px; margin-bottom: 8px; min-height: 48px; transition: transform 0.3s ease; }
.rv-rating-emoji.bounce { animation: rvEmojiBounce 0.4s ease; }
@keyframes rvEmojiBounce { 0%{transform:scale(0.5)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }

.rv-chat-rating-stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 4px; }
.rv-chat-rating-stars .star {
    font-size: 34px;
    color: var(--chat-gray-300);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.rv-chat-rating-stars .star.active { color: #f59e0b; transform: scale(1.15); }
.rv-chat-rating-stars .star.hover-preview { color: #fbbf24; transform: scale(1.1); }

/* v2.1: Dynamic label + scale */
.rv-rating-label { font-size: 13px; font-weight: 600; min-height: 20px; margin-bottom: 4px; transition: color 0.2s; }
.rv-rating-scale { display: flex; justify-content: space-between; padding: 0 4px; margin-bottom: 16px; }
.rv-rating-scale span { font-size: 11px; color: var(--chat-gray-400); font-weight: 500; }

.rv-chat-rating textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--chat-gray-300);
    border-radius: var(--chat-radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    resize: none;
    outline: none;
    margin-bottom: 12px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.rv-chat-rating textarea:focus { border-color: var(--chat-primary); }

.rv-chat-rating-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--chat-radius-sm);
    background: var(--chat-primary);
    color: var(--chat-white);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.rv-chat-rating-submit:hover { background: var(--chat-primary-hover); }
.rv-chat-rating-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.rv-chat-rating-skip {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--chat-gray-500);
    cursor: pointer;
    border: none;
    background: none;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
}
.rv-chat-rating-skip:hover { color: var(--chat-gray-700); }

/* v2.1: Skip nudge */
.rv-rating-nudge { font-size: 12px; color: var(--chat-gray-500); margin-top: 8px; line-height: 1.5; display: none; }
.rv-rating-nudge.show { display: block; }

/* v2.1: End chat confirm */
/* v2.51: Konfirmasi akhiri chat -> full overlay backdrop + centered sheet (was floating card bottom:60px yg ketumpuk tombol Akhiri Chat). */
.rv-chat-confirm { display:none; position:absolute; inset:0; z-index:30; background:rgba(15,23,42,0.45); -webkit-backdrop-filter:saturate(140%) blur(3px); backdrop-filter:saturate(140%) blur(3px); align-items:center; justify-content:center; padding:16px; box-sizing:border-box; }
.rv-chat-confirm.show { display:flex; animation: rvConfirmFade 0.18s ease; }
@keyframes rvConfirmFade { from{opacity:0} to{opacity:1} }
.rv-chat-confirm-card { width:100%; max-width:320px; background:var(--chat-white); border-radius:20px; box-shadow:0 16px 48px rgba(0,0,0,0.28); padding:22px 20px 18px; text-align:center; box-sizing:border-box; animation: rvConfirmIn 0.22s cubic-bezier(0.16,1,0.3,1); }
@keyframes rvConfirmIn { from{opacity:0;transform:translateY(14px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.rv-chat-confirm-icon { width:48px; height:48px; margin:0 auto 12px; border-radius:50%; background:#fef2f2; color:#ef4444; display:flex; align-items:center; justify-content:center; font-size:24px; }
.rv-chat-confirm p { font-size:16px; font-weight:700; color:var(--chat-gray-900); margin:0 0 4px; }
.rv-chat-confirm .confirm-sub { font-size:13px; color:var(--chat-gray-500); margin-bottom:18px; line-height:1.45; }
.rv-chat-confirm-btns { display:flex; flex-direction:column; gap:8px; }
.rv-chat-confirm-btns button { width:100%; padding:13px; border-radius:12px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all 0.15s; min-height:46px; }
/* Anti-abandonment: "Lanjut Chat" = primary (retain), "Ya, Akhiri" = ghost (deliberate) */
.rv-chat-confirm-no { background:#2563eb; color:#fff; }
.rv-chat-confirm-no:hover { background:#1d4ed8; }
.rv-chat-confirm-yes { background:transparent; color:#ef4444; border:1.5px solid #fecaca; }
.rv-chat-confirm-yes:hover { background:#fef2f2; border-color:#fca5a5; }
.dark .rv-chat-confirm-card { background:var(--chat-gray-800); }
.dark .rv-chat-confirm p { color:var(--chat-gray-100); }
.dark .rv-chat-confirm .confirm-sub { color:var(--chat-gray-400); }
.dark .rv-chat-confirm-icon { background:rgba(239,68,68,0.16); }
.dark .rv-chat-confirm-yes { border-color:rgba(239,68,68,0.4); }
.dark .rv-chat-confirm-yes:hover { background:rgba(239,68,68,0.12); }

/* ========================================
   FOOTER & CONNECTION
   ======================================== */

.rv-chat-connection {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    font-size: 11px;
    font-weight: 500;
    background: var(--chat-yellow-light);
    color: #92400e;
}
.rv-chat-connection.show { display: flex; }
.rv-chat-connection.error { background: var(--chat-red-light); color: #991b1b; }

/* ========================================
   MOBILE STYLES (<768px)
   ======================================== */
@media (max-width: 767px) {
    /* v2.55: mobile = buletan logo aja, no teks (hemat tempat) */
    .rv-chat-bubble { bottom: 90px; right: 16px; width: 56px; min-width: 56px; min-height: 56px; padding: 0; gap: 0; justify-content: center; }
    .rv-chat-bubble.open { width: 48px; min-width: 48px; min-height: 48px; padding: 0; }
    .rv-chat-bubble i { font-size: 20px; }
    .rv-chat-bubble-label { display: none; }
    .rv-bubble-txt { display: none; }
    .rv-bubble-ic { width: 56px; height: 56px; background: transparent; }
    .rv-bubble-ic i { font-size: 26px; }
    .rv-chat-options { bottom: 158px; right: 16px; max-width: calc(100vw - 32px); }

    /* Full-screen bottom sheet */
    .rv-chat-window {
        bottom: 0; right: 0; left: 0;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        transform: translateY(100%);
    }
    .rv-chat-window.show { transform: translateY(0); }

    .rv-chat-bubble.chat-open { opacity: 0; pointer-events: none; transform: scale(0.5); }

    .rv-chat-header {
        padding: 16px 16px;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
    }

    .rv-chat-messages { padding: 12px 12px 8px; }

    .rv-chat-input-area {
        padding: 10px 12px 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .rv-chat-prechat { padding: 20px 16px; }
    .rv-msg { max-width: 88%; }
    .rv-msg-product { max-width: 260px; }
}

/* ========================================
   FULL PAGE CHAT (/chat/)
   ======================================== */
.rv-chat-fullpage {
    display: flex;
    flex-direction: column;
    position: relative; /* v2.37: anchor buat .rv-scroll-cue */
    height: 100vh;
    height: 100dvh;
    max-width: 640px;
    margin: 0 auto;
    background: var(--chat-white);
}

.rv-chat-fullpage .rv-chat-header { border-radius: 0; }
.rv-chat-fullpage .rv-chat-messages { flex: 1; }

@media (min-width: 768px) {
    .rv-chat-fullpage {
        margin-top: 24px;
        margin-bottom: 24px;
        height: calc(100vh - 48px);
        border-radius: var(--chat-radius);
        box-shadow: var(--chat-shadow-lg);
        overflow: hidden;
    }
}

/* ========================================
   v2.2: READ RECEIPTS
   ======================================== */
.rv-msg-receipt {
    display: inline-flex; align-items: center; gap: 1px;
    font-size: 13px; margin-left: 4px; vertical-align: middle; line-height: 1;
}
.rv-msg-receipt.sent { color: var(--chat-gray-400); }
.rv-msg-receipt.read { color: #3b82f6; }

/* ========================================
   v2.2: DATE SEPARATOR
   ======================================== */
.rv-msg-date-sep {
    text-align: center; padding: 12px 0 6px; display: flex;
    align-items: center; gap: 12px;
}
/* v2.58: no flanking lines — date sep = pill tengah aja (ala WhatsApp) */
.rv-msg-date-sep { justify-content: center; }
.rv-msg-date-sep::before, .rv-msg-date-sep::after { display: none; }
.rv-msg-date-sep span {
    font-size: 11px; font-weight: 500; color: var(--chat-gray-400);
    background: var(--chat-white); padding: 2px 10px; border-radius: 10px;
    white-space: nowrap;
}
.rv-chat-fullpage .rv-msg-date-sep span,
.rv-chat-window .rv-msg-date-sep span { background: var(--chat-gray-50); }
/* v2.58 (rule 49): dark mode → pill item + teks putih (was pill putih, nyolok) */
.dark .rv-msg-date-sep span,
.dark .rv-chat-fullpage .rv-msg-date-sep span,
.dark .rv-chat-window .rv-msg-date-sep span { background: #222; color: #e5e5e5; }

/* v2.47: System divider (lanjutan sesi / join / resolve) — hairline tipis di tengah, bukan bubble */
.rv-msg-divider {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 6px 4px; padding: 0;
}
/* v2.58: no flanking lines — system marker = teks tengah aja */
.rv-msg-divider::before, .rv-msg-divider::after { display: none; }
.rv-msg-divider span {
    font-size: 11px; font-weight: 500; color: var(--chat-gray-400);
    white-space: nowrap; text-align: center;
}
.dark .rv-msg-divider::before, .dark .rv-msg-divider::after { background: var(--chat-gray-700); }
.dark .rv-msg-divider span { color: var(--chat-gray-500); }
/* v1.3: pembatas CHAT BARU - garis tipis kiri-kanan biar keliatan batas sesinya */
.rv-msg-divider.rv-newchat { margin: 12px 4px 8px; }
.rv-msg-divider.rv-newchat::before, .rv-msg-divider.rv-newchat::after {
    display: block; content: ''; flex: 1; height: 1px; background: var(--chat-gray-200, #e5e7eb);
}
.rv-msg-divider.rv-newchat span { font-weight: 600; color: var(--chat-gray-500, #6b7280); }
.rv-fold-old {
    display: block; margin: 8px auto 4px; min-height: 36px; padding: 6px 16px; border-radius: 99px;
    border: 1px solid var(--chat-gray-200, #e5e7eb); background: #fff; color: #4b5563;
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.rv-fold-old:hover { border-color: #16a34a; color: #15803d; }
.dark .rv-fold-old { background: #1f1f1f; border-color: #333; color: #d4d4d4; }
.dark .rv-msg-divider.rv-newchat::before, .dark .rv-msg-divider.rv-newchat::after { background: #333; }

/* ========================================
   v2.2: IMAGE LIGHTBOX
   ======================================== */
.rv-lightbox-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s; cursor: zoom-out;
}
.rv-lightbox-overlay.show { opacity: 1; }
.rv-lightbox-overlay img {
    max-width: 92vw; max-height: 88vh; border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4); object-fit: contain;
}
.rv-lightbox-x {
    position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
    border-radius: 50%; border: none; background: rgba(255,255,255,0.15);
    color: #fff; font-size: 18px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: background 0.15s;
}
.rv-lightbox-x:hover { background: rgba(255,255,255,0.3); }

/* v2.4: Login popup for upload gating */
.rv-login-popup-overlay {
    position: fixed; inset: 0; z-index: 10002;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.rv-login-popup-overlay.show { opacity: 1; }
.rv-login-popup-box {
    background: #fff; border-radius: 16px; padding: 24px;
    width: 300px; max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    transform: scale(0.95); transition: transform 0.2s;
}
.rv-login-popup-overlay.show .rv-login-popup-box { transform: scale(1); }

/* ========================================
   v2.2: MUTE TOGGLE
   ======================================== */
.rv-chat-mute-btn {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 16px; transition: background 0.15s; flex-shrink: 0;
}
.rv-chat-mute-btn:hover { background: rgba(255,255,255,0.25); }
.rv-chat-mute-btn.muted { color: rgba(255,255,255,0.4); }

/* ========================================
   v2.2: TOPIC PICKER
   ======================================== */
/* v2.35: Picker jadi area scroll (header window tetap pinned) — fix konten ke-clip pas window pendek */
#rvTopicPicker { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#rvTopicPicker::-webkit-scrollbar { width: 4px; }
#rvTopicPicker::-webkit-scrollbar-track { background: transparent; }
#rvTopicPicker::-webkit-scrollbar-thumb { background: var(--chat-gray-300); border-radius: 4px; }
/* v2.37: Scroll cue — chevron memantul, muncul kalau picker masih bisa di-scroll ke bawah */
.rv-scroll-cue {
    position: absolute; bottom: 14px; left: 50%; z-index: 6;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--chat-white); border: 1px solid var(--chat-gray-200);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    color: var(--chat-primary); font-size: 18px; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transform: translateX(-50%);
    animation: rv-cue-bounce 1.4s ease-in-out infinite;
}
.rv-scroll-cue.show { display: flex; }
.rv-scroll-cue:hover { background: var(--chat-primary); color: #fff; }
@keyframes rv-cue-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(5px); }
}
.rv-topic-picker { padding: 0 20px 12px; }
.rv-topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-topic-chip {
    padding: 6px 14px; border-radius: 20px;
    border: 1.5px solid var(--chat-gray-200); background: var(--chat-white);
    font-size: 13px; font-weight: 500; color: var(--chat-gray-700);
    cursor: pointer; transition: all 0.15s;
    font-family: 'Inter', sans-serif; line-height: 1.3;
}
.rv-topic-chip:hover { border-color: var(--chat-primary); color: var(--chat-primary); }
.rv-topic-chip.active {
    background: var(--chat-primary-light); border-color: var(--chat-primary);
    color: var(--chat-primary); font-weight: 600;
}

/* ========================================
   v2.2: PRODUCT CARD FALLBACK
   ======================================== */
.rv-msg-product-placeholder {
    width: 100%; height: 120px;
    background: linear-gradient(135deg, var(--chat-gray-100), var(--chat-gray-50));
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: var(--chat-gray-300);
    border-radius: var(--chat-radius-sm) var(--chat-radius-sm) 0 0;
}

/* ========================================
   DARK MODE
   ======================================== */
.dark .rv-chat-window,
.dark .rv-chat-fullpage { background: var(--chat-surface-card); }
.dark .rv-chat-header { background: #191919; } /* rule 49: neutral card, was blue #1e3a5f */
.dark .rv-chat-messages { background: var(--chat-surface-base); }
.dark .rv-msg.cs .rv-msg-bubble { background: var(--chat-primary); color:#fff; }
.dark .rv-msg.bot .rv-msg-bubble { background: var(--chat-surface-raised); color: var(--chat-text-primary); }
.dark .rv-msg.customer .rv-msg-bubble { background: #2563eb !important; color: #fff !important; } /* rule 49: customer right-side = brand blue */
.dark .rv-msg.system .rv-msg-bubble { background: rgba(240,208,48,0.13); color: var(--chat-text-secondary); }
.dark .rv-chat-input-area { background: var(--chat-surface-card); border-top-color: var(--chat-surface-border); }
.dark .rv-chat-input { background: #1f1f1f; border-color: var(--chat-surface-border); color: var(--chat-text-primary); }
.dark .rv-chat-field input,
.dark .rv-chat-field select,
.dark .rv-chat-field textarea { background: #1f1f1f; border-color: var(--chat-surface-border); color: var(--chat-text-primary); }
.dark .rv-chat-prechat h3 { color: var(--chat-text-primary); }
.dark .rv-chat-option-btn { background: var(--chat-surface-card); border-color: var(--chat-surface-border); color: var(--chat-text-primary); }
.dark .rv-msg-product { background: var(--chat-surface-raised); border-color: var(--chat-surface-border); }
.dark .rv-msg-product-title { color: var(--chat-text-primary); }
.dark .rv-fb-card { background: var(--chat-surface-card); border-color: var(--chat-surface-border); }
/* rule 49: feedback card hover + icon tiles + divider neutral (was light pastel -> teks putih ilang pas hover) */
.dark .rv-fb-bug:hover  { border-color: color-mix(in srgb,#FF6A56 35%,transparent); background: color-mix(in srgb,#FF6A56 13%,transparent); }
.dark .rv-fb-idea:hover { border-color: color-mix(in srgb,#34E646 35%,transparent); background: color-mix(in srgb,#34E646 13%,transparent); }
.dark .rv-fb-bug .rv-fb-ic  { background: color-mix(in srgb,#FF6A56 16%,transparent); color: #FF6A56; }
.dark .rv-fb-idea .rv-fb-ic { background: color-mix(in srgb,#34E646 16%,transparent); color: #34E646; }
.dark .rv-fb-divider { color: #a3a3a3; }
.dark .rv-fb-divider::before, .dark .rv-fb-divider::after { background: #2a2a2a; }
/* greeting di topic picker pakai inline gray-900 (gak ke-flip) -> putih di dark */
.dark #rvTopicPicker h3 { color: #ffffff !important; }
/* rule 49: pre-chat dark fixes (white pills, dim text, white google btn) */
.dark .rv-topic-chip { background: #191919; border-color: #2a2a2a; color: #e5e5e5; }
.dark .rv-topic-chip:hover { border-color: #5E9EFF; color: #5E9EFF; }
.dark .rv-chat-prechat .subtitle { color: #a3a3a3; }
.dark .rv-fb-card .rv-fb-title { color: #ffffff; }
.dark .rv-fb-card .rv-fb-sub { color: #a3a3a3; }
.dark .rv-chat-google-btn { background: #191919; border-color: #2a2a2a; color: #e5e5e5; }
.dark .rv-chat-google-btn:hover { background: #222222; }
/* v2.56 (rule 49 c3): footer Akhiri Chat — was white seam di dark mode */
.dark .rv-chat-end-link { background: #191919; }
.dark .rv-chat-end-link button { background: #191919; border-color: #2a2a2a; color: #a3a3a3; }
.dark .rv-chat-end-link button:hover { background: #222; border-color: rgba(255,106,86,0.4); color: #ff6a56; }
.dark .rv-chat-end-link button.rv-end-notif { color: #5E9EFF; border-color: rgba(94,158,255,0.4); }
.dark .rv-chat-end-link button.rv-end-notif:hover { background: rgba(94,158,255,0.12); border-color: #5E9EFF; color: #5E9EFF; }

/* ========================================
   UTILITIES
   ======================================== */
.rv-chat-hidden { display: none !important; }

.rv-chat-loading { display: flex; align-items: center; justify-content: center; padding: 32px; color: var(--chat-gray-400); }
.rv-chat-loading .spinner {
    width: 24px; height: 24px;
    border: 3px solid var(--chat-gray-200);
    border-top-color: var(--chat-primary);
    border-radius: 50%;
    animation: rv-spin 0.6s linear infinite;
}

@keyframes rv-spin { to { transform: rotate(360deg); } }

.rv-msg-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rv-msg.customer .rv-msg-bubble a { color: rgba(255,255,255,0.9); }

body.rv-chat-open { overflow: hidden; position: fixed; width: 100%; }
/* ========================================
   OPTIONS POPUP BUTTONS (v2.0 additions)
   ======================================== */
.rv-chat-opt-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1.5px solid var(--chat-gray-200);
    background: var(--chat-white);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--chat-gray-800);
    transition: transform var(--chat-transition), box-shadow var(--chat-transition), border-color var(--chat-transition);
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    white-space: nowrap;
    min-width: 200px;
}
.rv-chat-opt-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--chat-shadow);
}
.rv-chat-opt-btn i { font-size: 20px; }
.rv-chat-opt-btn.opt-web i { color: var(--chat-primary); }
.rv-chat-opt-btn.opt-web:hover { border-color: var(--chat-primary); }
.rv-chat-opt-btn.opt-wa i { color: #25D366; }
.rv-chat-opt-btn.opt-wa:hover { border-color: #25D366; background: #f0fdf4; }
/* legacy (kept for backward-compat, no longer rendered) */
.rv-chat-opt-btn.opt-tg i { color: #0088cc; }
.rv-chat-opt-btn.opt-tg:hover { border-color: #0088cc; }
.rv-chat-opt-btn.opt-android i { color: #16a34a; }
.rv-chat-opt-btn.opt-android:hover { border-color: #16a34a; background: #f0fdf4; }
.rv-chat-opt-btn.opt-ios i { color: #111827; }
.rv-chat-opt-btn.opt-ios:hover { border-color: #111827; background: #f3f4f6; }
.dark .rv-chat-opt-btn.opt-ios i { color: #f9fafb; }
.dark .rv-chat-opt-btn.opt-ios:hover { border-color: #f9fafb; background: transparent; }
.rv-chat-opt-btn.opt-feedback i { color: #6366f1; }
.rv-chat-opt-btn.opt-feedback:hover { border-color: #6366f1; background: #eef2ff; }

/* v2.34: Feedback section di pre-chat picker (Lapor Kerusakan / Kasih Saran -> /masukan/) */
.rv-fb-section { padding: 16px 20px 4px; }
.rv-fb-divider { display: flex; align-items: center; text-align: center; color: var(--chat-gray-400); font-size: 11px; font-weight: 600; margin-bottom: 10px; }
.rv-fb-divider::before, .rv-fb-divider::after { content: ''; flex: 1; height: 1px; background: var(--chat-gray-200); }
.rv-fb-divider span { padding: 0 10px; white-space: nowrap; }
.rv-fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rv-fb-grid-single { grid-template-columns: 1fr; }
.rv-fb-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--chat-gray-200); border-radius: 12px; background: #fff; text-decoration: none; min-width: 0; transition: all 0.15s; }
.rv-fb-card .rv-fb-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 2px; }
.rv-fb-card .rv-fb-title { font-size: 13px; font-weight: 700; color: var(--chat-gray-900); line-height: 1.2; }
.rv-fb-card .rv-fb-sub { font-size: 11px; color: var(--chat-gray-400); line-height: 1.3; display: flex; align-items: center; gap: 4px; }
.rv-fb-bug .rv-fb-ic { background: #fee2e2; color: #dc2626; }
.rv-fb-bug:hover { border-color: #f87171; background: #fef2f2; }
.rv-fb-idea .rv-fb-ic { background: #dcfce7; color: #16a34a; }
.rv-fb-idea:hover { border-color: #4ade80; background: #f0fdf4; }

.rv-chat-opt-btn .opt-label { font-weight: 600; }
.rv-chat-opt-btn .opt-sub { font-size: 12px; font-weight: 400; color: var(--chat-gray-500); }

/* File upload button */
.rv-chat-attach-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--chat-gray-100);
    color: var(--chat-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: background var(--chat-transition), color var(--chat-transition);
}
.rv-chat-attach-btn:hover { background: var(--chat-gray-200); color: var(--chat-gray-700); }

/* v2.45: Quoted reply — NESTED di dalam bubble (pola WA/Telegram).
   Bar aksen kiri + nama bold + snippet muted. Tint nyatu sama bubble. */
.rv-msg-quote {
    border-left: 3px solid var(--chat-primary);
    border-radius: 6px;
    padding: 5px 9px;
    margin-bottom: 7px;        /* jarak ke teks utama di bawahnya */
    background: rgba(37, 99, 235, 0.07);
    overflow: hidden;
}
.rv-msg-quote--clickable { cursor: pointer; transition: background 0.15s; }
.rv-msg-quote--clickable:hover { background: rgba(37, 99, 235, 0.14); }
.rv-msg-quote-name {
    font-size: 12px; font-weight: 700; color: var(--chat-primary);
    line-height: 1.3; margin-bottom: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-msg-quote-text {
    font-size: 12px; color: var(--chat-gray-600); line-height: 1.35;
    word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
/* Text utama dlm bubble (dipisah dari quote nested) */
.rv-msg-text { line-height: 1.55; }
/* Customer bubble (biru): quote pakai putih semi biar kebaca di atas biru */
.rv-msg.customer .rv-msg-quote {
    background: rgba(255,255,255,0.16);
    border-left-color: rgba(255,255,255,0.85);
}
.rv-msg.customer .rv-msg-quote-name { color: #fff; }
.rv-msg.customer .rv-msg-quote-text { color: rgba(255,255,255,0.9); }
/* Dark mode: bubble cs abu gelap → quote tint terang dikit */
.dark .rv-msg.cs .rv-msg-quote, .dark .rv-msg.bot .rv-msg-quote {
    background: rgba(255,255,255,0.07); border-left-color: #60a5fa;
}
.dark .rv-msg.cs .rv-msg-quote-name, .dark .rv-msg.bot .rv-msg-quote-name { color: #93c5fd; }
.rv-msg-highlight { animation: rv-msg-flash 1.5s ease; }
@keyframes rv-msg-flash {
    0%, 100% { background: transparent; }
    30%      { background: rgba(251, 191, 36, 0.25); }
}

/* Image message */
.rv-msg-image {
    max-width: 240px;
    border-radius: var(--chat-radius-sm);
    overflow: hidden;
    cursor: pointer;
}
.rv-msg-image img {
    width: 100%;
    display: block;
    border-radius: var(--chat-radius-sm);
}

/* Date separator */
.rv-msg-date {
    text-align: center;
    font-size: 11px;
    color: var(--chat-gray-400);
    padding: 8px 0;
    font-weight: 500;
}

/* Mobile options popup adjustments — pill anchored above bubble (right side) */
@media (max-width: 767px) {
    .rv-chat-options {
        right: 16px;
        bottom: 158px;
        width: max-content;
        max-width: calc(100vw - 32px);
        align-items: flex-end;
    }
}

/* ========================================
   KARTU BOT KAYAK LAB (v1.2, 4 Okt 2026)
   Satu set gaya buat widget DAN /chat/ (dua-duanya muat berkas ini).
   Rendernya di assets/js/chat-cards.js. Patokan: admin/ai-playground.php
   (kelas aipg-*). Warna: hijau = kepilih/aksi utama, oranye = disaranin,
   merah = mendesak, abu = netral.
   ======================================== */
.rv-msg.rv-msg--wide { max-width: 100%; width: 100%; box-sizing: border-box; }
.rv-cx { margin-top: 6px; max-width: 100%; }
.rv-msg--wide > .rv-cx { width: 100%; }
.rv-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-echo .rv-msg-bubble { white-space: normal; }
.rv-msg-hiddenq { display: none !important; }
.rv-msg--wide > .rv-msg-bubble { max-width: 82%; }
.rv-cx-after { margin-top: 6px; }
.rv-stage:not([hidden]) + .rv-chat-input-area { border-top: none; }

/* Kartu rekap */
.rv-rc { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; max-width: 300px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.rv-rc-in { display: flex; align-items: flex-start; gap: 10px; padding: 12px; }
.rv-rc-b { flex: 1; min-width: 0; }
.rv-rc-img { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #f3f4f6; display: block; flex-shrink: 0; }
.rv-rc-img.ic, .rv-oc-logo.ic { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 18px; }
.rv-rc-t { font-size: 13.5px; font-weight: 700; color: #111827; line-height: 1.35; overflow-wrap: anywhere; }
.rv-rc-s { font-size: 12px; color: #6b7280; margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.rv-bdg { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.rv-bg-green { background: #E9FCEB; color: #16a34a; } .rv-bg-yellow { background: #FFF8E3; color: #b45309; }
.rv-bg-red { background: #FFEFEF; color: #dc2626; }   .rv-bg-gray { background: #F2F2F2; color: #6b7280; }
.rv-fld { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid #f3f4f6; font-size: 12.5px; }
.rv-fld span { color: #6b7280; flex-shrink: 0; } .rv-fld b { color: #111827; font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.rv-tbtn { display: block; width: 100%; max-width: 300px; min-height: 44px; padding: 10px; border: 1px solid #e5e7eb; background: #fff; border-radius: 12px;
           font-family: inherit; font-size: 13.5px; font-weight: 600; color: #111827; cursor: pointer; margin-top: 6px; text-align: center; box-sizing: border-box; }
.rv-tbtn:hover:not(:disabled) { border-color: #16a34a; background: #f0fdf4; }
.rv-tbtn:disabled { opacity: .5; cursor: default; }

/* Kotak pilih pesanan: 2 kolom di widget, /chat/ auto-fill (chat-fullpage.css) */
.rv-pk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.rv-pk-i { min-width: 0; min-height: 44px; text-align: left; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; cursor: pointer;
           display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font: inherit; color: inherit; box-sizing: border-box;
           transition: border-color .15s ease, background .15s ease; }
.rv-pk-i:hover:not(:disabled) { border-color: #16a34a; background: #f0fdf4; }
.rv-pk-i:disabled { cursor: default; opacity: .45; }
.rv-pk-i .rv-rc-img, .rv-pk-ic { margin-bottom: 6px; }
.rv-pk-ic { width: 34px; height: 34px; border-radius: 8px; background: #f3f4f6; color: #6b7280; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.rv-pk-lain { justify-content: center; align-items: center; text-align: center; }

/* Order lewat chat */
.rv-oc-rak { background: #f5f5f7; border-radius: 20px; padding: 12px; width: 100%; max-width: 440px; box-sizing: border-box; }
.rv-oc-kartu { background: #fff; border: 1px solid #f3f4f6; border-radius: 20px; padding: 16px; width: 100%; max-width: 440px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(17,24,39,.08); }
.rv-oc-kartu.ok { border: 1.5px solid #86efac; background: #f0fdf4; box-shadow: none; }
.rv-oc-list { display: flex; flex-direction: column; gap: 8px; }
.rv-oc-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 12px; margin: 0; background: #fff; border: 1.5px solid transparent;
              border-radius: 16px; text-align: left; cursor: pointer; font: inherit; color: inherit; box-sizing: border-box;
              box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 4px 14px rgba(17,24,39,.04); transition: border-color .15s ease, background .15s ease; }
.rv-oc-item:hover:not(:disabled) { border-color: #bbf7d0; }
.rv-oc-item.best { border-color: #fdba74; }
.rv-oc-item.on, .rv-oc-item.on:hover { border-color: #16a34a; background: #f0fdf4; }
.rv-oc-item:disabled { cursor: default; opacity: .5; box-shadow: none; }
.rv-oc-no { width: 18px; flex-shrink: 0; text-align: center; font-size: 12px; font-weight: 700; color: #9ca3af; }
.rv-oc-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #f3f4f6; flex-shrink: 0; display: block; }
.rv-oc-body { flex: 1; min-width: 0; }
.rv-oc-eb { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.3; margin-bottom: 2px; text-transform: uppercase; }
.rv-oc-eb.oranye { color: #c2410c; } .rv-oc-eb.merah { color: #dc2626; } .rv-oc-eb.abu { color: #6b7280; } .rv-oc-eb.kategori { color: #6b7280; } .rv-oc-eb.hijau { color: #15803d; }
.rv-oc-nm { display: block; font-size: 14px; font-weight: 700; color: #111827; line-height: 1.3; overflow-wrap: anywhere; }
.rv-oc-sub { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; line-height: 1.35; }
.rv-oc-right { text-align: right; flex-shrink: 0; }
.rv-oc-pr { display: block; font-size: 15px; font-weight: 800; color: #111827; white-space: nowrap; }
.rv-oc-pill { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 99px; background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 700; }
.rv-oc-chk { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #d1d5db; flex-shrink: 0; color: #fff; font-size: 12px;
             display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.rv-oc-item.on .rv-oc-chk { background: #16a34a; border-color: #16a34a; }
.rv-oc-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #15803d; margin: 0 2px 10px; }
.rv-oc-cta { display: block; width: 100%; min-height: 48px; margin-top: 10px; padding: 0 18px; border: none; border-radius: 14px; background: #16a34a; color: #fff;
             font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; box-sizing: border-box; }
.rv-oc-cta:hover:not(:disabled) { background: #15803d; }
.rv-oc-cta:disabled { background: #d1d5db; color: #fff; cursor: default; }
.rv-oc-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; background: #fff; border: 1.5px solid #e5e7eb;
              border-radius: 14px; color: #111827; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.rv-oc-btn2:hover:not(:disabled) { border-color: #16a34a; color: #111827; }
.rv-oc-btn2:disabled, .rv-oc-link:disabled { opacity: .55; cursor: default; }
.rv-oc-pair { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-oc-pair > * { flex: 1 1 130px; margin-top: 0; }
.rv-oc-links { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.rv-oc-links.tengah { justify-content: center; gap: 18px; }
.rv-oc-link { display: inline-flex; align-items: center; min-height: 44px; background: none; border: none; padding: 0 4px; color: #374151; font-family: inherit;
              font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rv-oc-trust { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.rv-oc-trust.baris { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.rv-oc-trust span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4b5563; }
.rv-oc-trust i { color: #16a34a; font-size: 14px; }
.rv-oc-lbl { display: block; font-size: 12.5px; font-weight: 700; color: #374151; margin: 2px 2px 6px; }
.rv-oc-field { position: relative; }
.rv-oc-field i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 16px; pointer-events: none; }
.rv-oc-in { width: 100%; height: 46px; padding: 0 12px; border: 1.5px solid #e5e7eb; border-radius: 12px; background: #fff; font-family: inherit; font-size: 16px;
            color: #111827; box-sizing: border-box; }
.rv-oc-field .rv-oc-in { padding-left: 40px; }
.rv-oc-in:focus { outline: none; border-color: #16a34a; }
.rv-oc-help { font-size: 11.5px; color: #6b7280; margin: 5px 2px 12px; line-height: 1.4; }
.rv-oc-err { font-size: 12px; font-weight: 600; color: #dc2626; margin: 6px 2px 0; }
.rv-oc-inrow { display: flex; gap: 8px; margin-top: 10px; }
.rv-oc-inrow .rv-oc-in { flex: 1; min-width: 0; text-transform: uppercase; }
.rv-oc-inrow .rv-oc-in::placeholder { text-transform: none; }
.rv-oc-inrow .rv-oc-btn2 { flex-shrink: 0; }
.rv-oc-tiket { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1.5px dashed #16a34a; border-radius: 16px; }
.rv-oc-tiket > i { font-size: 22px; color: #16a34a; flex-shrink: 0; }
.rv-oc-tiket .rv-oc-cta { width: auto; min-height: 44px; margin: 0; padding: 0 16px; font-size: 13.5px; flex-shrink: 0; }
.rv-oc-kode { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 800; color: #111827; overflow-wrap: anywhere; }
.rv-oc-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.rv-oc-kvs { padding-top: 6px; }
.rv-oc-kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; color: #6b7280; }
.rv-oc-kv b { color: #111827; font-weight: 600; text-align: right; word-break: break-all; }
.rv-oc-kv b.hijau { color: #16a34a; }
.rv-oc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px dashed #e5e7eb; }
.rv-oc-total span { font-size: 13.5px; font-weight: 700; color: #374151; }
.rv-oc-total b, .rv-oc-big { font-size: 24px; font-weight: 800; color: #111827; letter-spacing: -.01em; }
.rv-oc-qr { text-align: center; }
.rv-oc-qrwrap { display: inline-block; margin: 12px auto; padding: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; max-width: 100%; box-sizing: border-box; }
.rv-oc-qrwrap img { width: 220px; height: 220px; max-width: 100%; display: block; }
.rv-oc-sim { width: 220px; height: 220px; max-width: 100%; border: 2px dashed #d1d5db; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 12px; font-weight: 700; }
.rv-oc-timer { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: #dcfce7; color: #15803d; }
.rv-oc-timer.warn { background: #fef9c3; color: #a16207; }
.rv-oc-timer.urgent { background: #fee2e2; color: #dc2626; animation: rvOcPulse 1s ease-in-out infinite; }
.rv-oc-timer.habis { background: #f3f4f6; color: #6b7280; animation: none; }
@keyframes rvOcPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.rv-oc-steps { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 12px; text-align: left; }
.rv-oc-steps span { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #374151; line-height: 1.4; }
.rv-oc-steps b { width: 22px; height: 22px; border-radius: 50%; background: #f3f4f6; color: #374151; font-size: 11.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rv-oc-live { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; font-size: 12px; color: #6b7280; }
.rv-oc-live i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: rvOcPulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rv-oc-timer.urgent, .rv-oc-live i { animation: none; } }
.rv-oc-ref { display: block; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #9ca3af; overflow-wrap: anywhere; }
.rv-oc-done { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: #f0fdf4; color: #15803d; font-size: 12.5px; font-weight: 600; max-width: 100%; box-sizing: border-box; }
.rv-oc-done span { overflow-wrap: anywhere; }
.rv-oc-ok { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.rv-oc-ok > i { font-size: 28px; color: #16a34a; line-height: 1; }

/* Lampiran berkas (PDF / Word) */
.rv-file { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 260px; padding: 10px 12px; background: #fff; border: 1px solid #e5e7eb;
           border-radius: 14px; text-decoration: none; color: #111827; box-sizing: border-box; }
a.rv-file:hover { border-color: #16a34a; }
.rv-file > i { font-size: 26px; flex-shrink: 0; line-height: 1; }
.rv-file--pdf > i { color: #dc2626; } .rv-file--doc > i { color: #2563eb; } .rv-file--x > i { color: #6b7280; }
.rv-file-b { display: flex; flex-direction: column; min-width: 0; }
.rv-file-n { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.rv-file-t { font-size: 10.5px; font-weight: 700; color: #6b7280; letter-spacing: .04em; margin-top: 2px; }

/* Tampungan lampiran (maks 3) di atas kolom ketik */
.rv-stage { display: flex; gap: 10px; padding: 12px 16px 2px; flex-wrap: wrap; flex-shrink: 0; background: var(--chat-white, #fff); border-top: 1px solid var(--chat-gray-200, #e5e7eb); }
.rv-stage[hidden] { display: none; }
.rv-stage-i { position: relative; width: 60px; height: 60px; border-radius: 12px; border: 1px solid #e5e7eb; flex-shrink: 0; background: #f9fafb; box-sizing: border-box; }
.rv-stage-i img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 11px; }
.rv-stage-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; }
.rv-stage-doc > i { font-size: 22px; color: #dc2626; }
.rv-stage-doc > .bi-file-earmark-word { color: #2563eb; }
.rv-stage-doc span { font-size: 9.5px; color: #4b5563; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tombol x: area tap 44px, lingkarannya kecil di pojok. */
.rv-stage-x { position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; padding: 0; border: none; background: none; cursor: pointer;
              display: flex; align-items: center; justify-content: center; }
.rv-stage-x span { width: 22px; height: 22px; border-radius: 50%; background: rgba(17,24,39,.78); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }

/* v1.5: bubble pesan cepat di atas kolom ketik. Satu baris, geser ke samping
   kalau kebanyakan - teksnya gak pernah dipotong (rule 29). Tinggi 44px (rule 32c). */
.rv-starters { display: flex; gap: 8px; padding: 10px 16px 2px; overflow-x: auto; flex-shrink: 0;
               background: var(--chat-white, #fff); border-top: 1px solid var(--chat-gray-200, #e5e7eb);
               scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rv-starters::-webkit-scrollbar { display: none; }
.rv-starters[hidden] { display: none; }
.rv-starter { flex-shrink: 0; white-space: nowrap; min-height: 44px; padding: 0 18px; border-radius: 999px;
              border: 1.5px solid #2563eb; background: #fff; color: #2563eb; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3;
              cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.rv-starter:hover { background: #eff6ff; }
.rv-starter:active { transform: scale(.97); }
.rv-starter:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.rv-starters:not([hidden]) + .rv-chat-input-area { border-top: none; }
.rv-stage:not([hidden]) + .rv-starters { border-top: none; }
.rv-stage:not([hidden]) + .rv-starters[hidden] + .rv-chat-input-area { border-top: none; }

/* Kolom ketik dikunci (kotak pilih pesanan nunggu dipencet) */
.rv-chat-input:disabled { opacity: .6; cursor: not-allowed; }
.rv-chat-attach-btn.rv-locked { opacity: .45; pointer-events: none; }

/* Dark mode kartu */
.dark .rv-rc, .dark .rv-pk-i, .dark .rv-tbtn, .dark .rv-oc-kartu, .dark .rv-oc-item, .dark .rv-oc-btn2, .dark .rv-oc-in,
.dark .rv-oc-tiket, .dark .rv-file, .dark .rv-oc-qrwrap { background: #222; border-color: #2a2a2a; color: #fff; }
.dark .rv-oc-qrwrap { background: #fff; }
.dark .rv-oc-tiket { border-color: #16a34a; }
.dark .rv-oc-rak { background: #191919; }
.dark .rv-oc-kartu { box-shadow: none; }
.dark .rv-oc-kartu.ok { background: color-mix(in srgb, #34E646 10%, #191919); border-color: color-mix(in srgb, #34E646 40%, transparent); }
.dark .rv-rc-t, .dark .rv-oc-nm, .dark .rv-oc-pr, .dark .rv-oc-kode, .dark .rv-oc-total b, .dark .rv-oc-big, .dark .rv-fld b, .dark .rv-oc-kv b, .dark .rv-file-n { color: #fff; }
.dark .rv-rc-s, .dark .rv-oc-sub, .dark .rv-fld span, .dark .rv-oc-kv, .dark .rv-oc-help, .dark .rv-oc-lbl, .dark .rv-oc-total span, .dark .rv-oc-steps span,
.dark .rv-oc-trust span, .dark .rv-oc-live, .dark .rv-oc-link, .dark .rv-file-t, .dark .rv-oc-eb.abu, .dark .rv-oc-eb.kategori { color: #a3a3a3; }
.dark .rv-rc-img, .dark .rv-oc-logo, .dark .rv-pk-ic { background: #f5f5f5; }
.dark .rv-rc-img.ic, .dark .rv-oc-logo.ic, .dark .rv-pk-ic { background: #2a2a2a; color: #a3a3a3; }
.dark .rv-fld, .dark .rv-oc-line, .dark .rv-oc-total { border-color: #2a2a2a; }
.dark .rv-pk-i:hover:not(:disabled), .dark .rv-tbtn:hover:not(:disabled), .dark .rv-oc-item.on, .dark .rv-oc-item.on:hover { background: color-mix(in srgb, #34E646 12%, #222); border-color: #16a34a; }
.dark .rv-oc-item:hover:not(:disabled) { border-color: #166534; }
.dark .rv-oc-item.best { border-color: #c2410c; }
.dark .rv-oc-chk { border-color: #525252; }
.dark .rv-oc-steps b { background: #2a2a2a; color: #e5e5e5; }
.dark .rv-oc-pill, .dark .rv-oc-timer { background: color-mix(in srgb, #34E646 13%, transparent); color: #34E646; }
.dark .rv-oc-timer.warn { background: color-mix(in srgb, #F0D030 13%, transparent); color: #F0D030; }
.dark .rv-oc-timer.urgent { background: color-mix(in srgb, #FF6A56 13%, transparent); color: #FF6A56; }
.dark .rv-oc-timer.habis { background: #2a2a2a; color: #a3a3a3; }
.dark .rv-oc-done { background: color-mix(in srgb, #34E646 13%, transparent); color: #34E646; }
.dark .rv-oc-note, .dark .rv-oc-eb.hijau, .dark .rv-oc-kv b.hijau { color: #34E646; }
.dark .rv-oc-eb.oranye { color: #fb923c; } .dark .rv-oc-eb.merah, .dark .rv-oc-err { color: #FF6A56; }
.dark .rv-oc-cta:disabled { background: #2a2a2a; color: #737373; }
.dark .rv-bg-green { background: color-mix(in srgb, #34E646 13%, transparent); color: #34E646; }
.dark .rv-bg-yellow { background: color-mix(in srgb, #F0D030 13%, transparent); color: #F0D030; }
.dark .rv-bg-red { background: color-mix(in srgb, #FF6A56 13%, transparent); color: #FF6A56; }
.dark .rv-bg-gray { background: color-mix(in srgb, #A3A3A3 13%, transparent); color: #A3A3A3; }
.dark .rv-stage { background: var(--chat-surface-card, #191919); border-top-color: #2a2a2a; }
.dark .rv-stage-i { background: #222; border-color: #2a2a2a; }
.dark .rv-stage-doc span { color: #a3a3a3; }
.dark .rv-starters { background: var(--chat-surface-card, #191919); border-top-color: #2a2a2a; }
.dark .rv-starter { background: transparent; border-color: #5E9EFF; color: #5E9EFF; }
.dark .rv-starter:hover { background: color-mix(in srgb, #5E9EFF 13%, transparent); }