/* Global Styles & Theme */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
body { background: #1e092b; color: #fff; overflow: hidden; height: 100dvh; width: 100vw; }

.login-bg { background: linear-gradient(-45deg, #1e092b, #4a154b, #8a2387, #e94057); background-size: 400% 400%; animation: bgAnim 15s ease infinite; }
.main-bg { background: #1a0b22; }
/* Chat Room Background (မှောင်မှောင်လေး) */
.chat-bg { background: #15081c url('https://www.transparenttextures.com/patterns/stardust.png'); }
.call-bg { background: #000; }

@keyframes bgAnim { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0; transform: translateY(20px); pointer-events: none; z-index: 1;
}
.screen.active { opacity: 1; transform: translateY(0); pointer-events: all; z-index: 5; }

/* Login */
#login-screen { justify-content: center; align-items: center; padding: 20px; }
.glass-box {
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px;
    padding: 40px 30px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
.heart-icon { font-size: 40px; color: #ff4d6d; text-shadow: 0 0 20px rgba(255,77,109,0.6); margin-bottom: 10px; animation: beat 1.5s infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.glass-box h2 { font-weight: 600; color: #fff; margin-bottom: 5px; }
.subtitle { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 25px; }

.glass-box input {
    width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; padding: 15px; border-radius: 15px; margin-bottom: 15px; font-size: 15px; outline: none; transition: 0.3s;
}
.glass-box input:focus { border-color: #ff4d6d; box-shadow: 0 0 15px rgba(255, 77, 109, 0.3); }
.btn-primary {
    width: 100%; background: linear-gradient(135deg, #ff4d6d 0%, #c9184a 100%);
    color: #fff; border: none; padding: 15px; border-radius: 15px; font-size: 16px; font-weight: 600; cursor: pointer;
}

/* Contacts */
.header { padding: 25px 20px; background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.05); }
.header h2 { font-size: 24px; font-weight: 600; color: #fff; }
.my-name { font-size: 14px; color: #ff4d6d; }
.contact-list { flex: 1; overflow-y: auto; padding: 10px 0; }
.contact-item { 
    display: flex; align-items: center; gap: 15px; padding: 15px 20px; margin: 5px 15px; border-radius: 20px; cursor: pointer;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.02); transition: 0.3s;
}
.contact-item img { width: 55px; height: 55px; border-radius: 50%; border: 2px solid #ff4d6d; padding: 2px; object-fit: cover; }

/* Chat Screen - Header (အောက်ခံနှင့် ကွဲပြားသော အရောင်ရင့်ရင့်) */
.solid-header { 
    padding: 15px 20px; 
    background: #2a0b38; /* ကွဲပြားသော အရောင်ရင့် */
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    display: flex; align-items: center; gap: 15px; z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.back-btn { font-size: 20px; color: #ff4d6d; cursor: pointer; padding: 5px; }
.avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
.chat-user-info { flex: 1; }
.chat-user-info h4 { font-size: 16px; font-weight: 500; margin-bottom: 2px; }

/* Online / Offline Status Colors */
.status-online { font-size: 12px; color: #00e676; font-weight: 500; }
.status-offline { font-size: 12px; color: #888; }

.chat-actions button { background: none; border: none; color: #ff4d6d; font-size: 20px; margin-left: 15px; }

#chat-box { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
#chat-box::-webkit-scrollbar { width: 4px; }
#chat-box::-webkit-scrollbar-thumb { background: rgba(255,77,109,0.3); border-radius: 10px; }

#chat-box p { padding: 12px 18px; font-size: 14.5px; max-width: 78%; line-height: 1.4; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
#chat-box p:not([style*="color: blue"]) { background: rgba(255,255,255,0.08); color: #fff; border-radius: 20px 20px 20px 5px; align-self: flex-start; }
#chat-box p[style*="color: blue"] { background: linear-gradient(135deg, #ff4d6d 0%, #c9184a 100%) !important; color: #fff !important; border-radius: 20px 20px 5px 20px; align-self: flex-end; }
#chat-box p b { display: none; }
#chat-box img { max-width: 100%; border-radius: 15px; margin-top: 8px; }

/* Input Area (စာပို့ခလုတ် သေချာပေါ်စေရန်) */
.glass-footer { 
    padding: 12px 15px; 
    background: rgba(30, 9, 43, 0.95); 
    backdrop-filter: blur(15px); 
    border-top: 1px solid rgba(255,255,255,0.08); 
    z-index: 10; 
}

.input-container { 
    display: flex; 
    align-items: center; 
    background: rgba(0, 0, 0, 0.4); 
    border: 1px solid rgba(255,255,255,0.15); 
    border-radius: 35px; 
    padding: 6px 8px 6px 12px; 
    gap: 8px;
    width: 100%;
}

.icon-btn { 
    background: none; 
    border: none; 
    color: rgba(255,255,255,0.7); 
    font-size: 20px; 
    cursor: pointer;
    flex-shrink: 0;
    padding: 5px;
}

#messageInput { 
    flex: 1; 
    min-width: 0; /* Input မကျော်ထွက်စေရန် မဖြစ်မနေ လိုအပ်သည် */
    background: transparent; 
    border: none; 
    color: #fff; 
    font-size: 15px; 
    outline: none; 
    padding: 8px 5px;
}

#messageInput::placeholder { color: rgba(255,255,255,0.4); }

.send-btn { 
    background: linear-gradient(135deg, #ff4d6d 0%, #c9184a 100%); 
    color: #fff; 
    border: none; 
    width: 38px; 
    height: 38px; 
    min-width: 38px; /* ခလုတ် အရွယ်အစား မကျုံ့သွားစေရန် */
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer;
    flex-shrink: 0; /* နေရာအကျဉ်းခံရပြီး ပျောက်မသွားစေရန် */
    box-shadow: 0 4px 12px rgba(255, 77, 109, 0.4);
    font-size: 15px;
}

/* Call Screen */
#audio-ui { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 75%; position: relative; z-index: 10; }
#audio-avatar { width: 140px; height: 140px; border-radius: 50%; border: 4px solid #ff4d6d; object-fit: cover; position: relative; z-index: 2; }
.pulse-ring { position: absolute; width: 140px; height: 140px; border-radius: 50%; border: 2px solid #ff4d6d; animation: pulseCall 2s infinite ease-out; z-index: 1; }
@keyframes pulseCall { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
#audio-name { font-size: 26px; font-weight: 600; margin-top: 30px; }
#call-status { color: #ff4d6d; margin-top: 5px; }

#remoteVideo { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; }
#localVideo { width: 110px; height: 150px; object-fit: cover; position: absolute; bottom: 120px; right: 20px; z-index: 20; border-radius: 16px; border: 2px solid rgba(255,255,255,0.8); transform: scaleX(-1); touch-action: none; }

.call-controls { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; gap: 25px; padding-bottom: 35px; padding-top: 40px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); border-top: none; }
.ctrl-btn { width: 55px; height: 55px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.2); font-size: 20px; backdrop-filter: blur(5px); }
.ctrl-btn.off { background: rgba(255,255,255,0.9); color: #000; }
.end-btn { width: 65px; height: 65px; border-radius: 50%; font-size: 24px; border: none; color: #fff; background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%); display: none; }