body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.chat-container {
    width: 100%;
    max-width: 600px;
    height: 90vh;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Telefon uchun moslashuvchanlik */
@media (max-width: 600px) {
    .chat-container {
        max-width: none; 
        height: 100vh; 
        border-radius: 0; 
        box-shadow: none; 
    }
}

/* Sarlavha */
.chat-header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Boshlash/Tanlash tugmasi */
.selection-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.selection-btn:hover:not(:disabled) {
    background-color: #218838;
}

.selection-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* Tanlash maydoni */
.selection-area {
    padding: 20px;
    background-color: #f8f9fa;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}

.selection-area h4 {
    color: #333;
    margin-top: 15px;
    margin-bottom: 5px;
}

.form-select {
    width: 80%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Xabarlar maydoni (oldingi stillar) */
.chat-messages {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #e9ecef;
}

.message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
    word-wrap: break-word;
    line-height: 1.4;
}

.sent {
    background-color: #007bff;
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 5px;
}

.received {
    background-color: #ffffff;
    color: #333;
    margin-right: auto;
    border: 1px solid #dee2e6;
    border-bottom-left-radius: 5px;
}

.timestamp {
    display: block;
    font-size: 10px;
    margin-top: 5px;
    opacity: 0.8;
    text-align: right;
}

/* Input maydoni */
.chat-input {
    display: flex;
    padding: 10px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.chat-input input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 14px;
}

.chat-input button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.chat-input button:hover {
    background-color: #0056b3;
}

/* ... Avvalgi Umumiy Stillar o'zgarishsiz qoladi (chat-container, body, media queries) ... */

/* Sarlavha */
.chat-header {
    /* Rasmdagi fonga moslash uchun */
    background-color: #007bff; 
    color: white;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ... selection-area va form-select stillari o'zgarishsiz qoladi ... */

/* Xabarlar maydoni */
.chat-messages {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #e9ecef;
    /* Xabarlarni pastdan tepaga o'sishini saqlab qolish */
    display: flex;
    flex-direction: column-reverse; 
}

/* 💥 Xabarlarga kiritiladigan asosiy o'zgarishlar */
.message {
    margin-bottom: 10px;
    /* Matn atrofidagi bo'shliqni kamaytirdik */
    padding: 8px 12px; 
    border-radius: 10px; /* Yumaloq burchaklar */
    max-width: 75%; /* Kenglikni biroz kamaytirdik */
    word-wrap: break-word;
    line-height: 1.4;
    position: relative; /* Vaqt tamg'asini joylashtirish uchun */
    
    /* 2-rasmdagidek vertikal joylashuvni to'g'irlash uchun display: flex ni olib tashladik */
    display: block; 
    padding-bottom: 20px; /* Vaqt tamg'asi uchun pastdan bo'shliq berish */
    min-height: 20px; /* Xabar juda qisqa bo'lsa ham ajralib turishi uchun */
}

/* Xabarning ichidagi matn (paragraf) */
.message p {
    margin: 0; /* Paragrafning standart marginlarini o'chirish */
    display: inline; /* Vaqt va p bir joyda turishi uchun */
}


/* 💥 Yuborilgan xabarlar (O'ngda, Ko'k fonda) */
.sent {
    background-color: #007bff;
    color: white;
    margin-left: auto; /* O'ngga siljitish */
    /* Quyidagi radiuslarni o'chirib tashlaymiz, chunki 10px barcha burchaklarga qo'yildi */
    /* border-bottom-right-radius: 5px; */
}

/* 💥 Qabul qilingan xabarlar (Chapda, Oq/Kulrang fonda) */
.received {
    background-color: #ffffff;
    color: #333;
    margin-right: auto; /* Chapga siljitish */
    border: 1px solid #dee2e6;
    /* border-bottom-left-radius: 5px; */
}

/* 💥 Vaqt tamg'asi va O'qish belgisi */
.timestamp {
    display: flex;
    align-items: center;
    position: absolute; /* Xabar qutisining ichki pastki o'ng burchagiga joylashtirish */
    right: 5px;
    bottom: 3px;
    font-size: 10px;
    opacity: 0.9;
    /* Vaqtning o'zi */
    padding-right: 5px; 
}

/* Yuborilgan (ko'k) xabardagi vaqt rangini oqroq qilish */
.sent .timestamp {
    color: rgba(255, 255, 255, 0.8);
}

/* Qabul qilingan (oq) xabardagi vaqt rangini to'qroq qilish */
.received .timestamp {
    color: #6c757d;
}

/* 💥 O'qish belgisi (JavaScript orqali qo'shiladi) */
.read-status {
    font-size: 12px; /* Kichikroq tekshiruv belgisi */
    margin-left: 3px;
}

/* Yuborilgan xabardagi o'qish belgisi rangi */
.sent .read-status {
    color: #fff; /* Oq/Ko'k rangda yaxshiroq ko'rinishi uchun */
}

/* ... chat-input formasi va tugmalar stillari o'zgarishsiz qoladi ... */

/* ... avvalgi CSS stillari ... */

/* Xabarlar maydoni */
.chat-messages {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #e9ecef;

    /* 💥 O'ZGARTIRISH: Standard xronologik tartibni o'rnatish */
    display: flex;
    flex-direction: column; /* Xabarlar tepadan pastga joylashadi */
    justify-content: flex-end; /* Xabarlar pastga (inputga yaqin) yopishadi */
}

/* ... qolgan CSS stillari o'zgarishsiz qoladi ... */

/* ================================================= */
/* MEDIA QUERIES (Mobil, Planshet va Katta ekranlar) */
/* ================================================= */

/* --- 1. Kichik Mobil Qurilmalar (Maksimal kenglik 480px) --- */
/* Faqat juda kichik ekranlar (ko'p telefonlar) uchun. */
@media (max-width: 480px) {
    
    /* Asosiy Body (yuqori va pastki paddingni olib tashlaymiz,
       chunki .chat-container 100vh bo'ladi) */
    body {
        padding: 0;
        align-items: flex-start; /* Qutilarni tepadan boshlash */
    }

    /* Tanlash maydoni */
    .selection-area {
        padding: 15px 10px;
    }

    .selection-area h4 {
        font-size: 1em;
    }

    .form-select {
        width: 95%; /* Mobil ekranlarda to'liqroq kenglik berish */
        padding: 8px;
        font-size: 14px;
    }

    .selection-btn {
        padding: 8px 15px;
        font-size: 14px;
    }

    /* Xabarlar maydoni */
    .chat-messages {
        padding: 10px;
    }

    .message {
        max-width: 90%; /* Kichik ekranlarda ko'proq joy egallaydi */
        padding: 8px 12px;
        font-size: 0.9em;
    }
    
    /* Vaqt tamg'asi ixchamligi */
    .timestamp {
        font-size: 9px;
        right: 4px;
        bottom: 2px;
    }

    /* Input maydoni */
    .chat-input {
        padding: 8px;
    }

    .chat-input input[type="text"] {
        padding: 8px;
        font-size: 13px;
    }

    .chat-input button {
        padding: 8px 12px;
        font-size: 13px;
    }
}


/* --- 2. Planshetlar (Minimal 601px va Maksimal 992px kenglik) --- */
/* Bu uslublar 601px dan 992px gacha bo'lgan ekranlar uchun qo'llaniladi */
@media (min-width: 601px) and (max-width: 992px) {
    
    /* Asosiy body - faqat paddingni kamaytirish */
    body {
        padding: 30px 20px;
    }

    /* Chat konteyneri */
    .chat-container {
        width: 90%; /* Planshet ekranining 90% qismini egallaydi */
        max-width: 750px; /* Maksimal kenglikni oshirish */
        height: 85vh; /* Balandlikni biroz kamaytirish */
        border-radius: 15px;
    }
    
    /* Tanlash maydoni */
    .form-select {
        width: 70%; /* Kengroq maydonda moslashtirish */
    }
    
    /* Xabarlar */
    .message {
        max-width: 65%; /* Katta ekranlarda ko'proq joy qoldirish */
    }

    /* Chat Input */
    .chat-input input[type="text"] {
        font-size: 15px;
    }
}


/* --- 3. Katta Ekranlar (Minimal kenglik 993px) --- */
/* Ushbu qism chatni markazda ushlab turadi, faqat muhim stil o'zgarishlari uchun. */
@media (min-width: 993px) {
    
    /* .chat-container allaqachon max-width: 600px bilan cheklangan, 
       shuning uchun katta ekranlarga ko'p o'zgarish shart emas. */
       
    .chat-container {
        height: 80vh; /* Katta monitorlarda ham o'rtacha balandlikda qolishi uchun */
    }

    /* Xabarlar maydoni */
    .chat-messages {
        padding: 20px;
    }
}