/* ============================================
   YAMANARA LUXURY CHATBOX - STYLE
   ============================================ */
#yamanara-chatbox-wrapper * { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }

/* Tombol Toggle */
.yamanara-toggle-btn {
    position: fixed;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6a00 0%, #ff8c00 100%);
    border: 3px solid #FFFFFF;
    box-shadow: 0 8px 28px rgba(255,106,0,0.45), 0 4px 12px rgba(255,140,0,0.25), inset 0 2px 4px rgba(255,255,255,0.3);
    color: #FFFFFF; cursor: pointer; z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
.yamanara-toggle-btn.pos-bottom-right { bottom: 24px; right: 24px; }
.yamanara-toggle-btn.pos-bottom-left  { bottom: 24px; left: 24px; }
.yamanara-toggle-btn.pos-top-right    { top: 24px; right: 24px; }
.yamanara-toggle-btn.pos-top-left     { top: 24px; left: 24px; }
.yamanara-toggle-btn.pos-custom       { bottom: 24px; right: 24px; touch-action: none; }

.yamanara-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 12px 36px rgba(255,106,0,0.55); }
.yamanara-toggle-btn:active { transform: scale(0.95); }
.yamanara-toggle-btn.dragging { transition: none; opacity: 0.85; cursor: grabbing; }

.yamanara-toggle-icon { display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }
.yamanara-pulse {
    position:absolute; width:100%; height:100%; border-radius:50%;
    background: rgba(255,106,0,0.4);
    animation: yamanara-pulse 2s infinite; z-index:1;
}
@keyframes yamanara-pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(0.9); opacity: 0; }
}

/* Chatbox Container */
.yamanara-chatbox {
    position: fixed;
    width: 400px; max-width: calc(100vw - 32px);
    height: 620px; max-height: calc(100vh - 120px);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFAF5 100%);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 8px 24px rgba(255,106,0,0.12), 0 0 0 1px rgba(255,106,0,0.08);
    display: none; flex-direction: column; overflow: hidden; z-index: 999998;
    opacity: 0; transform: translateY(20px) scale(0.95);
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.yamanara-chatbox.pos-bottom-right { bottom: 100px; right: 24px; }
.yamanara-chatbox.pos-bottom-left  { bottom: 100px; left: 24px; }
.yamanara-chatbox.pos-top-right    { top: 100px; right: 24px; }
.yamanara-chatbox.pos-top-left     { top: 100px; left: 24px; }
.yamanara-chatbox.pos-custom       { bottom: 100px; right: 24px; }

.yamanara-chatbox.active { display: flex; opacity: 1; transform: translateY(0) scale(1); }

/* Header */
.yamanara-chat-header {
    background: linear-gradient(135deg, #ff6a00 0%, #ff8c00 100%);
    padding: 18px 20px; display: flex; justify-content: space-between; align-items: center;
    position: relative; overflow: hidden;
}
.yamanara-chat-header::before {
    content:''; position:absolute; top:-50%; right:-20%; width:200px; height:200px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); border-radius:50%;
}
.yamanara-brand { display:flex; align-items:center; gap:14px; position:relative; z-index:2; }
.yamanara-logo {
    width:44px; height:44px; border-radius:14px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF0E0 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.8);
}
.yamanara-logo-text {
    font-size:22px; font-weight:800;
    background: linear-gradient(135deg, #ff6a00 0%, #ff8c00 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.yamanara-brand-info { display:flex; flex-direction:column; gap:2px; }
.yamanara-brand-name { color:#FFFFFF; font-size:17px; font-weight:700; }
.yamanara-status { display:flex; align-items:center; gap:6px; }
.yamanara-status-dot { width:8px; height:8px; border-radius:50%; background:#00E676; box-shadow:0 0 8px rgba(0,230,118,0.8); animation:yamanara-blink 1.5s infinite; }
@keyframes yamanara-blink { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.yamanara-status-text { color:rgba(255,255,255,0.92); font-size:12px; font-weight:500; }
.yamanara-status-text.offline { color:rgba(255,255,255,0.75); }
.yamanara-status-dot.offline { background:#BDBDBD; box-shadow:none; animation:none; }

.yamanara-close-btn {
    background:rgba(255,255,255,0.2); border:none; color:#FFFFFF;
    width:34px; height:34px; border-radius:10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.25s ease; position:relative; z-index:2; backdrop-filter:blur(4px);
}
.yamanara-close-btn:hover { background:rgba(255,255,255,0.35); transform:rotate(90deg); }

/* Body */
.yamanara-chat-body {
    flex:1; padding:18px 16px; overflow-y:auto;
    background: linear-gradient(180deg, #FFFAF5 0%, #FFFFFF 100%);
    scroll-behavior: smooth;
}
.yamanara-chat-body::-webkit-scrollbar { width:6px; }
.yamanara-chat-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#FFB366 0%,#ff8c00 100%); border-radius:3px; }

/* Pesan */
.yamanara-message { display:flex; gap:10px; margin-bottom:16px; animation:yamanara-slide-in 0.35s ease; }
@keyframes yamanara-slide-in { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
.yamanara-message-bot { justify-content:flex-start; }
.yamanara-message-user { justify-content:flex-end; flex-direction:row-reverse; }

.yamanara-avatar-bot {
    width:34px; height:34px; border-radius:12px;
    background: linear-gradient(135deg, #ff6a00 0%, #ff8c00 100%);
    color:#FFFFFF; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 3px 8px rgba(255,106,0,0.3);
}
.yamanara-bubble { max-width:78%; padding:12px 16px; border-radius:18px; font-size:14px; line-height:1.55; position:relative; }
.yamanara-bubble-bot {
    background:linear-gradient(135deg,#FFFFFF 0%,#FFF8F0 100%); color:#2D3748;
    border-top-left-radius:6px;
    box-shadow:0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,106,0,0.08);
}
.yamanara-bubble-user {
    background:linear-gradient(135deg,#ff6a00 0%,#ff8c00 100%); color:#FFFFFF;
    border-top-right-radius:6px;
    box-shadow:0 3px 12px rgba(255,106,0,0.35), 0 1px 3px rgba(255,140,0,0.2);
}
.yamanara-bubble-text { margin:0; word-wrap:break-word; }
.yamanara-bubble-text strong { color:#ff6a00; font-weight:700; }
.yamanara-bubble-user .yamanara-bubble-text strong { color:#FFFFFF; }

/* Divisi List */
.yamanara-division-list { margin-top:8px; display:flex; flex-direction:column; gap:10px; }
.yamanara-division-item {
    background:linear-gradient(135deg,#FFFFFF 0%,#FFFAF5 100%);
    border:1.5px solid rgba(255,106,0,0.15); border-radius:16px;
    padding:14px 18px; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.yamanara-division-item:hover {
    border-color:#ff6a00; background:linear-gradient(135deg,#FFF5EB 0%,#FFE8D6 100%);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,106,0,0.18), 0 2px 6px rgba(255,140,0,0.1);
}
.yamanara-division-item.offline { opacity:0.5; cursor:not-allowed; }
.yamanara-division-left { display:flex; align-items:center; gap:12px; }
.yamanara-division-icon {
    width:42px; height:42px; border-radius:12px;
    background:linear-gradient(135deg,#ff6a00 0%,#ff8c00 100%);
    color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-size:20px;
    box-shadow:0 3px 10px rgba(255,106,0,0.3);
}
.yamanara-division-info h4 { color:#1A202C; font-size:15px; font-weight:700; margin:0 0 2px 0; }
.yamanara-division-info span { color:#718096; font-size:12px; font-weight:500; }
.yamanara-division-arrow { color:#ff6a00; display:flex; align-items:center; transition:transform 0.25s ease; }
.yamanara-division-item:hover .yamanara-division-arrow { transform:translateX(4px); }

/* Agen List */
.yamanara-agent-list { margin-top:8px; }
.yamanara-back-btn {
    display:inline-flex; align-items:center; gap:6px; background:transparent; border:none;
    color:#ff6a00; font-size:13px; font-weight:600; cursor:pointer;
    padding:6px 10px; border-radius:8px; margin-bottom:12px; transition:all 0.2s ease;
}
.yamanara-back-btn:hover { background:#FFF0E0; }

.yamanara-transfer-btn {
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg,#ff6a00 0%,#ff8c00 100%); color:#fff; border:none;
    font-size:12px; font-weight:600; cursor:pointer; padding:8px 14px; border-radius:20px;
    margin-bottom:14px; transition:all 0.2s ease;
    box-shadow:0 3px 10px rgba(255,106,0,0.3);
}
.yamanara-transfer-btn:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(255,106,0,0.4); }

.yamanara-agent-items { display:flex; flex-direction:column; gap:8px; }
.yamanara-agent-item {
    background:#FFFFFF; border:1.5px solid rgba(255,106,0,0.1); border-radius:14px;
    padding:12px 14px; cursor:pointer; display:flex; align-items:center; gap:12px;
    transition:all 0.25s ease;
}
.yamanara-agent-item:hover {
    border-color:#ff6a00; background:#FFF8F0; transform:translateX(4px);
    box-shadow:0 4px 14px rgba(255,106,0,0.12);
}
.yamanara-agent-item.offline { opacity:0.45; cursor:not-allowed; }
.yamanara-agent-item.offline:hover { transform:none; background:#FFFFFF; border-color:rgba(255,106,0,0.1); }

.yamanara-agent-avatar {
    width:40px; height:40px; border-radius:50%;
    background:linear-gradient(135deg,#ff6a00 0%,#ff8c00 100%);
    color:#FFFFFF; font-weight:700; font-size:15px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 2px 8px rgba(255,106,0,0.25);
}
.yamanara-agent-info { flex:1; min-width:0; }
.yamanara-agent-name { color:#1A202C; font-size:14px; font-weight:600; margin:0 0 2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yamanara-agent-jabatan { color:#718096; font-size:11.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yamanara-agent-wa { color:#25D366; font-size:18px; flex-shrink:0; }
.yamanara-online-badge {
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:#00E676; margin-right:6px;
}
.yamanara-online-badge.offline { background:#BDBDBD; }

/* Agen Terpilih */
.yamanara-agent-selected {
    background:linear-gradient(135deg,#FFF5EB 0%,#FFE8D6 100%);
    border:1.5px solid rgba(255,106,0,0.2); border-radius:14px;
    padding:12px 14px; margin-bottom:14px;
}
.yamanara-agent-mini { display:flex; align-items:center; gap:12px; }
.yamanara-agent-avatar-mini {
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg,#ff6a00 0%,#ff8c00 100%);
    color:#FFFFFF; font-weight:700; font-size:17px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(255,106,0,0.3);
}
.yamanara-agent-info-mini { flex:1; }
.yamanara-agent-name-mini { color:#1A202C; font-size:15px; font-weight:700; margin:0 0 2px 0; }
.yamanara-agent-jabatan-mini { color:#ff6a00; font-size:12px; font-weight:600; }

.yamanara-chat-messages { display:flex; flex-direction:column; gap:12px; }

/* Input */
.yamanara-chat-input {
    padding:14px 16px;
    background:linear-gradient(180deg,#FFFFFF 0%,#FFFAF5 100%);
    border-top:1.5px solid rgba(255,106,0,0.1);
}
.yamanara-input-wrapper {
    display:flex; align-items:center; gap:10px; background:#FFFFFF;
    border:1.5px solid rgba(255,106,0,0.2); border-radius:28px;
    padding:6px 6px 6px 18px; transition:all 0.25s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.yamanara-input-wrapper:focus-within {
    border-color:#ff6a00;
    box-shadow:0 0 0 3px rgba(255,106,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
}
.yamanara-input { flex:1; border:none; outline:none; font-size:14px; color:#1A202C; background:transparent; padding:8px 0; }
.yamanara-input::placeholder { color:#A0AEC0; }
.yamanara-send-btn {
    width:40px; height:40px; border-radius:50%;
    background:linear-gradient(135deg,#ff6a00 0%,#ff8c00 100%);
    border:none; color:#FFFFFF; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.25s ease;
    box-shadow:0 3px 10px rgba(255,106,0,0.35); flex-shrink:0;
}
.yamanara-send-btn:hover { transform:scale(1.08); box-shadow:0 5px 16px rgba(255,106,0,0.45); }
.yamanara-send-btn:active { transform:scale(0.92); }
.yamanara-powered { text-align:center; margin-top:10px; }
.yamanara-powered span { color:#A0AEC0; font-size:11px; font-weight:500; font-style:italic; }

/* WA Notice */
.yamanara-wa-notice {
    background:linear-gradient(135deg,#DCFCE7 0%,#BBF7D0 100%);
    border:1px solid #86EFAC; border-radius:12px;
    padding:10px 14px; margin-top:10px; display:flex; align-items:center; gap:8px;
    font-size:12px; color:#166534; font-weight:500;
}
.yamanara-wa-notice svg { color:#22C55E; flex-shrink:0; }

/* Offline Notice */
.yamanara-offline-notice {
    background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);
    border:1px solid #FCD34D; border-radius:14px;
    padding:14px 18px; margin:10px 0;
    color:#92400E; font-size:13px; font-weight:500;
    display:flex; align-items:flex-start; gap:10px;
}

/* Animasi */
.yamanara-fade-in { animation:yamanara-fade-in 0.3s ease; }
@keyframes yamanara-fade-in { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .yamanara-toggle-btn { width:58px; height:58px; }
    .yamanara-toggle-btn.pos-bottom-right { bottom:18px; right:18px; }
    .yamanara-toggle-btn.pos-bottom-left  { bottom:18px; left:18px; }
    .yamanara-toggle-btn.pos-top-right    { top:18px; right:18px; }
    .yamanara-toggle-btn.pos-top-left     { top:18px; left:18px; }

    .yamanara-chatbox {
        position:fixed; top:0; left:0; right:0; bottom:0;
        width:100%; height:100%; max-width:100%; max-height:100%;
        border-radius:0;
    }
    .yamanara-chat-header { padding:20px 18px; padding-top:calc(20px + env(safe-area-inset-top)); }
    .yamanara-chat-body { padding:16px 14px; }
    .yamanara-chat-input { padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
    .yamanara-bubble { max-width:85%; }
}