/* @rozgor-part 10/10 — TO'LIQ EKRANLI ICHKI EKRANLAR + 'Bot haqida'
   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. */
/* --- To'liq ekranli ichki ekranlar ----------------------------------------
   Ikkitasi bir xil qolipda: "👥 Oila" va "ℹ️ Bot haqida". Bir vaqtda faqat
   BITTASI ochiq (app.js). z-index 100 — pastki menyu (90) ustida, ya'ni
   ochilganda menyuni ham yopadi.
   NEGA guruhlangan tanlagich: ikki ekran ham AYNAN bir xil ko'rinishda bo'lishi
   kerak, lekin sinf nomlari o'z bo'limini bildirib tursin. */
.family-screen,
.about-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--tg-bg);
  max-width: 640px;
  margin: 0 auto;
}

.family-head,
.about-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(10px + max(env(safe-area-inset-top), var(--tg-content-safe-top, 0px))) 12px 10px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.family-back,
.about-back {
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tg-link);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.family-back:active,
.about-back:active {
  background: rgba(128, 128, 128, 0.15);
}

.family-title,
.about-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.family-body,
.about-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
}

.family-hint {
  margin: 0 2px 12px;
  color: var(--tg-hint);
  font-size: 14px;
}

/* --- "ℹ️ Bot haqida" ekrani matni ----------------------------------------- */
.about-intro {
  margin: 0 2px 14px;
  font-size: 15px;
  line-height: 1.45;
}

.about-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-list li {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--tg-secondary-bg);
  font-size: 14px;
  line-height: 1.45;
}

.family-members {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.family-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--tg-secondary-bg);
  border-radius: var(--radius);
}

.family-member-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-member-tag {
  flex: none;
  color: var(--tg-hint);
  font-size: 12px;
  font-weight: 600;
}

/* A'zo qatoridagi amal tugmalari (✏️ nomlash, ❌ chiqarish). Ko'rinadigan o'lcham
   34x34 (o'zgarmadi), bosiladigan maydon esa 44x44 — ko'rinmas ::before qatlami. */
.family-act {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.family-act::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
}

.family-act:active {
  background: rgba(128, 128, 128, 0.15);
}

.family-act.danger:active {
  background: rgba(229, 72, 77, 0.15);
}

/* Inline nomlash tahriri (✏️ bosilganda a'zo qatori shu holatga o'tadi) */
.family-rename {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* font-size 16px — iOS zumlashiga qarshi. */
.family-rename-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: inherit;
  font-size: 16px;
  outline: none;
}

.family-rename-save,
.family-rename-cancel {
  flex: none;
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.family-rename-save {
  background: var(--tg-button);
  color: var(--tg-button-text);
}

.family-rename-cancel {
  background: transparent;
  color: var(--tg-hint);
}

/* "➕ A'zo qo'shish" tugmasi */
.family-add {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  padding: 13px 16px;
  background: var(--tg-button);
  color: var(--tg-button-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.family-add:active {
  opacity: 0.85;
}

/* Taklif havolasi qutisi */
.family-invite {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--tg-secondary-bg);
}

.family-invite-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-hint);
  margin-bottom: 8px;
}

.family-invite-link {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--tg-bg);
  color: var(--tg-link);
  font-size: 13px;
  word-break: break-all;
  margin-bottom: 8px;
}

.family-copy {
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  background: var(--tg-button);
  color: var(--tg-button-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.family-copy:active {
  opacity: 0.85;
}

.family-invite-hint {
  margin: 10px 0 0;
  color: var(--tg-hint);
  font-size: 13px;
}

/* Til tugmalari — sarlavhadagi "🌐" menyusi ichida (ilgari oila ekranida edi).
   Menyu ustun bo'lgani uchun har tugma to'liq kenglikda; bosish balandligi 44px. */
.lang-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--tg-secondary-bg);
  border-radius: 10px;
  padding: 11px 12px;
  background: var(--tg-secondary-bg);
  color: var(--tg-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.lang-btn:active {
  opacity: 0.85;
}

.lang-btn.active {
  background: var(--tg-button);
  color: var(--tg-button-text);
  border-color: var(--tg-button);
}

/* "Kim qo'shdi/oldi" (oila) — xira subsatr. 2-bosqichdan boshlab qatorda EMAS
   (har qatorda takrorlanardi), faqat mahsulot varag'ida. */
.item-who {
  margin-top: 3px;
  font-size: 12px;
  color: var(--tg-hint);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Kirish darvozasi (access gate) — ruxsatsiz foydalanuvchi. Butun ilovani
   yopadigan qatlam: BOTDAGIDEK faqat cheklangan xabar + bitta "🙋 Ruxsat
   so'rash" tugmasi ko'rinadi (ro'yxat/qo'shish paneli ostida qoladi).
   z-index oila ekranidan (100) YUQORI — darvoza hamma narsa ustida turadi.
   -------------------------------------------------------------------------- */
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  background: var(--tg-bg);
}

.access-gate-box {
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.access-gate-text {
  margin: 0 0 20px;
  /* Bot xabaridagi `\n\n` xatboshi bo'lib ko'rinsin (matn AYNAN bir xil). */
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tg-text);
}

.access-gate-btn {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--tg-button);
  color: var(--tg-button-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.access-gate-btn:active {
  opacity: 0.85;
}

.access-gate-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* "So'rov yuborildi, javob kutilyapti" — tugma o'rnida (tugma yo'qoladi). */
.access-gate-wait {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--tg-secondary-bg);
  color: var(--tg-hint);
  font-size: 15px;
  font-weight: 600;
}