/* mirzo-web — keng yuz ASOSI (`/`, kirish va ekran sahifalari).

   SPRINT-80 T549 dan bu faylda faqat ASOS (SPRINT-80 §2, §7-1): palitra
   hosilasi, shrift, rol tokenlari, reset, harakat darajalari va karkas
   JOYLASHUVI (`.ilova` to'ri, bo'lim qobiqlari, navigator va o'ng panel
   o'rni). Ko'rinish — hammasi `chiroq.css` da (u shu fayldan KEYIN
   yuklanadi). Yangi komponent qoidasi bu yerga YOZILMAYDI; fayl faqat
   kichrayadi (`tests/chiroq_qamrovi.rs::USLUB_SHIFT`). Qolgan har
   bo'lakning sababi — `olchovlar/t549/README.md` §3.

   RANG BU YERDA TANLANMAYDI: palitra `../os-ilova/design-tokens.toml`
   dan, hex faqat hosila blokda (`tests/palitra.rs`). */

/* ==== PALITRA: HOSILA — QO'LDA TAHRIRLANMAYDI ====
   Manba: ../os-ilova/design-tokens.toml (PLAYBOOK §8).
   Yangilash: python3 scripts/palitra.py --yoz
   Tekshiruvchi: tests/palitra.rs — manbadan chetga chiqish QIZIL.
   Bu blokdagi `--palitra-*` — XOM manba qiymatlari; ular
   to'g'ridan-to'g'ri ishlatilmaydi, quyidagi ROL tokenlari
   (`--fon`, `--matn`, …) shulardan hosil bo'ladi. */
:root {
  --palitra-fon: #070B14;
  --palitra-matn: #E6EAF2;
  --palitra-sokin: #8FA0BC;
  --palitra-cyan: #00E5FF;
  --palitra-amber: #FFB300;
  --palitra-magenta: #FF2D95;
  --palitra-kok: #3D8BFF;
  --palitra-yashil: #22FF88;
  --palitra-qizil: #FF3B3B;
  --palitra-binafsha: #B388FF;
  --palitra-idle: #008999;
  --palitra-tong_fon: #F3F6F9;
  --palitra-tong_sirt: #FFFFFF;
  --palitra-tong_sirt2: #F7F9FB;
  --palitra-tong_sirt3: #EEF2F6;
  --palitra-tong_matn: #0B1220;
  --palitra-tong_matn2: #1F2937;
  --palitra-tong_sokin: #4A5468;
  --palitra-tong_xira: #677186;
  --palitra-tong_asos: #009AA8;
  --palitra-tong_asos_matn: #007287;
  --palitra-tong_asos_2: #0077A9;
  --palitra-tong_yalpiz: #00A768;
  --palitra-tong_yalpiz_matn: #007445;
  --palitra-tong_qahrabo: #E89D00;
  --palitra-tong_qahrabo_matn: #A65D00;
  --palitra-tong_anor: #EA3B48;
  --palitra-tong_anor_matn: #BE2132;
  --palitra-tong_binafsha: #7A5BDD;
}
/* ==== PALITRA HOSILASI TUGADI ==== */

/* --- Shrift (SPRINT-75 T508) — Geist va Geist Mono variable, repoda
   (`src/ui/shrift/`), CDN yo'q. `font-weight: 100 900` — faylning `wght`
   o'qi. Ikki yuzda AYNAN bir xil (`tests/bitta_miya.rs`). */
@font-face {
  font-family: "Geist";
  src: url("/shrift/geist.woff2?v=061875999cbe539d") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/shrift/geist-mono.woff2?v=061875999cbe539d") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==== ROL TOKENLARI — IKKI YUZDA AYNAN BIR XIL ====
   `uslub.css` va `mobil.css` da BAYTMA-BAYT teng
   (`tests/palitra.rs::the_role_tokens_are_identical_in_both_faces`).
   Hex YO'Q: har qiymat `var(--palitra-…)` yoki undan `color-mix`.

   TEMA. `korinish.js` `<html data-tema-joriy>` ni birinchi kadrdan OLDIN
   qo'yadi; atribut yo'q — Tun (`:root`). Tong — BITTA blok,
   `:root[data-tema-joriy="tong"]`. `@media (prefers-color-scheme)` YO'Q:
   «Tizimga ergash» ni JS hal qiladi.

   IKKI QAVAT. «Chiroq» qavati (`chiroq.css` faqat shuni o'qiydi):
   `--sirt*`, `--siyoh*`, `--chiziq*`, oilalar (`--feruza` … `--anor`,
   `--binafsha-chiroq`) va ularning `*-matn` shakli (≥4.5:1 —
   `palitra.rs::every_chiroq_text_token_reads_on_every_surface`). Eski
   rol nomlari (`--qatlam*`, `--matn`, `--sokin`, `--asos` …) — 80 da
   `chiroq.css` ga ko'chgan komponentlar o'z qiymati bilan o'qiydi;
   iste'molchisiz token T549 da olindi. Tong aksentlari Tong foni va
   `--qatlam2` ustida ≥4.5:1 (`palitra.rs::
   every_tong_text_accent_reads_on_the_tong_background`). */
:root {
  color-scheme: dark;
  /* Matn shrifti (T508). Geist'da yo'q glif (`ʻ` U+02BB — MANBA.md)
     stekning keyingi a'zosiga o'zi tushadi. */
  --shrift: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Mono shrift (T508, §4.4) — yorliq, yo'l, id. `data-shrift="os"` da
     ham shu: yorliq tili mono'ga bog'liq, u OS shriftiga ergashmaydi. */
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Neytral zina */
  --qarama: var(--palitra-matn);
  --fon: var(--palitra-fon);
  --matn: var(--palitra-matn);
  --sokin: var(--palitra-sokin);

  /* Aksentlar. `--asos` — sirt, nur, chegara; `--asos-matn` — MATN
     rangi (tunda ikkalasi bir xil, Tong'da matn to'qroq). */
  --asos: var(--palitra-cyan);
  --asos-matn: var(--asos);
  --yashil: var(--palitra-yashil);
  --qizil: var(--palitra-qizil);
  --sariq: var(--palitra-amber);
  --binafsha: var(--palitra-binafsha);
  --kok: var(--palitra-kok);
  /* Aksent ustidagi matn — oq EMAS: neon cyan ustida oq o'qilmaydi
     (kontrast ≈ 1.6:1), fon rangi esa qorong'i va o'qiladi. */
  --usti: var(--palitra-fon);

  --qatlam: color-mix(in srgb, var(--qarama) 4%, var(--fon));
  --qatlam2: color-mix(in srgb, var(--qarama) 8%, var(--fon));
  --chegara: color-mix(in srgb, var(--qarama) 10%, var(--fon));

  /* Suzib turgan qatlamning soyasi (SPRINT-17). Yagona rol tokeni
     `--fon`/`--qarama` juftidan HOSIL BO'LMAYDI: soya ikkala temada
     ham QORONG'I bo'lishi kerak (yorug' fonda menyu panel ustida
     suzayotgani ko'rinmay qolgan edi, 2026-09-08) — faqat kuchi
     temaga qarab o'zgaradi. */
  --soya: color-mix(in srgb, var(--palitra-fon) 70%, transparent);


  /* Agentlar (§3.6) — javob egasining rangi. Xaritasi `oila` dan (JS
     faqat `data-oila` qo'yadi), notanish egasi — sokin. */
  --agent-mirzo: var(--asos-matn);
  --agent-claude: var(--sariq);
  --agent-chatgpt: var(--yashil);
  --agent-perplexity: var(--binafsha);
  --agent-boshqa: var(--sokin);


  /* LED tili (§3.5) — jadval YOPIQ, yangi holat ixtiro qilinmaydi.
     Bajarilmoqda — `kok` (T230). */
  --led-kutish: var(--palitra-idle);
  --led-bajar: var(--palitra-kok);
  --led-toxtadi: var(--sokin);

  /* Panel (§3.7-2) — fonga 16% `kok` qo'shilgan ko'kish qorong'i,
     shaffof; `--panel-qalin` — 6% li qalin fon. */
  --panel2: color-mix(in srgb, color-mix(in srgb, var(--palitra-kok) 16%, var(--palitra-fon)) 72%, transparent);
  --panel-qalin: color-mix(in srgb, color-mix(in srgb, var(--palitra-kok) 6%, var(--palitra-fon)) 92%, transparent);
  --kiritma: color-mix(in srgb, var(--palitra-fon) 72%, transparent);
  --chiziq: color-mix(in srgb, var(--palitra-sokin) 16%, transparent);
  --chiziq2: color-mix(in srgb, var(--palitra-sokin) 28%, transparent);
  --chegara-a: color-mix(in srgb, var(--asos) 55%, transparent);
  --chegara-b: color-mix(in srgb, var(--binafsha) 40%, transparent);
  --soya-panel: 0 24px 60px color-mix(in srgb, var(--palitra-fon) 70%, transparent);

  /* Nur — hover/faol sirtning yog'dusi (`box-shadow`, GTK4 ga ham
     ko'chadi — §3.9). */
  --nur: 0 0 18px color-mix(in srgb, var(--asos) 45%, transparent);

  /* Fon qatlami (`.koinot`). Pushti/binafsha tumanlik — maketdagi
     qiymat (foydalanuvchi: 2-versiyaning ~35 %i). Yulduz — manbadagi
     eng oq rang (`matn`), sof oq palitrada yo'q. */
  --yulduz: var(--palitra-matn);
  --yulduz-kuch: 0.9;
  --yulduz-nur: color-mix(in srgb, var(--asos) 45%, transparent);
  --tuman1: color-mix(in srgb, var(--palitra-binafsha) 9%, transparent);
  --tuman2: color-mix(in srgb, var(--palitra-magenta) 5.5%, transparent);
  --tuman3: color-mix(in srgb, var(--palitra-cyan) 16%, transparent);

  /* Burchak qo'shimchasi (2026-10-08). Blok va tugma burchagi
     `calc(Npx + var(--yumaloq))` bilan yoziladi: tunda 0 — burchak
     yozilgan qiymatning o'zi; Tong'da hamma joyda BIR XIL miqdorga
     yumaloqroq, ya'ni ichki va tashqi burchak farqi saqlanadi. */
  --yumaloq: 0px;

  /* «Chiroq» qavati (yuqoridagi izoh). Sirt zinasi — `--qatlam` bilan
     bir formula, Tong'da `tong_sirt*` ning o'zi. */
  --sirt: color-mix(in srgb, var(--palitra-matn) 4%, var(--palitra-fon));
  --sirt-2: color-mix(in srgb, var(--palitra-matn) 2.5%, var(--palitra-fon));
  --sirt-3: color-mix(in srgb, var(--palitra-matn) 8%, var(--palitra-fon));
  --siyoh: var(--palitra-matn);
  --siyoh-2: color-mix(in srgb, var(--palitra-matn) 65%, var(--palitra-sokin));
  --siyoh-3: var(--palitra-sokin);
  /* Mono yorliq — eng xira, lekin `--sirt-3` ustida ham ≥4.5:1. */
  --siyoh-4: color-mix(in srgb, var(--palitra-sokin) 85%, var(--palitra-fon));
  --chiziq-2: var(--chiziq2);
  --feruza: var(--palitra-cyan);
  --feruza-2: var(--palitra-kok);
  --feruza-matn: var(--palitra-cyan);
  --yalpiz: var(--palitra-yashil);
  --yalpiz-matn: var(--palitra-yashil);
  --qahrabo: var(--palitra-amber);
  --qahrabo-matn: var(--palitra-amber);
  --anor: var(--palitra-qizil);
  --anor-matn: var(--palitra-qizil);
  --binafsha-chiroq: var(--palitra-binafsha);
  /* Asosiy tugma — gradient `--feruza-matn → --feruza-2`, yozuvi
     `--tugma-matn` (tunda qorong'i: neon ustida oq o'qilmaydi). Ikkala
     uchi yozuv bilan ≥4.5:1 — qulfi
     `tests/palitra.rs::the_primary_button_gradient_carries_its_label`. */
  --tugma-1-fon: linear-gradient(135deg, var(--feruza-matn), var(--feruza-2));
  --tugma-matn: var(--palitra-fon);

  /* Harakat (§3.8 — SPRINT-36 ham shu jadvaldan oladi). */
  --tez: 120ms;
  --orta: 250ms;
  --sekin: 600ms;
  --sakrash: cubic-bezier(0.2, 1.4, 0.4, 1);
  --chiqish: cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* TONG — «Chiroq» (2026-10-18): sovuq kulrang zamin, oq sirt, soya. Faqat formulasi farq
   qiladigan tokenlar shu yerda; qolgani (`--qatlam2`, `--chegara`,
   `--chegara-a`, `--agent-*` …) `var()` orqali o'zi ergashadi. */
:root[data-tema-joriy="tong"] {
  color-scheme: light;

  --qarama: var(--palitra-tong_matn);
  --fon: var(--palitra-tong_fon);
  --matn: var(--palitra-tong_matn);
  --sokin: var(--palitra-tong_sokin);

  /* `--asos` — to'ldirilgan SIRT (tugma, tanlangan bo'lak, chiziq) va
     ustida `--usti` (oq) turadi: shuning uchun «Chiroq» feruzasining
     MATN shakli (`tong_asos_matn`, 5.6:1), chiroq `tong_asos` emas
     (3.4:1). Matn aksentlari `--qatlam2` paneli (zamindan to'q) ustida
     ham ≥4.5:1: `tong_*_matn` ning o'zi yetmasa, `tong_matn` bilan
     ozgina to'qlashadi (foizlar o'lchangan, `tests/palitra.rs`). */
  --asos: var(--palitra-tong_asos_matn);
  --asos-matn: color-mix(in srgb, var(--palitra-tong_asos_matn) 92%, var(--palitra-tong_matn));
  --yashil: var(--palitra-tong_yalpiz_matn);
  --qizil: var(--palitra-tong_anor_matn);
  --sariq: color-mix(in srgb, var(--palitra-tong_qahrabo_matn) 86%, var(--palitra-tong_matn));
  --binafsha: color-mix(in srgb, var(--palitra-tong_binafsha) 82%, var(--palitra-tong_matn));
  --kok: color-mix(in srgb, var(--palitra-kok) 55%, var(--palitra-tong_matn));
  /* To'ldirilgan `--asos` ustidagi yozuv. NEON ustidagi yozuv (plitka,
     toast nishoni) buni olmaydi — u `tong_matn` (kosmik qatlam, 4). */
  --usti: var(--palitra-tong_sirt);

  /* Sirt zinasi (yuqoridagi «QOG'OZ» izohi). `--kiritma` — oq karta
     ICHIDAGI maydon: zamin rangidagi chuqurcha. */
  --qatlam: var(--palitra-tong_sirt);
  --panel2: var(--palitra-tong_sirt);
  --panel-qalin: var(--palitra-tong_sirt);
  --kiritma: var(--palitra-tong_fon);
  --chiziq: color-mix(in srgb, var(--palitra-tong_matn) 9%, transparent);
  --chiziq2: color-mix(in srgb, var(--palitra-tong_matn) 16%, transparent);

  /* Soya — kulrang (`tong_sokin`), qora emas: yorug' zaminda qora
     soya kir bo'lib ko'rinadi. Har daraja ikki qatlam: yaqin o'tkir
     chiziq + uzoq yumshoq yoyilma. */
  --soya: color-mix(in srgb, var(--palitra-tong_sokin) 26%, transparent);
  --soya-1:
    0 1px 2px color-mix(in srgb, var(--palitra-tong_matn) 7%, transparent),
    0 4px 12px -4px color-mix(in srgb, var(--palitra-tong_sokin) 24%, transparent);
  --soya-2:
    0 2px 4px color-mix(in srgb, var(--palitra-tong_matn) 7%, transparent),
    0 14px 30px -10px color-mix(in srgb, var(--palitra-tong_sokin) 38%, transparent);
  --soya-panel:
    0 1px 2px color-mix(in srgb, var(--palitra-tong_matn) 6%, transparent),
    0 12px 30px -10px color-mix(in srgb, var(--palitra-tong_sokin) 32%, transparent),
    0 30px 60px -28px color-mix(in srgb, var(--palitra-tong_sokin) 34%, transparent);
  /* Nur — fokus halqasi: `--asos` ning yupqa halqasi + yog'dusi (oq
     sirtda neon ko'rinmaydi, to'q feruza esa ko'rinadi). */
  --nur:
    0 0 0 3px color-mix(in srgb, var(--palitra-tong_asos) 22%, transparent),
    0 8px 22px -6px color-mix(in srgb, var(--asos) 55%, transparent);


  --yumaloq: 6px;

  /* «Chiroq» qavati — Tong xom ranglarining o'zi. */
  --sirt: var(--palitra-tong_sirt);
  --sirt-2: var(--palitra-tong_sirt2);
  --sirt-3: var(--palitra-tong_sirt3);
  --siyoh: var(--palitra-tong_matn);
  --siyoh-2: var(--palitra-tong_matn2);
  --siyoh-3: var(--palitra-tong_sokin);
  --siyoh-4: var(--palitra-tong_xira);
  --feruza: var(--palitra-tong_asos);
  --feruza-2: var(--palitra-tong_asos_2);
  --feruza-matn: var(--palitra-tong_asos_matn);
  --yalpiz: var(--palitra-tong_yalpiz);
  --yalpiz-matn: var(--palitra-tong_yalpiz_matn);
  --qahrabo: var(--palitra-tong_qahrabo);
  --qahrabo-matn: var(--palitra-tong_qahrabo_matn);
  --anor: var(--palitra-tong_anor);
  --anor-matn: var(--palitra-tong_anor_matn);
  --binafsha-chiroq: var(--palitra-tong_binafsha);
  --tugma-matn: var(--palitra-tong_sirt);

  /* LED — Tong'da kutish eng xira siyoh; bajarilmoqda (`kok`) va
     to'xtagan (`--sokin`) o'z rangida qoladi. */
  --led-kutish: var(--siyoh-4);
}
/* ==== ROL TOKENLARI TUGADI ==== */

/* --- Reset --------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--matn);
  font: 16px/1.45 var(--shrift);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Karkas: `.ilova` to'ri va markaz katagi ------------------------
   `min-height: 0` ZARUR: grid/flex bolasining `auto` minimumi uzun
   suhbatni sahifaga cho'zib, skrollni ichki idishdan olib qo'yardi.
   ≥1024px da ilova ANIQ balandlik oladi (`100dvh`), bolalar ichkariga
   aylanadi. */
.ilova {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.maydon {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Suhbat bo'limi qobig'i — `#suhbat-bolim.panel-markaz.chiroq`. `[hidden]`
   darvozasi SHART (`tests/yashirish_qoidasi.rs`). */
.panel-markaz {
  /* Ichidagi mutlaq joylashtirilgan bo'laklar shu blokka nisbatan
     o'lchanadi. */
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.panel-markaz[hidden] { display: none; }

@media (min-width: 1024px) {
  .ilova { height: 100dvh; }
  .maydon {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .panel-markaz { grid-column: 1; grid-row: 1; }
}

/* Tab satri (chap navigator ichida) — faqat ≥1024px; torroq oynaning
   yo'li `/m`. */
.tab-satri { display: none; }

@media (min-width: 1024px) {
  .tab-satri {
    flex: none;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
  }
}

.tab-tugma {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* --- Bo'lim qobiqlari — `.maydon` ning markaz katagi, `hidden` ni
   router qo'yadi; tor oynada `display: none`, shuning uchun `[hidden]`
   darvozasi faqat `@media` ichida. Ichi — `chiroq.css`. */
.ish-stoli-bolim { display: none; }

@media (min-width: 1024px) {
  .ish-stoli-bolim {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ish-stoli-bolim[hidden] { display: none; }
}

.ish-stoli-tana {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Tab qatlami — `hidden` ni `ish-stoli.js::ishTabniOch` qo'yadi. */
.ish-qatlam { display: block; }
.ish-qatlam[hidden] { display: none; }

.boshqaruv-bolim { display: none; }

@media (min-width: 1024px) {
  .boshqaruv-bolim {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .boshqaruv-bolim[hidden] { display: none; }
}

.boshqaruv-tana {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* --- Tepalik — faqat <1024px (keng oynada sarlavha yo'q, navigator chap
   ustunda). */
.tepalik {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--fon);
  border-bottom: 1px solid var(--chegara);
}

.brend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.brend img { flex: none; }

.tepalik-boshqaruv {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

@media (min-width: 1024px) {
  .tepalik { display: none; }
}

/* --- Chap ustun (≥1024px): brend · navigatorlar · suhbatlar · tema.
   `clamp` — trek oynaning choragi, 18rem dan tor emas. Ko'rinishi —
   `chiroq.css` «KARKAS — KENG YUZ». */
.yon-ustun { display: none; }

@media (min-width: 1024px) {
  .ilova {
    display: grid;
    grid-template-columns: clamp(18rem, 25vw, 22.25rem) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .yon-ustun {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 1rem 0 1rem 1rem;
  }
  .tepalik { grid-column: 2; grid-row: 1; }
  .aloqa { grid-column: 2; grid-row: 2; }
  .maydon { grid-column: 2; grid-row: 3; }

  .brend-tugma { flex: none; width: 100%; }
  .brend-ochil { display: inline-flex; margin-left: auto; }
  /* `[hidden]` darvozasi MAJBURIY (`tests/yashirish_qoidasi.rs`). */
  .bolim-menyu {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.5rem;
  }
  .bolim-menyu[hidden] { display: none; }
  .brend-matn {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .brend-nom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brend-holat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .brend-holat[hidden] { display: none; }
}

/* Suhbatlar ro'yxati — ustunning qolgan joyini oladi va ichiga aylanadi.
   Nom «…» bilan kesiladi, vaqt hech qachon. */
.suhbat-blok {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.suhbat-royxat {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

.suhbat-qator {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.suhbat-och {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.suhbat-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suhbat-vaqt { flex: none; }
.suhbat-ochir { flex: none; }

.suhbat-bosh,
.suhbat-izoh { margin: 0; }

.suhbat-izoh:empty { display: none; }

/* --- Suhbat bo'limi joylashuvi (T516) — qobiqqa bog'langan qoidalar.
   Bo'sh suhbatda bo'lim vertikal markazga yig'iladi; kiritish kartasi
   o'qish ustuni enida, pastga yopishgan. `--kiritish-ost` ni `chat.js`
   o'lchaydi: suhbat karta ostiga cho'ziladi, oxirgi xabar karta ustida
   to'xtaydi. */
.panel-markaz:has(.xabarlar:empty) { justify-content: center; }
.panel-markaz:has(.xabarlar:empty) > .suhbat { flex: none; overflow: visible; }
.panel-markaz:has(.xabarlar:empty) > .suhbat { margin-bottom: 0; padding-bottom: 0; }
.panel-markaz:has(.xabar) > .tez-kirish { display: none; }

.panel-markaz > .kiritish {
  width: min(calc(64rem - 50px), calc(100% - 2rem));
  margin: 24px auto 20px;
  position: sticky;
  bottom: 20px;
}
.panel-markaz:has(.xabarlar:empty) > .kiritish { position: static; margin: 28px auto 20px; }

.panel-markaz > .suhbat {
  margin-bottom: calc(-1 * var(--kiritish-ost, 0px));
  padding-bottom: calc(0.5rem + var(--kiritish-ost, 0px));
}

/* --- Orb zaxira doirasi (kirish sahifasi, `orb.js::iqtisodga`). Shader
   rangini takrorlaydi va xom `--palitra-*` ni o'qiydi — shuning uchun
   `chiroq.css` ga ko'chmaydi (`tests/palitra.rs`). `@property` — rang
   chindan interpolyatsiya qilinsin (`--eko-transition`, 180 ms). */
@property --orb-eko-rang {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

.orb-iqtisod {
  --orb-eko-rang: var(--palitra-idle);
  transition: --orb-eko-rang var(--eko-transition, 180ms) ease;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--orb-eko-rang) 95%, transparent) 0%,
      color-mix(in srgb, var(--orb-eko-rang) 55%, transparent) 38%,
      color-mix(in srgb, var(--orb-eko-rang) 12%, transparent) 62%,
      var(--palitra-fon) 78%);
}

.orb-iqtisod[data-holat="2"] { --orb-eko-rang: var(--palitra-amber); }
.orb-iqtisod[data-holat="4"] { --orb-eko-rang: var(--palitra-yashil); }
.orb-iqtisod[data-holat="5"] { --orb-eko-rang: var(--palitra-qizil); }
.orb-iqtisod[data-holat="6"] { --orb-eko-rang: var(--palitra-binafsha); }

/* --- Element asosi — maydon va tugma. Kiritish kartasi ichidagi maydon
   o'z halqasini kartadan oladi (`chiroq.css`). */
textarea {
  width: 100%;
  min-height: 2.5rem;
  max-height: 40vh;
  padding: 0.3rem 0.4rem 0.3rem 0;
  background: transparent;
  color: var(--matn);
  border: 0;
  font: inherit;
  line-height: 1.45;
  resize: none;
}

textarea::placeholder { color: var(--sokin); }

textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--asos);
  outline-offset: 2px;
}

button {
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: calc(10px + var(--yumaloq));
  background: var(--asos);
  color: var(--usti);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* --- Sozlamalar va Xizmatlar qobiqlari (ichi — `chiroq.css`). */
.sozlamalar-bolim {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--qatlam2);
  overflow: hidden;
}
.sozlamalar-bolim[hidden] { display: none; }

@media (min-width: 1024px) {
  .sozlamalar-bolim {
    position: static;
    z-index: auto;
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    background: transparent;
  }
}

.sozlamalar-tana {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.tugunlar-bolim { display: none; }

@media (min-width: 1024px) {
  .tugunlar-bolim {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .tugunlar-bolim[hidden] { display: none; }
}

/* --- Ko'rinish bo'limi: tema namunasi ikki temani joriy temadan qat'i
   nazar chizadi — xom palitra (`chiroq.css` uni o'qimaydi). Daraja izohi
   `html[data-harakat]` ga ergashadi; OS shrifti stek boshiga. */
.namuna-oyna {
  --nt-fon: var(--palitra-fon);
  --nt-panel: color-mix(in srgb, var(--palitra-kok) 16%, var(--palitra-fon));
  --nt-chiziq: color-mix(in srgb, var(--palitra-sokin) 30%, var(--palitra-fon));
  --nt-asos: var(--palitra-cyan);
  --ng-fon: var(--palitra-tong_fon);
  --ng-panel: var(--palitra-tong_sirt);
  --ng-chiziq: color-mix(in srgb, var(--palitra-tong_matn) 16%, var(--palitra-tong_fon));
  --ng-asos: var(--palitra-tong_asos);
}

.daraja-izoh > span { display: none; }
:root:not([data-harakat="yengil"]):not([data-harakat="yoq"]) .daraja-izoh > [data-daraja="toliq"],
:root[data-harakat="yengil"] .daraja-izoh > [data-daraja="yengil"],
:root[data-harakat="yoq"] .daraja-izoh > [data-daraja="yoq"] {
  display: inline;
}

:root[data-shrift="os"] {
  --shrift: "Mirzo OS shrifti", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ==== DARAJALAR VA TONG — IKKI YUZDA AYNAN BIR XIL ====
   Ikki faylda BAYTMA-BAYT teng (`tests/harakat_byudjeti.rs`). Harakat
   darajalari va tema almashuvi — `*` ga tegadigan yagona qoidalar;
   `chiroq.css` (fon, primitivlar) ham shular bilan to'xtaydi. */

/* «Yo'q» — animatsiya va o'tish yo'q (§5-14); media so'rovi — `korinish.js`
   ishlamasa ham OS ning «kam harakat» i. */
:root[data-harakat="yoq"] *,
:root[data-harakat="yoq"] *::before,
:root[data-harakat="yoq"] *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Tab yashirilgan (§3.7-4) — hamma animatsiya pauzada. */
:root[data-yashirin] *,
:root[data-yashirin] *::before,
:root[data-yashirin] *::after {
  animation-play-state: paused !important;
}

/* Tema almashuvi — `data-tema-otish` faqat almashuvda (`korinish.js`),
   `--sekin` da o'tadi; «Yo'q» darajasida o'tish yo'q. */
:root[data-tema-otish]:not([data-harakat="yoq"]) *,
:root[data-tema-otish]:not([data-harakat="yoq"]) *::before,
:root[data-tema-otish]:not([data-harakat="yoq"]) *::after {
  transition:
    background-color var(--sekin) ease,
    color var(--sekin) ease,
    border-color var(--sekin) ease,
    box-shadow var(--sekin) ease,
    fill var(--sekin) ease,
    stroke var(--sekin) ease !important;
}

/* Tong mikro harakati — HAMMA tugma: bosilganda siqiladi. Element
   selektori (0,0,1) — komponentning o'z `transition` i yutadi; `.chiroq`
   ostida bu aniqlik bilan yozib bo'lmaydi. */
:where(:root[data-tema-joriy="tong"]) button {
  transition:
    translate var(--tez) var(--chiqish),
    scale var(--tez) var(--chiqish),
    box-shadow var(--orta) ease,
    background-color var(--tez) ease,
    border-color var(--tez) ease,
    color var(--tez) ease;
}
:where(:root[data-tema-joriy="tong"]) button:active:not(:disabled) { scale: 0.97; }
/* ==== DARAJALAR VA TONG TUGADI ==== */


/* --- Tez tema almashtirgich (chap ustun tagi): ikki temani bir vaqtda
   ko'rsatadi — ranglari xom palitradan, shuning uchun shu yerda. */
.yon-past {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.tema-nomi-tong,
:root[data-tema-joriy="tong"] .tema-nomi-tun { display: none; }
:root[data-tema-joriy="tong"] .tema-nomi-tong { display: inline; }
.tema-almash {
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 76px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--chiziq2);
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--palitra-kok) 22%, var(--palitra-fon)),
    color-mix(in srgb, var(--palitra-binafsha) 22%, var(--palitra-fon)));
  transition: border-color var(--orta) ease, box-shadow var(--orta) ease;
}
:root[data-tema-joriy="tong"] .tema-almash {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--palitra-tong_asos) 22%, var(--palitra-tong_fon)),
    color-mix(in srgb, var(--palitra-binafsha) 25%, var(--palitra-tong_fon)));
}
.tema-almash:hover { border-color: var(--chegara-a); box-shadow: var(--nur); }
.tema-dumaloq {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--palitra-fon);
  background: radial-gradient(circle at 35% 30%, var(--palitra-matn), color-mix(in srgb, var(--palitra-kok) 30%, var(--palitra-matn)));
  box-shadow: 0 0 14px color-mix(in srgb, var(--palitra-binafsha) 70%, transparent);
  transition: transform var(--sekin) cubic-bezier(0.5, 1.6, 0.4, 1);
}
:root[data-tema-joriy="tong"] .tema-dumaloq {
  transform: translateX(40px) rotate(180deg);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--palitra-amber) 25%, var(--palitra-matn)), var(--palitra-amber));
  box-shadow: 0 0 16px color-mix(in srgb, var(--palitra-amber) 80%, transparent);
}
.tema-quyosh,
:root[data-tema-joriy="tong"] .tema-oy { display: none; }
:root[data-tema-joriy="tong"] .tema-quyosh { display: block; }

/* --- O'ng panel joyi (≥1024px, faqat Suhbat tab'ida): `#suhbat-bolim`
   `hidden` bo'lsa `:has` uni ham yashiradi; yig'ilgani —
   `data-yigilgan="ha"`. Ko'rinishi — `chiroq.css`. */
.ong-panel { display: none; }

@media (min-width: 1024px) {
  .maydon { grid-template-columns: minmax(0, 1fr) auto; }
  .ong-panel {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    width: 17rem;
    min-height: 0;
  }
  .maydon:has(> #suhbat-bolim[hidden]) > .ong-panel { display: none; }
  .ong-panel[data-yigilgan="ha"] { width: auto; }
  .ong-panel[data-yigilgan="ha"] .ong-panel-tana,
  .ong-panel[data-yigilgan="ha"] .ong-panel-sarlavha { display: none; }
}

.ong-panel-bosh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ong-panel-sarlavha { margin: 0; }
.ong-panel-yigish {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}

.ong-panel-tana {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Ikonkalar to'ri — ikki ustun, nom ikki qatorgacha. */
.ong-ikonlar {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ong-ikon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.ong-ikon-nom {
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
  line-height: 1.25;
  min-height: 2.5em;
}

/* --- Sahifa foni (ish maydoni): to'r va Tong'da ikki yorug' dog' —
   `<body>` psevdo-elementi `.chiroq` ostiga sig'maydi; maska xom
   palitradan. */
body:has(> .ilova > #yon-ustun)::before,
:root[data-tema-joriy="tong"] body:has(> .ilova > #yon-ustun)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body:has(> .ilova > #yon-ustun)::before {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--siyoh) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--siyoh) 4%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, var(--palitra-fon), transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, var(--palitra-fon), transparent 75%);
}
:root[data-tema-joriy="tong"] body:has(> .ilova > #yon-ustun)::after {
  background:
    radial-gradient(ellipse 50% 30% at 12% -5%, color-mix(in srgb, var(--feruza) 16%, transparent), transparent 60%),
    radial-gradient(ellipse 40% 25% at 92% 0%, color-mix(in srgb, var(--binafsha-chiroq) 12%, transparent), transparent 60%);
}