/* --- Konfigurasi Variabel Warna Baru (Pink, Abu, Putih) --- */
:root {
    --iic-pink-accent: #E91E63; /* Pink cerah untuk border, tombol, dan bubble user */
    --iic-pink-soft: #FCE4EC;   /* Pink sangat muda untuk hover */
    --iic-text-grey: #555555;   /* Warna teks utama (abu-abu) */
    --iic-text-light: #FFFFFF;  /* Warna teks di atas background pink */
    --iic-bg-white: #FFFFFF;    /* Background utama */
    --iic-bg-offwhite: #F8F9FA; /* Background alternatif yang sangat terang */
    --iic-border-pink: 2px solid var(--iic-pink-accent); /* Definisi border pink */
    --iic-shadow-pink: 0 5px 20px rgba(233, 30, 99, 0.25); /* Bayangan pink */
}

/* ------------------------------------- */
/* Global Reset */
/* ------------------------------------- */
#iic-chat-container * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------------- */
/* 1. Tombol Floating (Chat Icon) */
/* ------------------------------------- */

#iic-floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--iic-pink-accent); /* Pink */
    color: var(--iic-text-light); /* Icon Putih */
    border: none;
    cursor: pointer;
    box-shadow: var(--iic-shadow-pink);
    z-index: 10000;
    transition: transform 0.3s ease, background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

#iic-floating-btn:hover {
    transform: scale(1.05);
    background-color: #D81B60; /* Pink sedikit lebih gelap saat hover */
}

/* ------------------------------------- */
/* 2. Container Chat Pop-up */
/* ------------------------------------- */

#iic-chat-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 350px;
    height: 500px;
    background-color: var(--iic-bg-white); /* Background Putih */
    border-radius: 15px;
    border: var(--iic-border-pink); /* Border Pink */
    box-shadow: var(--iic-shadow-pink);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

#iic-chat-container.iic-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.95);
}

@media (max-width: 400px) {
    #iic-chat-container {
        width: 95%;
        height: 90%;
        bottom: 5%;
        right: 2.5%;
    }
}


/* ------------------------------------- */
/* 3. Header */
/* ------------------------------------- */

.iic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--iic-bg-white); /* Header Putih */
    color: var(--iic-pink-accent); /* Teks Judul Pink */
    border-bottom: var(--iic-border-pink); /* Garis pembatas Pink */
    flex-shrink: 0;
}

.iic-header-title {
    font-size: 1.2em;
    font-weight: bold;
}

.iic-header-btn {
    background: none;
    border: none;
    color: var(--iic-text-grey); /* Tombol close abu-abu */
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}
.iic-header-btn:hover {
    color: var(--iic-pink-accent);
}

/* ------------------------------------- */
/* 4. Form Registrasi */
/* ------------------------------------- */

.iic-registration-form {
    flex-grow: 1;
    display: none; /* Diatur oleh JS */
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    color: var(--iic-text-grey);
    background-color: var(--iic-bg-offwhite);
}

.iic-form-container {
    width: 100%;
    max-width: 300px;
    padding: 25px;
    background-color: var(--iic-bg-white);
    border-radius: 12px;
    border: 1px solid #e0e0e0; /* Border halus untuk form */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.iic-form-header {
    font-size: 1.1em;
    color: var(--iic-pink-accent);
    margin-bottom: 25px;
    font-weight: bold;
}

.iic-registration-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc; /* Border input abu halus */
    border-radius: 8px;
    background-color: var(--iic-bg-white);
    color: var(--iic-text-grey);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s;
}
.iic-registration-form input:focus {
    border-color: var(--iic-pink-accent); /* Highlight pink saat fokus */
}

#iic-start-chat-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background-color: var(--iic-pink-accent); /* Tombol Pink */
    color: var(--iic-text-light); /* Teks Putih */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

#iic-start-chat-btn:hover:not(:disabled) {
    background-color: #D81B60;
}

/* ------------------------------------- */
/* 5. Konten Chat & Area Pesan */
/* ------------------------------------- */

#iic-chat-content {
    display: none; /* Diatur oleh JS */
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    background-color: var(--iic-bg-offwhite); /* Latar belakang area chat sedikit abu sangat terang */
}

.iic-chat-area {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iic-message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.5;
    font-size: 0.95em;
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Bubble User (Pink Background, Teks Putih) */
.iic-user {
    align-self: flex-end;
    background-color: var(--iic-pink-accent);
    color: var(--iic-text-light);
    border-bottom-right-radius: 2px;
}

/* Bubble AI (Putih Background, Teks Abu-abu, Border Pink Tipis) */
.iic-ai {
    align-self: flex-start;
    background-color: var(--iic-bg-white);
    color: var(--iic-text-grey);
    border: 1px solid var(--iic-pink-accent); /* Border pink tipis untuk AI */
    border-bottom-left-radius: 2px;
}

.iic-message-date {
    font-size: 0.7em;
    color: #999; /* Tanggal abu-abu muda */
    margin-top: -5px;
    margin-bottom: 5px;
}
.iic-user + .iic-message-date { align-self: flex-end; margin-right: 5px; }
.iic-ai + .iic-message-date { align-self: flex-start; margin-left: 5px; }


/* Typing Indicator */
.iic-message.iic-typing-indicator {
    background-color: var(--iic-bg-white);
    color: var(--iic-text-grey);
    border: 1px solid var(--iic-pink-accent);
    font-style: italic;
    opacity: 0.8;
}

/* ------------------------------------- */
/* 7. Input Chat (Fixed Layout) */
/* ------------------------------------- */

.iic-chat-input {
    display: flex;
    padding: 15px 20px; /* Padding diperbesar agar tidak mepet ke pinggir */
    background-color: var(--iic-bg-white);
    border-top: var(--iic-border-pink);
    align-items: center;
    gap: 12px; /* Jarak pasti antara input dan tombol */
    flex-shrink: 0;
}

.iic-chat-input input {
    flex-grow: 1;
    /* Trik CSS: width 0 memaksa input patuh pada flexbox agar tidak mendorong tombol keluar */
    width: 0; 
    padding: 12px 18px;
    border: 1px solid #ccc;
    border-radius: 25px;
    background-color: var(--iic-bg-offwhite);
    color: var(--iic-text-grey);
    outline: none;
    font-size: 0.95em;
    transition: border-color 0.3s;
}

.iic-chat-input input:focus {
    border-color: var(--iic-pink-accent);
    background-color: var(--iic-bg-white);
}

.iic-send-button {
    background-color: var(--iic-pink-accent);
    color: var(--iic-text-light);
    border: none;
    width: 50px;  /* Ukuran diperbesar sedikit agar lega */
    height: 50px; /* Pastikan width & height sama agar bulat sempurna */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* PENTING: Mencegah tombol tergencet/gepeng */
    box-shadow: 0 3px 8px rgba(233, 30, 99, 0.3); /* Tambah bayangan agar tombol lebih terlihat (pop-up) */
    transition: background-color 0.2s, transform 0.2s;
    font-size: 14px; /* Ukuran font jika icon gagal load (tulisan 'send') */
    font-weight: bold;
}

.iic-send-button:hover:not(:disabled) {
    background-color: #D81B60;
    transform: scale(1.05);
}

.iic-send-button:disabled {
    background-color: #e0e0e0;
    color: #999;
    cursor: default;
    box-shadow: none;
}