/* CSS Dasar & Variabel */
:root {
    --bg-color: #1a1a2e;
    --chat-bg: #16213e;
    --text-color: #ffffff;
    --sent-msg: #4ecca3;
    --received-msg: #30475e;
    --input-bg: #0f3460;
    --accent-color: #007bff;
    --error-color: #ff4a5a;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 1; 
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
}

body {
    height:100%;
    max-height:100%; 
    display: flex; 
    flex-direction: column; 
    background: url(https://wt.irianflow.com/assets/img/bg.jpg) !important;
    background-size: 100% !important;
    color: #000000; 
    overflow: hidden;
}

#welcome-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url(https://wt.irianflow.com/assets/img/bg.jpg) !important; background-size: 100% !important; padding: 20px; display: flex;
    flex-direction: column; gap: 15px; overflow-y: auto; z-index: 10;
}
/*
body { 
    height: 94vh;
    
    display: flex; 
    flex-direction: column; 
    background: var(--bg-color); 
    color: var(--text-color); 
    overflow: hidden;
    position: relative;
}

#welcome-screen {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: var(--bg-color); 
    padding: 20px; 
    display: flex;
    flex-direction: column; 
    gap: 15px; 
    overflow-y: auto; 
    z-index: 10;
}
*/

.promo-card { background: linear-gradient(180deg, #dbdbdb 0%, #ffffff 22%, #c3c3c3 55%, #9a9a9a 100%) !important; padding: 15px; border-radius: 10px; border-left: 4px solid #ffffff; }
.promo-card h3 { color: var(--sent-msg); margin-bottom: 5px; }
.promo-card p { font-size: 12px; color: #000000; padding: 5px; }
.promo-card b { font-size: 15px; color: #000000; padding: 5px; text-align: center; }

.form-group { background: linear-gradient(180deg, #dbdbdb 0%, #9a9a9a 22%, #c3c3c3 55%, #ffffff 100%) !important; padding: 20px; border-radius: 10px; display: flex; flex-direction: column; gap: 15px; }
.form-group label { font-weight: bold; font-size: 14px; }
.form-group input[type="text"] {
    width: 100%; padding: 12px; background: #ffffff; margin-top: 5px;
    border: 1px solid #000000; border-radius: 5px; color: #000000; outline: none;
}

.checkbox-group { display: flex; flex-direction: column; gap: 8px; margin-top: 5px; }
.checkbox-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }

.error-message { color: var(--error-color); font-size: 12px; margin-top: 5px; display: none; }

#start-chat-btn {
    width: 100%; padding: 12px; background: linear-gradient(180deg, #c3c3c3 0%, #dbdbdb 22%, #ffffff 55%, #9a9a9a 100%) !important;
    color: #000000; border: 1px solid #ffffff; border-radius: 5px; font-weight: bold; cursor: pointer; font-size: 16px; margin-top: 10px;
}
#start-chat-btn:hover { opacity: 0.9; }

/* 2. HEADER AGEN */
#agent-header {
    background: url(https://wt.irianflow.com/assets/img/line.jpg) !important; background-size: 200% 200% !important; padding: 12px 20px;
    display: none; align-items: center; gap: 12px;
    border-bottom: 1px solid #ffffff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 5;
}

.avatar-container { position: relative; width: 40px; height: 40px; }
.agent-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #30475e; }
.status-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 10px; height: 10px; background: #4ecca3;
    border-radius: 50%; border: 2px solid var(--chat-bg);
}

.agent-info .agent-name { font-weight: bold; font-size: 15px; }
.agent-info .agent-status { font-size: 12px; color: #ff0000; }

/* 3. INTERFASE CHAT (UTAMA) */
#chat-window {
    flex: 1; padding: 20px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 15px; display: none;
}

.message-wrapper { display: flex; flex-direction: column; max-width: 75%; }
.sent-wrapper { align-self: flex-end; align-items: flex-end; }
.received-wrapper { align-self: flex-start; align-items: flex-start; }

.message { padding: 12px 18px; border-radius: 15px; line-height: 1.4; width: 100%; word-wrap: break-word; font-size: 14px; position: relative;}
.received { background: #c3c3c3; border-top-left-radius: 2px; }
.sent { background: #ffffff; color: #000; border-bottom-right-radius: 2px; }

/* KUNCI PERBAIKAN: Mengikuti ukuran container pesan */
.message img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 8px !important;
    cursor: pointer;
}

.msg-status { font-size: 11px; color: #aaa; margin-top: 4px; }

/* 4. AREA INPUT CHAT */
#input-area {
    /*position:fixed;
    width:100%;
    bottom:0;
    */
    padding: 15px; background: url(https://wt.irianflow.com/assets/img/line.jpg) !important; background-size: 200% 200% !important;
    border-top: 1px solid #ffffff; display: none; align-items: center; gap: 10px;
}

#text-input { 
    flex: 1; padding: 12px; background: #ffffff; 
    border: 1px solid #000000; border-radius: 25px; color: #000000; outline: none;
}

.icon-btn { cursor: pointer; font-size: 20px; color: #aaa; }
.icon-btn:hover { color: white; }
#send-btn { 
    padding: 10px 20px; background: linear-gradient(180deg, #c3c3c3 0%, #dbdbdb 22%, #ffffff 55%, #9a9a9a 100%) !important; color: #000000;
    border: 1px solid #000000; border-radius: 20px; cursor: pointer; font-weight: bold;
}

/* 5. ANIMASI PRELOAD SKELETON (SHIMMER) */
.img-preload-box {
    position: relative !important;
    width: 100% !important;
    min-width: 200px;
    height: 180px !important; /* Tinggi default placeholder */
    background: #253346 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 5px;
}

/* Efek Sapuan Cahaya Bergerak */
.img-preload-box::after {
    content: "" !important;
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: linear-gradient(
        90deg, 
        rgba(255,255,255, 0) 0%, 
        rgba(255,255,255, 0.08) 20%, 
        rgba(255,255,255, 0.15) 60%, 
        rgba(255,255,255, 0) 100%
    ) !important;
    transform: translateX(-100%);
    animation: shimmerWave 1.5s infinite;
}

@keyframes shimmerWave {
    100% { transform: translateX(100%); }
}

/* Sembunyikan gambar asli sebelum termuat utuh */
.img-preload-box img {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* 3. INTERFASE CHAT (UTAMA) */
#chat-window {
    flex: 1; 
    padding: 12px 15px; /* Mengurangi padding luar container chat */
    overflow-y: auto;
    display: flex; 
    flex-direction: column; 
    gap: 10px; /* Mempersempit jarak antar balon chat (sebelumnya 15px) */
    display: none;
}

/* Mengurangi padding balon pesan agar lebih hemat ruang */
.message { 
    padding: 8px 12px; /* Diperkecil (sebelumnya 12px 18px) */
    border-radius: 12px; /* Menyesuaikan agar proporsional dengan padding baru */
    line-height: 1.3; 
    width: 100%; 
    word-wrap: break-word;
    font-size: 14px; 
    position: relative;
}

/* Memastikan teks caption pada pesan keluar (sent) tetap rata kiri & warna sesuai */
.message.sent .chat-caption {
    color: #000000 !important;
    text-align: left !important;
}

.message.received .chat-caption {
    color: #ffffff !important;
    text-align: left !important;
}

/* Menyesuaikan margin status jam agar tidak terlalu renggang */
.msg-status { 
    font-size: 10px; 
    color: #aaa; 
    margin-top: 2px; 
}

/* 5. ANIMASI PRELOAD SKELETON (SHIMMER) */
.img-preload-box {
    position: relative !important;
    width: 100% !important;
    min-width: 180px;
    height: 140px !important; /* Diperkecil (sebelumnya 180px) agar kotak loading tidak makan tempat */
    background: #253346 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 2px; /* Jarak atas gambar dipersempit */
}

/* Memaksa teks caption tetap rata kiri di sisi pengirim maupun penerima */
.message.sent .chat-caption {
    color: #000000 !important;
    text-align: left !important;
    padding:none;
}

.message.received .chat-caption {
    color: #ffffff !important;
    text-align: left !important;
    padding: none;
}