/* ===================================================================
   Yuqori panel — til, tema va foydalanuvchi o'ng burchakda.
   =================================================================== */
/* Panel balandligi bitta joyda: ochiluvchi bildirishnoma ro'yxati
   telefonda aynan shu qiymatdan boshlab joylashadi (`_mobile.css`). */
:root { --topbar-h: 62px; }
@media (max-width: 940px) { :root { --topbar-h: 52px; } }

.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--topbar-h); padding: var(--sp-2) var(--sp-6);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.topbar-burger { display: none; }
.topbar-brand { display: none; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.topbar-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-shine); }

.topbar-title {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* --- til tanlagichi --- */
.lang-menu { position: relative; }
.lang-trigger {
  display: flex; align-items: center; gap: 6px;
  height: var(--ctl-h-sm); padding: 0 10px 0 8px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; color: var(--ink-soft);
  transition: all var(--transition);
}
.lang-trigger:hover { border-color: var(--gold-500); color: var(--ink); }
.lang-trigger .globe { font-size: var(--fs-sm); }
/* Pastga qaragan uchburchak — matn emas, belgi. Shkalaga tushirilsa
   (10.5 px) u yonidagi til kodidan kattaroq ko'rinib qolardi. */
.lang-trigger .caret { font-size: 9px; opacity: .65; }

/* Joriy til kodi ("UZ") — monoshiriftda, tanlagichdagi segmentlar
   bilan bir xil ko'rinishda. Klass ishlatilardi-yu, uslubsiz qolgan
   edi va faqat ota-elementdan meros olardi. */
.lang-trigger .code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .05em;
  color: var(--ink);
}

.lang-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-overlay);
  min-width: 186px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  animation: drop .14s ease;
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.lang-dropdown[hidden] { display: none; }
.lang-dropdown button {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-s);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); text-align: left;
  transition: background var(--transition), color var(--transition);
}
.lang-dropdown button:hover { background: var(--surface-2); color: var(--ink); }
.lang-dropdown button.active { color: var(--ink); font-weight: 700; }
.lang-dropdown .short {
  width: 30px; flex-shrink: 0; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 800;
  padding: 2px 0; border-radius: 4px;
  background: var(--surface-2); color: var(--ink-faint);
}
.lang-dropdown button.active .short { background: var(--gold-shine); color: var(--on-gold); }
.lang-dropdown .tick { margin-left: auto; color: var(--gold-ink); font-weight: 800; }

/* --- foydalanuvchi --- */
.topbar-user {
  display: flex; align-items: center; gap: var(--sp-2);
  height: var(--ctl-h-sm); padding: 0 var(--sp-3) 0 3px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  transition: all var(--transition);
}
.topbar-user:hover { border-color: var(--gold-500); }
.topbar-user .name { white-space: nowrap; }

@media (max-width: 940px) {
  .topbar-burger { display: grid; }
  .topbar-brand { display: flex; }
  .topbar-title { display: none; }
  .topbar { padding-inline: var(--sp-4); }
  .topbar-user .name { display: none; }
}

/* ===================================================================
   Bildirishnoma qo'ng'irog'i — til tanlagichining chap yonida.
   =================================================================== */
.notif { position: relative; }
.notif-trigger {
  position: relative;
  width: var(--ctl-h-sm); height: var(--ctl-h-sm); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: var(--fs-base);
  transition: all var(--transition);
}
.notif-trigger:hover { border-color: var(--gold-500); color: var(--ink); }
.notif-trigger.has-unread { border-color: var(--gold-500); }

/* O'qilmaganlar soni — oltin nishon */
.notif-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--gold-shine); color: var(--on-gold);
  font-size: var(--fs-2xs); font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: var(--gold-glow);
  border: 2px solid var(--surface);
}
.notif-dot[hidden] { display: none; }

.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-overlay);
  width: min(360px, calc(100vw - var(--sp-8)));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: drop .14s ease;
}
.notif-panel[hidden] { display: none; }

.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.notif-head b { font-size: var(--fs-sm); }

.notif-body { max-height: min(60vh, 420px); overflow-y: auto; }
.notif-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--ink-faint); font-size: var(--fs-sm); }

.notif-row {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--transition);
}
.notif-row:last-child { border-bottom: 0; }
.notif-row:hover { background: var(--surface-2); }

/* O'qilmagani — chap chetida oltin chiziqcha */
.notif-row.unread { background: var(--theme-accent-dim); }
.notif-row.unread { box-shadow: inset 3px 0 0 var(--gold-500); }

.notif-row .ic {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.notif-row .ic.success { background: var(--ok-dim); color: var(--ok); border-color: transparent; }
.notif-row .ic.warning { background: var(--warn-dim); color: var(--warn); border-color: transparent; }

.notif-row .text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-row .text b { font-size: var(--fs-sm); color: var(--ink); }
.notif-row .text .body { font-size: var(--fs-xs); color: var(--ink-soft); }
.notif-row .text .when { font-size: var(--fs-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Telefondagi joylashuv `_mobile.css` da: u yerda ro'yxat qo'ng'iroqqa
   emas, ekranga nisbatan joylashadi. Ilgari shu yerda `right: -60px`
   turardi va ro'yxatning chap yarmi ekrandan chiqib ketardi. */