/* --- CONFIG VARIABLES --- */
:root { 
    --chat-bg: #fff; 
    --bubble-user: #f0f4f9; 
    --bubble-ai: transparent; 
    --text-color: #1f1f1f; 
    --code-bg: #f5f5f5; 
    --btn-hover: #e0e0e0; 
    --input-bg: #fff;
    --border-color: #dee2e6;
}
[data-bs-theme="dark"] { 
    --chat-bg: #131314; 
    --bubble-user: #282a2c; 
    --bubble-ai: transparent;
    --text-color: #e3e3e3; 
    --code-bg: #1e1e1e; 
    --btn-hover: #333; 
    --input-bg: #1e1e1e;
    --border-color: #333;
}

body { font-family: 'Inter', sans-serif; background: var(--chat-bg); color: var(--text-color); height: 100vh; overflow: hidden; }

/* NAVBAR */
.navbar { background: var(--chat-bg) !important; z-index: 100; border-bottom: 1px solid var(--border-color); }
.navbar-brand { font-size: 1.1rem; }

/* --- CHAT CONTAINER --- */
#chatContainer { 
    scroll-behavior: smooth; 
    overflow-y: auto; 
    height: 100%;
    /* Beri ruang di bawah agar chat terakhir tidak tertutup input area */
    padding-bottom: 140px; 
}

.chat-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 15px; /* Padding kiri kanan aman */
}

/* --- BUBBLE CHAT --- */
.message-row {
    display: flex;
    width: 100%;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

/* USER (KANAN) */
.message-row.user { justify-content: flex-end; }
.message-row.user .bubble {
    background: var(--bubble-user);
    color: var(--text-color);
    border-radius: 1.2rem 1.2rem 0.2rem 1.2rem;
    padding: 10px 16px;
    max-width: 85%; /* Desktop: 85% */
    word-wrap: break-word;
    font-size: 0.95rem;
}

/* AI (KIRI) */
.message-row.ai { justify-content: flex-start; gap: 10px; }
.message-row.ai .bubble {
    background: var(--bubble-ai);
    color: var(--text-color);
    width: 100%; 
    max-width: 100%;
    padding: 0;
    overflow-x: hidden;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* AVATAR AI */
.ai-avatar {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.1); 
    display: flex; align-items: center; justify-content: center;
    color: #0d6efd;
    margin-top: 2px;
}

/* GAMBAR */
.bubble img { 
    max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); display: block;
}

/* --- CODE BLOCK --- */
.code-wrapper { 
    position: relative; background: var(--code-bg); 
    border-radius: 8px; margin: 10px 0; border: 1px solid var(--border-color);
    overflow: hidden; max-width: 100%; 
}
.copy-btn { 
    position: absolute; top: 8px; right: 8px; font-size: 10px; 
    background: var(--chat-bg); color: var(--text-color); border: 1px solid var(--border-color); 
    padding: 3px 8px; border-radius: 4px; cursor: pointer; z-index: 10; opacity: 0.8; 
}
pre { 
    margin: 0; padding: 12px; padding-top: 35px; color: inherit; 
    overflow-x: auto; white-space: pre; font-size: 0.85em;
}

/* CURSOR */
.typing-cursor::after { content: '▋'; display: inline-block; animation: blink 1s infinite; color: #0d6efd; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* --- INPUT AREA (Fixed Bottom) --- */
.input-area-wrapper { 
    background: var(--chat-bg); 
    padding: 10px 15px 20px 15px; 
    transition: 0.3s; z-index: 50;
    border-top: 1px solid var(--border-color);
}

.input-group-custom {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 5px;
    display: flex;
    align-items: flex-end; /* Agar tombol sejajar bawah jika textarea memanjang */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

#userInput {
    max-height: 120px;
    overflow-y: auto;
    padding: 10px;
}

/* FILE PREVIEW */
.file-preview { display: none; padding: 5px; margin-bottom: 5px; margin-left: 15px; }
.file-preview img { height: 50px; border-radius: 5px; border: 1px solid var(--border-color); }
.btn-remove-file { position: absolute; top: -5px; right: -5px; background: #dc3545; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; border:none;}

/* =========================================
   RESPONSIVE MOBILE (Layarnya Kecil)
   ========================================= */
@media (max-width: 768px) {
    /* Navbar lebih padat */
    .navbar { padding: 0.5rem 1rem; }
    .navbar-brand span { font-size: 1.2rem; }
    .navbar-brand { font-size: 1rem; }
    
    /* Sembunyikan teks tombol di navbar mobile biar muat */
    .btn-text-mobile { display: none; } 
    
    /* Input area lebih rapat ke pinggir */
    .input-area-wrapper { padding: 10px 10px 15px 10px; }
    
    /* Bubble chat user lebih lebar di HP */
    .message-row.user .bubble { max-width: 90%; }
    
    /* Font size sedikit lebih kecil */
    .message-row.ai .bubble, .message-row.user .bubble { font-size: 0.9rem; }
}