/**
* Template Name: WhatsappCTA
* Updated: Jun 04 2025 with Bootstrap v5.3.3
* Author: Bieaiy.com
*/

/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/
/* Fonts */
:root {
--default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--heading-font: "Jost", sans-serif;
--nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {

--accent-color: #47b2e4; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
--cta-text-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
--whatsapp-color: #25D366;
}

/* Smooth scroll */
:root {
scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# CTA Button
--------------------------------------------------------------*/
@keyframes skewInOut {
0% { transform: rotate(-180deg); opacity: 0; }
10% { transform: rotate(0); opacity: 1; }
90% { transform: rotate(0); opacity: 1; }
100% { transform: rotate(180deg); opacity: 0; }
}

.scroll-cta-cus {
position: fixed;
visibility: hidden;
opacity: 0;
left: 15px;
bottom: -15px;
z-index: 2000;
background-color: var(--whatsapp-color);
width: 44px;
height: 44px;
border-radius: 50px;
transition: all 0.4s;
animation: skewInOut 20s ease-in-out infinite;
}

.scroll-cta-cus i {
font-size: 24px;
color: var(--cta-text-color);
line-height: 0;
}

.scroll-cta-cus:hover,
.scroll-cta-cus:hover span {
background-color: var(--accent-color);
color: var(--cta-text-color);
}


.scroll-cta-cus.active {
visibility: visible;
opacity: 1;
bottom: 15px;
}

/* Animasi teks muncul */
@keyframes flipInOut {
0% { transform: rotateY(180deg); opacity: 0; }
10% { transform: rotateY(0); opacity: 1; }
90% { transform: rotateY(0); opacity: 1; }
100% { transform: rotateY(-180deg); opacity: 0; }
}

.scroll-cta-cus span {
font-size: 13px;
font-weight: bold;
color: var(--cta-text-color);
white-space: nowrap;
position: absolute;
opacity: 1;
left: 45px;
bottom: 9px;
z-index: 2000;
width: 85px;
height: 25px;
border-radius: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.4s;
animation: flipInOut 10s ease-in-out infinite;
}

/* Tampilkan teks saat tombol aktif */

/* Sembunyikan scrollbar tapi tetap bisa scroll */
#chat-container::-webkit-scrollbar {
width: 4px;
}
#chat-container::-webkit-scrollbar-thumb {
background: #e0e0e0;
border-radius: 10px;
}

.chat-message {
max-width: 85%;
display: flex;
flex-direction: column;
animation: fadeIn 0.3s ease;
}

.message-content {
font-size: 0.92rem;
line-height: 1.4;
}

/* Style khusus Bot (Kiri) */
.chat-message.bot .message-content {
border-bottom-left-radius: 2px !important;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}

/* Style khusus User (Kanan) */
.chat-message.user .message-content {
border-bottom-right-radius: 2px !important;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
}

.chat-time {
font-size: 0.7rem;
margin-top: 4px;
display: block;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

/* Efek fokus pada input */
.form-control:focus {
box-shadow: none;
border-color: #0d6efd;
}