@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

body {
    background-color: #17212b; /* لون خلفية تيليجرام */
    color: white; font-family: 'Cairo', sans-serif;
    margin: 0; padding: 0; height: 100vh; overflow: hidden;
}

/* شاشة التسجيل - كلاسيكية */
.screen { display: none; flex-direction: column; height: 100vh; width: 100%; align-items: center; justify-content: center; }

.card {
    width: 85%; max-width: 350px; text-align: center;
}

.card h2 { font-size: 24px; margin-bottom: 30px; }

.input-group { width: 100%; margin-bottom: 20px; text-align: right; }
.input-group label { display: block; font-size: 14px; color: #6ab3f3; margin-bottom: 8px; }

input, select {
    width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #2f3e4e;
    background: #242f3d; color: white; font-size: 16px; outline: none;
}

button {
    width: 100%; padding: 14px; border-radius: 8px; border: none;
    background: #50a8eb; color: white; font-size: 16px; font-weight: bold; cursor: pointer;
}

/* شاشة البحث (الرادار الاحترافي) */
#search-screen { display: flex; } /* البداية */

.radar-container { display: flex; flex-direction: column; align-items: center; }
.loader-tg {
    border: 3px solid rgba(255,255,255,0.1);
    border-top: 3px solid #50a8eb;
    border-radius: 50%; width: 50px; height: 50px;
    animation: spin 1s linear infinite; margin-bottom: 20px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* شاشة الشات (تيليجرام 100%) */
#chat-screen { display: none; background-image: url('https://i.pinimg.com/originals/85/6e/e0/856ee07936ef0768f0808b2c58907f1d.png'); background-size: cover; }
#messages-area { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 8px; }

.msg { padding: 8px 15px; border-radius: 12px; max-width: 75%; font-size: 15px; }
.my { background: #2b5278; align-self: flex-start; border-bottom-left-radius: 0; }
.other { background: #182533; align-self: flex-end; border-bottom-right-radius: 0; }
.sys { background: rgba(0,0,0,0.4); align-self: center; font-size: 12px; border-radius: 20px; }

.input-bar { display: flex; padding: 10px; background: #17212b; gap: 10px; }
.input-bar input { flex: 1; border: none; background: transparent; }