/* ==========================================================================
   XABARLAR (Messages) — MUHIM, KATTA TUZATISH: avval bu fayldagi
   BARCHA ranglar qattiq kod ("#0e1424", "rgba(255,255,255,.08)" kabi)
   sifatida yozilgan edi — bu esa Menyu > Rang sozlash orqali mavzu
   (masalan kunduzgi rejim) o'zgartirilganda, Xabarlar bo'limi HECH
   QACHON o'zgarmasligiga olib kelardi (doim qorong'i qolib qolar edi,
   ba'zi matnlar esa o'qib bo'lmas darajada qorong'i fonda qorong'i
   bo'lib qolardi). Endi barcha ranglar loyihaning umumiy mavzu
   o'zgaruvchilaridan (css/base/variables.css) foydalanadi — shu
   sabab Xabarlar endi boshqa har qanday bo'lim kabi, tanlangan
   mavzuga to'liq mos ravishda o'zgaradi. */

.messages__overlay { position: fixed; inset: 0; z-index: 5000; display: none; }
.messages__overlay.state--open { display: block; }
.messages__backdrop {
    position: absolute;
    inset: 0;
    /* Backdrop — ostidagi kontentni xiralashtiruvchi qatlam, shuning
       uchun mavzudan qat'iy nazar doim qorong'i soya bo'lib qoladi
       (bu Messenjer va boshqa ko'p ilovalarda ham shunday). */
    background: rgba(2, 6, 18, .72);
    backdrop-filter: blur(16px);
}
.messages__panel {
    position: absolute;
    inset: 5vh 5vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(var(--overlay-rgb), .12);
    border-radius: 28px;
    background: linear-gradient(145deg, var(--bg2), var(--bg));
    box-shadow: var(--shadow-lg);
    color: var(--fg);
}
.messages__head {
    height: 82px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid rgba(var(--overlay-rgb), .08);
}
.messages__head h2 { margin: 2px 0 0; font-size: 25px; color: var(--fg); }
.messages__eyebrow { font-size: 10px; letter-spacing: .18em; color: var(--teal); }
.messages__head button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(var(--overlay-rgb), .08);
    color: var(--fg);
    font-size: 25px;
    cursor: pointer;
}
.messages__layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 340px 1fr; }
.messages__sidebar { border-right: 1px solid rgba(var(--overlay-rgb), .08); overflow: auto; padding: 16px; }
.messages__myid {
    padding: 14px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--teal-rgb), .08));
    border: 1px solid rgba(var(--accent-rgb), .22);
    display: grid;
    gap: 4px;
}
.messages__myid span, .messages__myid small { color: var(--muted); font-size: 11px; }
.messages__myid strong { font-size: 20px; letter-spacing: .08em; color: var(--fg); }
.messages__myid button { justify-self: start; border: 0; background: transparent; color: var(--teal); padding: 0; cursor: pointer; }
.messages__add { display: flex; gap: 8px; margin: 14px 0; }
.messages__add input {
    min-width: 0;
    flex: 1;
    background: rgba(var(--overlay-rgb), .06);
    border: 1px solid rgba(var(--overlay-rgb), .1);
    color: var(--fg);
    border-radius: 12px;
    padding: 11px;
}
.messages__add button, .messages__composer button {
    border: 0;
    border-radius: 12px;
    padding: 0 14px;
    background: linear-gradient(135deg, var(--accent), var(--teal));
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.messages__section-title {
    font-size: 11px;
    color: var(--muted);
    margin: 16px 4px 8px;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.friend-request {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 11px;
    border-radius: 13px;
    background: rgba(var(--overlay-rgb), .05);
    margin-bottom: 7px;
}
.friend-request div:first-child { display: grid; color: var(--fg); }
.friend-request small { color: var(--muted); }
.friend-request button {
    border: 0;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    cursor: pointer;
    background: rgba(var(--overlay-rgb), .08);
    color: var(--fg);
}
.conversation {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--fg);
    text-align: left;
    cursor: pointer;
}
.conversation:hover { background: rgba(var(--overlay-rgb), .06); }
.conversation__avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--teal));
    color: #fff;
    font-weight: 800;
    flex: none;
}
.conversation > span:nth-child(2) { min-width: 0; display: grid; }
.conversation small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.messages__requests { margin-bottom: 8px; }
.messages__requests:empty { display: none; }
.messages__list { display: flex; flex-direction: column; gap: 2px; }
.messages__nochat { color: var(--muted); font-size: 13px; padding: 24px 8px; }
.messages__chat {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 75% 10%, rgba(var(--accent-rgb), .1), transparent 35%);
    position: relative;
}
.messages__chat-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(var(--overlay-rgb), .08);
}
.messages__chat-head div:last-child { display: grid; }
.messages__chat-head b { color: var(--fg); }
.messages__chat-head small { color: var(--muted); }
.messages__stream { flex: 1; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 9px; }
.bubble {
    max-width: min(70%, 520px);
    padding: 11px 14px;
    border-radius: 17px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: anywhere;
    color: var(--fg);
}
.bubble--in { align-self: flex-start; background: rgba(var(--overlay-rgb), .08); border-bottom-left-radius: 5px; }
.bubble--out {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--accent), var(--teal));
    color: #fff;
    border-bottom-right-radius: 5px;
}
.bubble time { display: block; margin-top: 5px; font-size: 9px; opacity: .6; text-align: right; }
.messages__composer { flex: none; display: flex; gap: 10px; padding: 14px; border-top: 1px solid rgba(var(--overlay-rgb), .08); }
.messages__composer input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(var(--overlay-rgb), .1);
    background: rgba(var(--overlay-rgb), .05);
    color: var(--fg);
    border-radius: 15px;
    padding: 13px;
}
.messages__empty { margin: auto; text-align: center; max-width: 460px; padding: 30px; color: var(--muted); }
.messages__empty > div {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 0 auto 15px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .22), rgba(var(--teal-rgb), .16));
    font-size: 27px;
    color: var(--accent);
}
.messages__empty h3 { color: var(--fg); margin: 0 0 8px; }
.messages__loading { margin: auto; color: var(--muted); }

.messages__back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(var(--overlay-rgb), .1);
    border-radius: 10px;
    background: rgba(var(--overlay-rgb), .06);
    color: var(--fg);
    font-size: 17px;
    cursor: pointer;
    flex: none;
    margin-right: 6px;
    transition: background .15s ease, transform .15s ease;
}
.messages__back-btn:hover { background: rgba(var(--overlay-rgb), .12); }
.messages__back-btn:active { transform: scale(.92); }

/* BUGFIX/YANGI: pastdagi ikkita tor ekran (mobil ≤800px va tor planshet
   801-900px) bitta ustunli (ro'yxat <-> suhbat) rejimni bir xil
   qoidalar bilan ishlatadi — bu umumiy qoidalar TAKRORLANMASLIGI uchun
   bitta umumiy ≤900px blokka chiqarildi; faqat panel bo'shlig'i va
   pufakcha kengligi kabi FARQLI qismlar o'z alohida bloklarida qoladi. */
@media (max-width: 900px) {
    .messages__layout { grid-template-columns: 1fr; }
    .messages__sidebar { display: flex; flex-direction: column; }
    .messages__chat { display: none; height: 100%; }

    /* MUHIM, JIDDIY TUZATISH (avvalgi sessiyadan): avval mobilda
       sidebar (suhbatlar ro'yxati, do'st qo'shish, do'stlik
       so'rovlari) DOIM, HECH QANDAY chiqish yo'li bo'lmagan holda
       yashirilgan edi ("display:none") — bu FOYDALANUVCHI MOBIL
       TELEFONDA XABARLAR BO'LIMIDAN UMUMAN TO'LIQ FOYDALANA
       OLMAYDIGAN holatga olib kelardi. Endi standart holatda (hali
       suhbat tanlanmagan) RO'YXAT ko'rsatiladi; suhbat tanlanganda
       (.messages__panel.state--chat-open) esa FAQAT suhbat
       ko'rsatiladi, "←" tugmasi bilan ro'yxatga qaytish mumkin. */
    .messages__panel.state--chat-open .messages__sidebar { display: none; }
    .messages__panel.state--chat-open .messages__chat { display: flex; flex-direction: column; }
}
@media (max-width: 800px) {
    .messages__panel { inset: 0; border-radius: 0; }
    .bubble { max-width: 85%; }
}

/* BUGFIX/YANGI: PLANSHET (taxminan 801-1180px, masalan iPad, Android
   planshetlar) uchun alohida moslashuv. Avval bu oraliqda to'g'ridan-to'g'ri
   desktop qoidasi ishlatilardi — sidebar QATTIQ 340px kenglikda qolib,
   90vw kenglikdagi panelning katta qismini yeb qo'yardi, suhbat oynasiga
   juda tor joy qolardi (ayniqsa planshet TIK turganda). Endi:
   - "portret" tor planshetlarda (≤900px, masalan iPad tik holati)
     mobil kabi BITTA USTUNLI (ro'yxat <-> suhbat) ko'rinish ishlatiladi —
     bu ancha keng, qulay joy beradi;
   - kengroq (901-1180px, masalan iPad landshaft) planshetlarda ikki
     ustun saqlanadi, lekin sidebar torroq (260px) va panel chekkalari
     kamroq bo'lib, suhbat qismiga ko'proq joy qoladi. */
@media (min-width: 801px) and (max-width: 900px) {
    .messages__panel { inset: 2vh 2vw; }
    .bubble { max-width: 78%; }
}
@media (min-width: 901px) and (max-width: 1180px) {
    .messages__panel { inset: 3vh 3vw; }
    .messages__layout { grid-template-columns: 260px 1fr; }
    .messages__sidebar { padding: 12px; }
    .bubble { max-width: 72%; }
}

.auth__public-id {
    margin: 12px 0 16px;
    padding: 13px 15px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .12), rgba(var(--teal-rgb), .08));
    border: 1px solid rgba(var(--accent-rgb), .22);
    display: grid;
    gap: 3px;
    text-align: left;
}
.auth__public-id span, .auth__public-id small { font-size: 11px; color: var(--muted); }
.auth__public-id strong { font-size: 19px; letter-spacing: .12em; color: var(--fg); }

/* ---------- Xabarlar: mehmon holatida to'liq kenglikda, markazda
   (avvalgi final-fixes.css dan) ---------- */
.messages__layout--single {
    grid-template-columns: 1fr !important;
}
.messages__layout--single .messages__chat {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* ---------- Tilnav rasmiy xabar pufakchasi (avvalgi tilnav-official-message.css dan) ---------- */
/* ==========================================================================
   "Tilnav" rasmiy bildirishnomalari — Xabarlar bo'limidagi maxsus,
   karta ko'rinishidagi xabar pufakchasi (bonus/aksiya/yangilik).
   ========================================================================== */
.bubble--offer {
    max-width: 88%;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(124, 58, 237, .16), rgba(236, 43, 155, .1));
    border: 1px solid rgba(236, 43, 155, .28);
    align-self: flex-start;
}
.offer-bubble__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--muted, #8b92a8);
}
.offer-bubble__logo {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    object-fit: cover;
}
.offer-bubble__title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 4px;
}
.offer-bubble__body {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--fg, #e8ecf5);
    margin-bottom: 10px;
    white-space: pre-wrap;
}
.offer-bubble__action {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #f9c846, #ec2b9b);
    color: #1a1030;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}
.offer-bubble__action:disabled {
    opacity: .6;
    cursor: default;
}
.offer-bubble__action--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    color: var(--fg, #e8ecf5);
}
.offer-bubble__claimed {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .15);
    color: #3ddc97;
    font-size: 12.5px;
    font-weight: 700;
}

/* "Tilnav" bilan yozishmani bir tomonlama ekanini bildiruvchi izoh —
   yozish formasi o'rniga ko'rsatiladi. */
.messages__system-note {
    padding: 12px 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted, #8b92a8);
    background: rgba(255, 255, 255, .03);
    border-top: 1px solid rgba(255, 255, 255, .06);
}