/* @rozgor-part 7/10 — YUKLANISH SKELETI, xato yozuvi, PASTKI MENYU
   BO'LINDI (5d-blok): ilgari bitta `style.css` (3058 qator) edi. TARTIB MUHIM —
   keyingi qoida oldingisini bosadi, shuning uchun public/index.html dagi <link>
   teglari AYNAN shu raqamlar tartibida turishi SHART. */
/* --- Yuklanish skeleti -----------------------------------------------------
   Ochilishdan birinchi /api/list javobigacha ekran BUTUNLAY oq turardi (ro'yxat
   bo'sh, "Ro'yxat bo'sh" yozuvi ham yashirin) — foydalanuvchi ilova qotib
   qolganmi deb o'ylardi. Endi soxta qatorlar yiltirab turadi. */
.skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.skeleton[hidden] {
  display: none;
}

.skel-row {
  height: 52px; /* haqiqiy .item qatorining balandligi (min-height: 52px) */
  border-radius: var(--radius);
  background: linear-gradient(
    90deg,
    var(--tg-secondary-bg) 0%,
    rgba(128, 128, 128, 0.16) 50%,
    var(--tg-secondary-bg) 100%
  );
  background-size: 220% 100%;
  animation: skel-shimmer 1.2s ease-in-out infinite;
}

/* Har qatorning yiltirashi biroz kechikadi — "to'lqin" bo'lib ko'rinadi. */
.skel-row:nth-child(2) {
  animation-delay: 0.1s;
}
.skel-row:nth-child(3) {
  animation-delay: 0.2s;
}
.skel-row:nth-child(4) {
  animation-delay: 0.3s;
  opacity: 0.75;
}
.skel-row:nth-child(5) {
  animation-delay: 0.4s;
  opacity: 0.5;
}

@keyframes skel-shimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

/* Harakatni kamaytirish so'ralgan bo'lsa — yiltirash yo'q, oddiy fon qoladi. */
@media (prefers-reduced-motion: reduce) {
  .skel-row {
    animation: none;
    background: var(--tg-secondary-bg);
  }
}

/* --- Xato yozuvi (qalqib turadigan) ---------------------------------------
   Ilgari ro'yxatning eng pastida, oqim ichida edi — uzun ro'yxatda ekrandan
   tashqarida qolib ko'rinmasdi. Endi add-bar ustida qalqib turadi (fixed),
   bosilsa yopiladi, bir necha soniyada o'zi so'nadi (app.js NOTICE_HIDE_MS).
   z-index mahsulot varag'idan (150) YUQORI — xato varaq ustida ham ko'rinsin. */
.notice {
  position: fixed;
  z-index: 300;
  left: 12px;
  right: 12px;
  bottom: calc(72px + var(--tabbar-h) + env(safe-area-inset-bottom));
  max-width: 616px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(229, 72, 77, 0.35);
  background: var(--tg-bg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  color: var(--danger);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

/* MUVAFFAQIYAT ko'rinishi (showNotice(text, "ok")) — yashil. Standart yozuv
   qizil (xato); "8 ta mahsulot qo'shildi ✓" kabi yaxshi xabar xatodek
   ko'rinmasligi uchun shu variant qo'shildi. */
.notice.notice-ok {
  border-color: rgba(46, 168, 92, 0.4);
  color: var(--done);
}

.notice[hidden] {
  display: none;
}

/* "Mahsulot qo'shish" qatori — endi PASTKI MENYU USTIDA turadi (ilgari eng
   pastda edi). Qurilmaning pastki xavfsiz zonasini endi menyu o'zi yeydi,
   shuning uchun bu yerda faqat oddiy to'ldirma qoldi.
   FAQAT "🛒 Ro'yxat" bo'limida ko'rinadi (app.js applyTab -> hidden). */
.add-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--tg-bg);
  border-top: 1px solid rgba(128, 128, 128, 0.15);
  max-width: 640px;
  margin: 0 auto;
}

/* --- PASTKI MENYU (3 bo'lim) ----------------------------------------------
   Ekranning eng pastida, "Mahsulot qo'shish" qatori OSTIDA. Faol bo'lim ko'k,
   qolganlari kulrang. z-index 90 — to'liq ekranli ekranlardan (oila / bot
   haqida = 100) PAST, ular menyuni yopadi. */
.tabbar {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  max-width: 640px;
  margin: 0 auto;
  background: var(--tg-bg);
  border-top: 1px solid rgba(128, 128, 128, 0.15);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Har tugma: ikonka (20px) + ostida kichik yozuv (10px). Balandlik 55px —
   barmoq uchun 44px dan katta (uchdan bir kenglik allaqachon keng). */
.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 55px;
  padding: 6px 2px 8px;
  border: none;
  background: transparent;
  color: var(--tg-hint);
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tab-btn:active {
  opacity: 0.7;
}

/* Faol bo'lim — ikonka ham, yozuv ham ko'k (rang `currentColor` orqali o'tadi;
   emoji ikonka rangi o'zgarmaydi, lekin to'liq opaklik bilan ajralib turadi). */
.tab-btn.active {
  color: var(--tg-link);
}

.tab-icon {
  font-size: 20px;
  line-height: 1;
  opacity: 0.55;
}

.tab-btn.active .tab-icon {
  opacity: 1;
}

.tab-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- SUZUVCHI (floating) BOSHQARUV (0035) ----------------------------------
   Ro'yxat surilganda (scrollTop > 28) tepa panel 3px chiziqqacha yig'iladi,
   pastdagi qo'shish maydoni + menyu esa pastga so'nib ketadi; o'rniga ikkita
   suzuvchi qator chiqadi. Skroll tepaga qaytsa (scrollTop < 10) hammasi joyiga
   qaytadi. IKKI XIL chegara — GISTEREZIS (chegarada titramasin), app-float.js.

   🚫 `display: none` / `hidden` bilan yashirilmaydi — ular ANIMATSIYA
   QILINMAYDI va aynan shu "birdan otilib chiqish" edi. Faqat `opacity` +
   `transform`, yashiringanda `pointer-events: none`.
   Vaqt va egri chiziq `.app` dagi `--fdur` / `--fease` dan meros. */

/* Tepa panelning YIG'ILISHI. `height: auto` interpolatsiya QILINMAYDI, shuning
   uchun app-float.js yig'ishdan OLDIN o'lchangan balandlikni `--topbar-h` ga
   yozib `.topbar-anim` ni qo'yadi (aniq px -> 3px animatsiya bo'ladi), o'tish
   tugagach ikkalasini olib tashlaydi — filtr paneli ochilganda tepa yana erkin
   o'sishi kerak. `overflow` ham FAQAT o'sha paytda yopiladi, aks holda ro'yxat
   tanlagichi menyusi (absolute) doimo kesilib qolardi. */
.topbar {
  transition: height var(--fdur) var(--fease);
}

.topbar-anim {
  height: var(--topbar-h, auto);
  overflow: hidden;
}

.app.floating .topbar {
  height: 3px;
}

/* Tepa ICHIDAGILAR: so'nadi + 14px yuqoriga siljiydi. */
.topbar > * {
  transition:
    opacity var(--fdur) var(--fease),
    transform var(--fdur) var(--fease);
}

.app.floating .topbar > * {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

/* Pastki panel (qo'shish maydoni + menyu): so'nadi + to'liq pastga siljiydi. */
.add-bar,
.tabbar {
  transition:
    opacity var(--fdur) var(--fease),
    transform var(--fdur) var(--fease);
}

.app.floating .add-bar,
.app.floating .tabbar {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

/* Ro'yxat suzuvchi qatorlar ostida qolib ketmasin. Bu ikki to'ldirma ham
   animatsiya qilinadi — aks holda tepa 340 ms yig'ilayotganda kontent birdan
   38px pastga sakrardi. */
.main {
  transition:
    padding-top var(--fdur) var(--fease),
    padding-bottom var(--fdur) var(--fease);
}

.app.floating .main {
  padding-top: 46px;
  padding-bottom: calc(62px + env(safe-area-inset-bottom));
}

/* --- Suzuvchi qatorlarning o'zi ------------------------------------------- */
.fbar {
  position: absolute;
  z-index: 95;
  left: 0;
  right: 0;
  opacity: 0;
  /* Qatorning O'ZI skrollni to'smaydi (tugmalar orasidagi bo'sh joydan ro'yxatni
     surish mumkin) — bosiladigan qismlar quyida yoqiladi. */
  pointer-events: none;
  transition:
    opacity var(--fdur) var(--fease),
    transform var(--fdur) var(--fease);
}

.fbar-top {
  top: 0;
  transform: translateY(-16px);
}

.fbar-bot {
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  transform: translateY(20px);
}

.app.floating .fbar {
  opacity: 1;
  transform: translateY(0);
}

.app.floating .fbar > * {
  pointer-events: auto;
}

/* 3px progress — ekran eng tepasida, to'liq kenglikda. Ranglar pul chizig'i
   (.total-bar) bilan AYNAN bir xil: to'lgan qismi yashil, bo'sh qismi sariq.
   Narxli mahsulot bo'lmasa yo'lak shaffof (bo'sh sariq chiziq yolg'on ko'rinish
   berardi) — app-float.js `.fbar-prog-empty` ni qo'yadi. */
.fbar-prog {
  height: 3px;
  background: rgba(217, 138, 0, 0.55);
  overflow: hidden;
}

.fbar-prog-empty {
  background: transparent;
}

.fbar-prog-fill {
  width: 0;
  height: 100%;
  background: var(--done);
  transition: width 0.25s ease;
}

.fbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 0;
}

/* Kengaygan tugmacha (pill) va dumaloq tugmalar bitta ko'rinishda: oq fon,
   yumshoq soya + nozik chegara (soya ro'yxat ustida "qalqib turgan"ini
   bildiradi). Balandlik 38px — barmoq uchun yetarli, ekrandan kam joy oladi. */
.fpill,
.fbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: none;
  border-radius: 999px;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: inherit;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(128, 128, 128, 0.14);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.fpill:active,
.fbtn:active {
  opacity: 0.7;
}

/* Chapda ro'yxat nomi ("Yanvar 2027"), o'ngda kulrang qisqa summa ("4.2k / 422k"). */
.fpill-sum {
  flex: 1;
  min-width: 0;
  gap: 10px;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
}

.fpill-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fpill-money {
  flex: none;
  color: var(--tg-hint);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fbtn {
  flex: none;
  width: 38px;
  padding: 0;
}

/* Ko'k dumaloq "+" — pastki qatordagi yagona asosiy amal. */
.fbtn-add {
  background: var(--tg-button);
  color: var(--tg-button-text);
  font-size: 24px;
  line-height: 1;
}

/* Uchta menyu belgisi bitta tugmachada. Faoli KO'K: emoji rangini o'zgartirib
   bo'lmaydi, shuning uchun ko'klik ostidagi doira bilan beriladi. */
.fpill-tabs {
  gap: 2px;
  padding: 0 4px;
}

.fpill-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tg-hint);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.fpill-tab.active {
  background: rgba(36, 129, 204, 0.14);
  color: var(--tg-link);
  opacity: 1;
}

/* "+" bosilganda "Mahsulot qo'shish" maydoni ochiladi (owner tasdiqladi):
   qator qaytib keladi va menyu balandligicha pastga siljiydi (menyu yashirin —
   ostida bo'sh yo'lak qolmasin), suzuvchi pastki qator esa yo'qoladi. */
.app.floating.add-open .add-bar {
  opacity: 1;
  transform: translateY(var(--tabbar-h));
  pointer-events: auto;
}

.app.floating.add-open .fbar-bot {
  opacity: 0;
  transform: translateY(20px);
}

.app.floating.add-open .fbar-bot > * {
  pointer-events: none;
}

/* Harakatni kamaytirish so'ralgan bo'lsa — o'tish deyarli bir zumda. */
@media (prefers-reduced-motion: reduce) {
  .topbar,
  .topbar > *,
  .add-bar,
  .tabbar,
  .main,
  .fbar,
  .fbar-prog-fill {
    transition-duration: 0.01ms;
  }
}