/* style.css */

/* --- Pengaturan Dasar & Tampilan Mobile (Default) --- */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f0f2f5;
}

.chat-container {
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: 50px;
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

/* Judul (Header) */
.chat-container h2 {
    text-align: center;
    color: #333;
    padding: 15px;
    margin: 0;
    font-size: 1.2rem;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

/* Kotak Chat (Area Scroll) */
.chat-box {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Form Input (Footer) */
.chat-form {
    display: flex;
    padding: 15px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* --- Gaya Pesan --- */
.chat-message {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 75%;
    line-height: 1.5;
    font-size: 1.1rem;
}
.user-message { background-color: #0084ff; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.gemini-message { background-color: #e4e6eb; color: #050505; align-self: flex-start; border-bottom-left-radius: 4px; }
.error-message { background-color: #ffebee; color: #c62828; align-self: flex-start; border: 1px solid #c62828; }

/* Gaya untuk cara baca IPA */
.pronunciation-guide {
    margin-top: 12px;
    font-size: 1rem;
    font-family: "Lucida Sans Unicode", "Arial", sans-serif;
    color: #555;
    /* --- PERUBAHAN DI SINI: Garis dibuat lebih tebal dan jelas --- */
    border-top: 2px solid #e0e0e0;
    padding-top: 10px;
}
.gemini-message .pronunciation-guide { color: #333; }
.error-message .pronunciation-guide { display: none; }

/* --- Gaya Input & Tombol --- */
textarea {
    flex-grow: 1; border: 1px solid #ccc; border-radius: 18px; padding: 10px 15px;
    font-size: 1rem; resize: none; min-height: 24px; max-height: 120px; font-family: inherit;
}
textarea:focus { outline: none; border-color: #0084ff; }
button {
    border: none; background-color: transparent; cursor: pointer; padding: 8px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
button:hover { background-color: #f0f0f0; }
button svg { width: 24px; height: 24px; }

/* --- Gaya Loading --- */
.loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center;
    align-items: center; z-index: 9999; display: none;
}
.spinner {
    border: 5px solid #f3f3f3; border-top: 5px solid #0084ff;
    border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Penyesuaian untuk Layar Lebih Besar (Desktop) --- */
@media (min-width: 650px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .chat-container {
        max-width: 600px;
        height: 80vh;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding-bottom: 0;
    }
    .chat-form {
        padding-top: 15px;
    }
}