/* Reset Dasar dari CSS Baru */
body, html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f6;
    height: 100%; /* Penting untuk solusi di bawah */
    overflow: hidden;
}

* { box-sizing: border-box; }

/* Menggunakan .chat-container (dari asli) dengan style #chat-container (dari baru) */
.chat-container {
    display: flex;
    flex-direction: column;
    
    /* Perbaikan untuk layout di seluler */
    height: 100%; /* Diubah dari 100vh ke 100% */
    
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    overflow: hidden; /* Dari Asli */
}

/* Header - Diambil dari CSS Baru */
header {
    background-color: #007bff;
    color: white;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
header h2 { margin: 0; font-size: 1.2rem; }
header p { margin: 6px 0 0; font-size: 0.85rem; opacity: .9; } /* Style dari Asli */


/* Menggunakan #chat-box (dari asli) dengan style #messages (dari baru) */
.chat-box {
    flex: 1; /* Ini akan mengisi ruang yang tersisa */
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Bubble Chat - Style Umum dari Baru */
.message {
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 75%;
    word-wrap: break-word;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08); /* Tambahan style */
}

/* Mengganti .received (baru) dengan .other (dari script.js) */
.message.other {
    background-color: #e9e9eb;
    color: #000;
    align-self: flex-start;
    border-bottom-left-radius: 5px;
}

/* Membuat style .own (dari script.js) agar sesuai tema baru */
.message.own {
    background-color: #007bff;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 5px;
}

/* Styling media di dalam bubble (dari baru) */
.message img,
.message video {
    max-width: 100%;
    border-radius: 10px;
    display: block;
    margin-top: 8px;
}

.message audio {
    width: 100%;
    margin-top: 8px;
}

.message a {
    color: #0056b3; /* Warna link untuk .other */
    text-decoration: none;
}
.message.own a {
    color: #f0f0f0; /* Warna link untuk .own */
}
.message a:hover {
    text-decoration: underline;
}

/* Metadata Waktu (dari asli, disesuaikan) */
.msg-meta { 
    display:block; 
    margin-top:6px; 
    opacity:.85; 
    font-size:0.78rem; 
}
.message.own .msg-meta { opacity: .7; }

/* Indikator Upload (dari baru) */
.uploading {
    align-self: center;
    font-style: italic;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 10px;
}

.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Area Input - Menggunakan .chat-input (asli) dengan style #input-area (baru) */
.chat-input {
    display: flex;
    padding: 15px;
    border-top: 1px solid #e0e0e0;
    background-color: #fcfcfc;
    gap: 10px;
    align-items: center; /* Perbaikan untuk tombol tenggelam */
}

/* Style Input Teks (dari baru) */
.chat-input input[type="text"] {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 1rem;
    outline: none;
    background: #fff;
    color: #000;
}

/* Style Tombol Kirim (dari baru) */
.chat-input button#sendBtn {
    border: none;
    background-color: #007bff;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    padding: 0;
    font-size: 0; /* Sembunyikan '📩' dari HTML */
}
.chat-input button#sendBtn:hover {
    opacity: 0.9;
}


/* Style Tombol File (dari baru, diterapkan ke .file-btn dari asli) */
.file-btn {
    background-color: #6c757d;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    position: relative;
    padding: 0;
    font-size: 0; /* Sembunyikan '📎' dari HTML */
}
.file-btn:hover {
    opacity: 0.9;
}

/* IKON BARU: Tombol File */
.file-btn::before {
    content: '📎';
    color: white;
    font-size: 1.5rem;
    line-height: 1;
}

/* IKON BARU: Tombol Kirim */
.chat-input button#sendBtn::before {
    content: '➤';
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    transform: translateX(1px); /* Penyesuaian agar di tengah */
}


/* INI KRUSIAL - Dipertahankan dari Asli */
.file-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}