/* =====================================================
SITAPPA – Asisten Virtual AI PN Belopa
===================================================== */
:root {
--sitappa-primary: #9a2109;
--sitappa-dark: #7a1a07;
--sitappa-light: #c42d0d;
--sitappa-shadow: rgba(154, 33, 9, 0.45);
}
/* ── Saat chat terbuka, sembunyikan floating widget lain ──
Kelas `sitappa-chat-open` di-toggle ke oleh sitappa-widget.js
saat window dibuka/ditutup. `.uwy` = UserWay (vendor class). */
body.sitappa-chat-open .back-to-top,
body.sitappa-chat-open .uwy,
body.sitappa-chat-open [class*="whatsapp"],
body.sitappa-chat-open [class*="accessibility"],
body.sitappa-chat-open [id*="whatsapp"],
body.sitappa-chat-open [id*="accessibility"] {
opacity: 0;
pointer-events: none;
}
/* ── Container ──
bottom/right diisi via CSS custom property dari inline style (di-set oleh
Twig dari CMS settings). Fallback 20px/30px bila vars tidak ter-set. */
.sitappa-widget {
position: fixed;
bottom: var(--sitappa-pos-bottom, 20px);
right: var(--sitappa-pos-right, 30px);
z-index: 9000;
width: 50px;
font-family: 'Segoe UI', Arial, sans-serif;
}
/* ── Floating Action Button ── */
.sitappa-fab {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--sitappa-dark) 0%, var(--sitappa-primary) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px var(--sitappa-shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
animation: sitappa-pulse 2.5s infinite;
position: relative;
user-select: none;
}
.sitappa-fab:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(224, 123, 0, 0.6);
animation: none;
}
.sitappa-fab.is-open {
animation: none;
transform: scale(0.92);
}
.sitappa-fab-icon svg { width: 26px; height: 26px; }
/* aiBot.svg icon — invert to white for all colored backgrounds */
.sitappa-bot-img {
filter: brightness(0) invert(1);
display: block;
}
.sitappa-fab-icon .sitappa-bot-img { width: 28px; height: 28px; }
.sitappa-header-avatar .sitappa-bot-img { width: 28px; height: 28px; }
.sitappa-sender-avatar .sitappa-bot-img { width: 22px; height: 22px; }
.sitappa-notif-avatar .sitappa-bot-img { width: 22px; height: 22px; }
@keyframes sitappa-pulse {
0%, 100% { box-shadow: 0 4px 16px var(--sitappa-shadow); }
50% { box-shadow: 0 4px 26px rgba(224, 123, 0, 0.7); }
}
/* ── Chat Window ── */
.sitappa-window {
position: absolute;
bottom: 66px;
right: 0;
width: 340px;
background: #f5f6fa;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(0.95);
transform-origin: bottom right;
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
}
.sitappa-window.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* ── Header ── */
.sitappa-header {
background: linear-gradient(135deg, var(--sitappa-dark) 0%, var(--sitappa-primary) 60%, var(--sitappa-light) 100%);
color: white;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.sitappa-header-avatar {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 2px solid rgba(255,255,255,0.25);
}
.sitappa-header-avatar svg { width: 28px; height: 28px; }
.sitappa-header-info { flex: 1; min-width: 0; }
.sitappa-header-name {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.4px;
}
.sitappa-header-sub {
font-size: 11px;
opacity: 0.85;
margin-top: 2px;
display: flex;
align-items: center;
gap: 4px;
}
.sitappa-online-dot {
width: 7px;
height: 7px;
background: #2ecc71;
border-radius: 50%;
flex-shrink: 0;
animation: online-blink 2s infinite;
}
@keyframes online-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.sitappa-close-btn {
background: transparent;
border: none;
color: rgba(255,255,255,0.8);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
border-radius: 6px;
transition: color 0.2s, background 0.2s;
flex-shrink: 0;
}
.sitappa-close-btn:hover {
color: white;
background: rgba(255,255,255,0.15);
}
/* ── Body (messages) ── */
.sitappa-body {
flex: 1;
overflow-y: auto;
padding: 14px 12px 8px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 180px;
/* Cap di 320px — ukuran popup tetap kecil & konsisten antara mode form
dan mode chat. Konten yg melebihi akan scroll dalam body. */
max-height: 320px;
scroll-behavior: smooth;
}
.sitappa-body::-webkit-scrollbar { width: 4px; }
.sitappa-body::-webkit-scrollbar-track { background: transparent; }
.sitappa-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
/* ── Messages ── */
.sitappa-msg {
display: flex;
flex-direction: column;
max-width: 88%;
animation: msg-in 0.2s ease;
}
@keyframes msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.sitappa-msg--ai { align-self: flex-start; align-items: flex-start; }
.sitappa-msg--user { align-self: flex-end; align-items: flex-end; }
/* ── Sender info (AI only) ── */
.sitappa-sender {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.sitappa-sender-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--sitappa-dark), var(--sitappa-primary));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sitappa-sender-avatar svg { width: 18px; height: 18px; }
.sitappa-sender-info {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.sitappa-sender-info strong {
font-size: 12px;
font-weight: 700;
color: #2c2c2c;
}
.sitappa-sender-info span {
font-size: 10px;
color: #999;
}
.sitappa-bubble {
padding: 9px 13px;
border-radius: 14px;
font-size: 13px;
line-height: 1.55;
word-break: break-word;
white-space: pre-wrap;
}
.sitappa-msg--ai .sitappa-bubble {
background: white;
color: #2c2c2c;
border-radius: 3px 14px 14px 14px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.sitappa-msg--user .sitappa-bubble {
background: var(--sitappa-primary);
color: white;
border-radius: 14px 14px 3px 14px;
}
.sitappa-time {
font-size: 10px;
color: #aaa;
margin-top: 3px;
padding: 0 3px;
}
/* ── Typing indicator ── */
.sitappa-typing {
padding: 4px 12px 8px;
align-self: flex-start;
}
.sitappa-bubble--typing {
background: white;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 10px 14px;
border-radius: 3px 14px 14px 14px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.sitappa-bubble--typing span {
width: 7px;
height: 7px;
background: var(--sitappa-primary);
border-radius: 50%;
animation: typing-dot 1.2s infinite;
opacity: 0.4;
}
.sitappa-bubble--typing span:nth-child(2) { animation-delay: 0.2s; }
.sitappa-bubble--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-5px); opacity: 1; }
}
/* ── Suggestion Buttons — horizontal scroll 1 baris ── */
.sitappa-suggestions {
display: flex;
flex-wrap: nowrap;
gap: 8px;
padding: 8px 0 4px;
overflow-x: auto;
overflow-y: hidden;
/* Sembunyikan scrollbar tapi tetap bisa scroll/swipe */
scrollbar-width: none;
-ms-overflow-style: none;
}
.sitappa-suggestions::-webkit-scrollbar { display: none; }
.sitappa-suggestion {
flex-shrink: 0;
background: white;
border: 1.5px solid var(--sitappa-primary);
color: var(--sitappa-primary);
border-radius: 14px;
padding: 5px 12px;
font-size: 11.5px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.sitappa-suggestion:hover {
background: var(--sitappa-primary);
color: white;
}
/* ── Footer (input) ── */
.sitappa-footer {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 10px 12px;
background: white;
border-top: 1px solid #eaecef;
flex-shrink: 0;
}
.sitappa-input {
flex: 1;
border: 1.5px solid #dde1e7;
border-radius: 20px;
padding: 8px 14px;
font-size: 13px;
font-family: inherit;
resize: none;
outline: none;
line-height: 1.4;
max-height: 100px;
overflow-y: auto;
transition: border-color 0.2s;
color: #333;
}
.sitappa-input:focus { border-color: #dde1e7; }
.sitappa-input::placeholder { color: #b0b8c1; }
.sitappa-input:disabled {
background: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
border-color: #e5e7eb;
}
.sitappa-send-btn {
width: 36px;
height: 36px;
background: var(--sitappa-primary);
border: none;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
flex-shrink: 0;
}
.sitappa-send-btn:hover { background: var(--sitappa-dark); transform: scale(1.08); }
.sitappa-send-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }
/* ── Notification Popup ── */
.sitappa-notif {
position: absolute;
top: 50%;
bottom: auto;
right: 60px;
transform: translateX(8px) translateY(-50%) scale(0.95);
width: 260px;
background: white;
border-radius: 20px;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.18));
padding: 12px 10px 12px 12px;
display: flex;
align-items: flex-start;
gap: 10px;
opacity: 0;
visibility: hidden;
transform-origin: right center;
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
cursor: pointer;
}
.sitappa-notif.is-visible {
opacity: 1;
visibility: visible;
transform: translateX(0) translateY(-50%) scale(1);
}
.sitappa-notif::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
background: white;
transform: rotate(45deg);
border-radius: 2px;
}
.sitappa-notif-avatar {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--sitappa-dark), var(--sitappa-primary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sitappa-notif-avatar svg { width: 22px; height: 22px; }
.sitappa-notif-avatar .sitappa-bot-img { width: 22px; height: 22px; }
.sitappa-notif-content { flex: 1; min-width: 0; }
.sitappa-notif-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.sitappa-notif-sender {
font-size: 12px;
font-weight: 700;
color: var(--sitappa-primary);
}
.sitappa-notif-time {
font-size: 10px;
color: #bbb;
}
.sitappa-notif-text {
font-size: 12px;
line-height: 1.5;
color: #333;
word-break: break-word;
}
.sitappa-wave-hand {
display: inline-block;
font-size: 14px;
transform-origin: 70% 70%;
animation: sitappa-wave 2s ease-in-out 3;
}
@keyframes sitappa-wave {
0% { transform: rotate(0deg); }
10% { transform: rotate(18deg); }
20% { transform: rotate(-8deg); }
30% { transform: rotate(18deg); }
40% { transform: rotate(-4deg); }
50% { transform: rotate(12deg); }
60% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
.sitappa-notif-close {
background: none;
border: none;
color: #bbb;
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 2px;
flex-shrink: 0;
align-self: flex-start;
transition: color 0.2s;
}
.sitappa-notif-close:hover { color: #555; }
/* ── Badge ── */
.sitappa-badge {
position: absolute;
top: -5px;
right: -5px;
width: 18px;
height: 18px;
background: #ff3b30;
color: white;
font-size: 10px;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
animation: badge-pulse 1.5s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
.sitappa-badge.is-hidden { display: none; }
@keyframes badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.3); }
}
/* ── Form biodata inline sebagai chat bubble ── */
/* Bubble form full width supaya form muat — override default AI bubble */
#sitappa-register-bubble {
max-width: 95%;
align-self: stretch;
}
.sitappa-bubble--form {
padding: 10px 12px;
border-radius: 3px 14px 14px 14px;
/* Override `white-space: pre-wrap` dari .sitappa-bubble (yg dipakai utk text
message biasa). Tanpa override, whitespace/newline di HTML antara ,