/* ============================================================
   Sof tilim AI — suhbat oynasi

   Tuzilishi: yuqorida oqim (xabarlar), pastda yozish maydoni.
   Oqim o'sadi, yozish maydoni doim ko'rinib turadi — shuning
   uchun ish maydoni to'liq balandlikka cho'ziladi va faqat
   oqimning ichi aylanadi.
   ============================================================ */

/* EKRANGA SIG'ISH — KOMPYUTER, PLANSHET VA TELEFONDA.

   Yozish maydoni doim ko'rinib turishi kerak. Buning uchun qobiq
   aynan ekran balandligida bo'ladi va ichkarida faqat xabarlar
   oqimi aylanadi.

   Balandlik QAT'IY SON BILAN berilmaydi (avval `100vh - 60px` edi
   va yozish maydoni ekran ostida qolgan): panel balandligi ekran
   o'lchamiga qarab o'zgaradi. O'rniga flex ishlatiladi — bo'sh
   joyni oqimning o'zi egallaydi.

   `dvh` telefon uchun: `vh` mobil brauzerda manzil qatori bilan
   birga hisoblanadi va sahifa ekrandan uzun bo'lib qoladi. `dvh`
   ni qo'llamaydigan brauzer yuqoridagi `vh` ni oladi. */
.st-app--ai {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  /* Qobiq — grid. Qatori odatda TARKIB bo'yicha o'lchanadi va past
     ekranda ish maydoni qobiqdan uzun bo'lib chiqadi (600 px li
     ekranda 662 px). `minmax(0, 1fr)` qatorni qobiq balandligiga
     tenglashtiradi va qisqarishga ruxsat beradi. */
  grid-template-rows: minmax(0, 1fr);
}
.st-app--ai .st-work { min-height: 0; height: 100%; }
.st-app--ai .st-side { height: 100%; }

.ai-oyna {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}

/* `display: flex` brauzerning `[hidden]` qoidasidan kuchliroq.
   Busiz bo'lim «yopiq» bo'lsa ham suhbat oynasi hammaga ko'rinib
   turadi: `stIsh` ga `hidden` qo'yilgani bilan hech narsa
   yashirilmaydi. Shuning uchun alohida yozilishi shart. */
.ai-oyna[hidden] { display: none; }

/* ---------- Xabarlar oqimi ----------------------------------- */

.ai-oqim {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 24px 20px 8px;
}
.ai-ichi { max-width: 760px; margin: 0 auto; }

/* ---------- Boshlang'ich ko'rinish ---------------------------- */

.ai-bosh {
  max-width: 620px; margin: 0 auto; padding: 40px 0 20px; text-align: center;
}
.ai-bosh__nishon { width: 46px; height: 46px; margin-bottom: 16px; }
.ai-bosh h1 {
  margin: 0 0 8px; font-size: 27px; font-weight: 700; color: var(--st-navy);
  letter-spacing: -.01em;
}
.ai-bosh p { margin: 0; font-size: 15.4px; color: var(--st-ink-soft); line-height: 1.6; }

.ai-namunalar {
  margin-top: 26px; display: grid; gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-namunalar[hidden] { display: none; }
.ai-namunalar button {
  padding: 12px 14px; border: 1px solid var(--st-line); border-radius: 12px;
  background: var(--st-panel); font-family: var(--st-font); font-size: 14px;
  color: var(--st-ink); text-align: left; line-height: 1.4; cursor: pointer;
}
.ai-namunalar button:hover { border-color: var(--st-blue); color: var(--st-blue); }

/* ---------- Xabarlar ------------------------------------------ */

.ai-xabar { max-width: 760px; margin: 0 auto 20px; display: flex; gap: 12px; }
.ai-xabar__belgi {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.ai-xabar--men .ai-xabar__belgi { background: var(--st-bg-tint); color: var(--st-blue); }
.ai-xabar--ai .ai-xabar__belgi { background: var(--st-navy); }
.ai-xabar--ai .ai-xabar__belgi img { width: 17px; height: 17px; }

.ai-xabar__tana {
  flex: 1 1 auto; min-width: 0;
  font-size: 15.4px; line-height: 1.68; color: var(--st-ink);
  white-space: pre-wrap; word-wrap: break-word;
}
.ai-xabar--men .ai-xabar__tana {
  background: var(--st-bg-tint); padding: 11px 15px; border-radius: 13px;
}
.ai-xabar__fayl {
  margin-bottom: 7px; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; background: var(--st-panel);
  border: 1px solid var(--st-line); font-size: 12.8px; color: var(--st-muted);
}

/* Kutish belgisi — uchta nuqta */
.ai-kutish { display: inline-flex; gap: 4px; padding-top: 6px; }
.ai-kutish i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--st-muted);
  animation: ai-nuqta 1.1s infinite ease-in-out;
}
.ai-kutish i:nth-child(2) { animation-delay: .15s; }
.ai-kutish i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-nuqta {
  0%, 70%, 100% { opacity: .28; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-3px); }
}

.ai-xato {
  max-width: 760px; margin: 0 auto 20px; padding: 11px 15px;
  border: 1px solid #F5C6C2; border-radius: 12px; background: #FFF6F5;
  font-size: 14.2px; color: #8A2C22; line-height: 1.55;
}

/* ---------- Yozish maydoni ------------------------------------ */

.ai-yozuv {
  flex: none; padding: 10px 20px 16px;
  background: linear-gradient(to top, var(--st-bg) 68%, transparent);
}
.ai-yozuv__quti {
  max-width: 760px; margin: 0 auto; padding: 10px 12px 8px;
  border: 1px solid var(--st-line); border-radius: 18px;
  background: var(--st-panel); box-shadow: 0 3px 14px rgba(10, 23, 48, .05);
}
.ai-yozuv__quti:focus-within { border-color: var(--st-blue); }

.ai-yozuv textarea {
  display: block; width: 100%; border: 0; resize: none;
  /* Past ekranda (masalan yotiq telefonda) yozish maydoni oqimni
     butunlay bosib qo'ymasligi kerak */
  max-height: min(200px, 32vh);
  background: none; font-family: var(--st-font); font-size: 15.4px;
  line-height: 1.6; color: var(--st-ink); padding: 4px 4px 6px;
}
.ai-yozuv textarea:focus { outline: none; }
.ai-yozuv textarea::placeholder { color: var(--st-muted); }

.ai-yozuv__oyoq { display: flex; align-items: center; gap: 10px; }
.ai-hisob { margin-left: auto; font-size: 12.4px; color: var(--st-muted); }
.ai-sozlar { font-size: 12.4px; color: var(--st-muted); white-space: nowrap; }
.ai-sozlar.is-oshdi { color: #c0392b; font-weight: 600; }

.ai-tugma {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 999px; background: none;
  font-family: var(--st-font); font-size: 13.4px; cursor: pointer;
}
.ai-tugma--fayl {
  padding: 7px 12px; border: 1px solid var(--st-line); color: var(--st-ink-soft);
}
.ai-tugma--fayl svg { width: 15px; height: 15px; }
.ai-tugma--fayl:hover { border-color: var(--st-blue); color: var(--st-blue); }

.ai-tugma--yubor {
  width: 34px; height: 34px; justify-content: center; padding: 0;
  background: var(--st-blue); color: #fff;
}
.ai-tugma--yubor svg { width: 17px; height: 17px; }
.ai-tugma--yubor:hover { background: var(--st-navy); }
.ai-tugma--yubor:disabled { opacity: .35; cursor: default; background: var(--st-blue); }

.ai-fayl {
  margin-bottom: 8px; display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 11px; background: var(--st-bg-tint);
  font-size: 13.4px; color: var(--st-ink-soft);
}
/* Fayl qo'shilmaganda qator yashirin turishi kerak — `display: flex`
   `[hidden]` dan kuchli, shuning uchun alohida yoziladi (aks holda
   yozuv maydoni tepasida bo'sh kulrang chiziq ko'rinib turardi). */
.ai-fayl[hidden] { display: none; }
.ai-fayl b { color: var(--st-navy); font-weight: 600; }
.ai-fayl button {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--st-muted); padding: 0 2px;
}
.ai-fayl button:hover { color: #D92D20; }

.ai-ogoh {
  max-width: 760px; margin: 9px auto 0; text-align: center;
  font-size: 12.4px; color: var(--st-muted); line-height: 1.5;
}

/* MUSTAQIL AI JAVOBI — QIZIL OGOHLANTIRISH.

   Egasi (2026-09-26): «mustaqil AI savolga javob topolmasa
   qo'shing va bu javob mustaqil AI dan olingani uchun haqiqatga
   yaqin deb hisoblanmaydi deb aniq qizil rangda yozing».

   Javobning o'zi odatdagidek ko'rinadi, ogohlantirish esa uning
   TEPASIDA, qizil ramka bilan turadi: o'quvchi o'qishdan oldin
   ko'radi. */
.ai-ai-ogoh {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid #F0B4AE; background: #FEF3F2;
  color: #B42318; font-size: 13px; line-height: 1.5; font-weight: 600;
}

/* O'z modelimiz — admin solishtiruvi (MODEL_REJIM). Faqat
   adminga chiqadi; eski javobdan ajralib tursin, lekin qizil
   ogohlantirish bilan adashmasin — ko'k chiziq. */
.ai-softilim {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  border: 1px dashed #84ADFF; background: #F5F8FF;
  font-size: 14px; line-height: 1.55;
}
.ai-softilim__sar { font-size: 12px; font-weight: 700; color: #1D4ED8; margin-bottom: 6px; }
.ai-softilim__matn { white-space: pre-wrap; color: #101828; }
.ai-softilim__matn--xato { color: #B42318; }
.ai-softilim__eski { margin-top: 8px; font-size: 12.5px; color: #475467; white-space: pre-wrap; }

/* ---------- Javob ostidagi qator ------------------------------

   Javob qayerdan kelgani ko'rinib turishi kerak: baza javobi
   tekshirilgan, model javobi esa taxmin. */

.ai-oyoq {
  margin-top: 10px; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; font-size: 12.2px;
}
.ai-manba {
  padding: 3px 9px; border-radius: 999px; font-weight: 600;
  letter-spacing: .01em;
}
.ai-manba--baza { background: #E7F4EC; color: #16643A; }
.ai-manba--model { background: var(--st-bg-tint); color: var(--st-ink-soft); }
.ai-manba__izoh { color: var(--st-muted); }
.ai-nusxa {
  margin-left: auto; padding: 4px 10px; border: 1px solid var(--st-line);
  border-radius: 8px; background: none; font-family: var(--st-font);
  font-size: 12.2px; color: var(--st-ink-soft); cursor: pointer;
}
.ai-nusxa:hover { border-color: var(--st-blue); color: var(--st-blue); }

.ai-manba--viki { background: #EEF3FB; color: #1F4E8C; }
.ai-manba__havola { color: var(--st-blue); text-decoration: none; }
.ai-manba__havola:hover { text-decoration: underline; }

/* Topshiriq tahlili — javob ustida */
.ai-tahlil {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  border: 1px dashed var(--st-line); font-size: 13px; white-space: normal;
  color: var(--st-ink-soft);
}
.ai-tahlil summary {
  cursor: pointer; font-weight: 600; color: var(--st-navy); font-size: 12.8px;
}
.ai-tahlil ul { margin: 6px 0 0; padding-left: 18px; }
.ai-tahlil li { margin-bottom: 2px; line-height: 1.5; }
.ai-tahlil__ichki { margin-left: 14px; list-style: circle; }
.ai-xabar--tahlil .ai-tahlil { margin-bottom: 0; }

/* Ishonchli manbada javob topilmadi */
.ai-topilmadi {
  padding: 11px 14px; border-radius: 12px; background: #FFF8E6;
  border: 1px solid #F1DDA8; color: #5C4610; font-size: 14px;
}
.ai-topilmadi b { color: #4A3808; font-weight: 650; }

/* Bazamiz topgan tuzatishlar ro'yxati */
.ai-tuzatish {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--st-bg-tint); font-size: 13.4px; white-space: normal;
}
.ai-tuzatish b { color: var(--st-navy); font-weight: 650; }
.ai-tuzatish ul { margin: 8px 0 0; padding-left: 18px; }
.ai-tuzatish li { margin-bottom: 4px; line-height: 1.55; }
.ai-tuzatish s { color: var(--st-muted); }
.ai-tuzatish i { color: var(--st-muted); font-style: normal; font-size: 12.2px; }

/* ---------- Boshlang'ich holat: hammasi o'rtada ----------------

   Suhbat boshlanmaguncha salomlashuv, yozuv maydoni va namunalar
   ekran o'rtasida bir ustunda turadi. Birinchi xabardan keyin
   `is-bosh` olinadi — oqim cho'ziladi, yozuv maydoni pastga
   tushadi. */

.ai-oyna.is-bosh { justify-content: center; padding-bottom: 8vh; }
.ai-oyna.is-bosh .ai-oqim { flex: none; overflow: visible; padding-bottom: 0; }
.ai-oyna.is-bosh .ai-yozuv { background: none; }
.ai-oyna.is-bosh .ai-ogoh { display: none; }

.ai-bosh { max-width: 760px; padding: 0 0 18px; }
.ai-bosh h1 {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 30px; font-weight: 600;
}
.ai-bosh h1 .ai-bosh__nishon { width: 36px; height: 36px; margin: 0; flex: none; }

/* ---------- Yozishmalar: chapdagi menyuda ---------------------

   Egasi (2026-09-20): «menyu xuddi ChatGPT va Claudega o'xshash
   bo'lsin, yozishmalar tarixi ham aynan chap tarafdagi menyuda
   bo'lsin». Blok menyuning boshiga, logotipdan keyin qo'yiladi:
   avval «Yangi suhbat», keyin yozishmalar ro'yxati, ulardan
   pastda esa dasturning odatdagi bo'limlari qoladi. */

/* `flex: none` SHART: yon menyu — ustunga yotqizilgan flex va
   bloklar sig'masa siqiladi. Busiz butun blok 26 px ga tushib,
   tugma bilan ro'yxat quyidagi bo'limlar ustiga chiqib ketdi. */
.ai-yon { display: flex; flex-direction: column; flex: none; }

.ai-yon__yangi {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; margin-bottom: 4px;
  border: 1px solid var(--st-line, #e3e8ef); border-radius: 10px;
  font-size: 14px; font-weight: 500; text-align: left;
}
.ai-yon__yangi:hover { background: var(--st-yumshoq, #f3f6fb); }
.ai-yon__yangi .ic { width: 17px; height: 17px; flex: none; }

.ai-yon__sarlavha { margin-top: 10px; }

/* Ro'yxat o'zi suriladi: bo'limlar menyusi doim ko'rinib tursin */
.ai-yon__royxat {
  overflow-y: auto; max-height: min(42vh, 340px);
  margin: 0 -4px; padding: 0 4px;
}

.ai-yon__qator {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: 9px; cursor: pointer;
  color: var(--st-ink-soft);
}
.ai-yon__qator:hover { background: var(--st-yumshoq, #f3f6fb); }
.ai-yon__qator.is-joriy {
  background: var(--st-yumshoq, #f3f6fb); color: var(--st-ink, #10213c);
  font-weight: 500;
}
.ai-yon__nom {
  flex: 1; min-width: 0; font-size: 13.4px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-yon__sana { font-size: 11.4px; opacity: .7; flex: none; }
.ai-yon__ochir {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  font-size: 15px; line-height: 1; opacity: 0;
}
.ai-yon__qator:hover .ai-yon__ochir { opacity: .55; }
.ai-yon__ochir:hover { opacity: 1; color: #b3261e; }
.ai-yon__yoq {
  padding: 8px 9px; font-size: 12.6px; color: var(--st-ink-soft); opacity: .8;
}

/* Menyu yig'ilganda ro'yxat sig'maydi — faqat «+» qoladi */
.st-tor .ai-yon__royxat,
.st-tor .ai-yon__sarlavha,
.st-tor .ai-yon__yangi span { display: none; }
.st-tor .ai-yon__yangi { justify-content: center; padding: 9px 0; }

/* SHIOR — Abdulla Qodiriy so'zi (egasi, 2026-09-20).

   O'ngdan chapga sekin suriladi. Tez yurgani ko'zni charchatadi
   va o'qib ulgurilmaydi: bir aylanish 26 soniya.

   Matn yozila boshlaganda yo'qoladi — shu payt ekranda diqqatni
   tortadigan qimirlayotgan narsa turmasligi kerak. */
.ai-shior {
  overflow: hidden; margin-top: 10px; height: 22px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  opacity: 1; transition: opacity .3s ease;
}
.ai-shior.is-yashirin { opacity: 0; pointer-events: none; }
.ai-shior__matn {
  display: inline-block; white-space: nowrap;
  font-size: 13.2px; color: var(--st-ink-soft);
  will-change: transform;
  animation: ai-shior 26s linear infinite;
}
@keyframes ai-shior {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
/* Harakatni kamaytirish so'ralgan bo'lsa — shior qimirlamaydi */
@media (prefers-reduced-motion: reduce) {
  .ai-shior__matn { animation: none; transform: none; }
  .ai-shior { text-align: center; }
}

.ai-namunalar {
  max-width: 760px; margin: 14px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.ai-namunalar button {
  padding: 7px 13px; border-radius: 999px; font-size: 13.4px;
  color: var(--st-ink-soft);
}

/* ---------- Yozuv maydoni: tugmalar va tanlagich --------------- */

.ai-yozuv textarea { min-height: 48px; }
.ai-tugma--fayl {
  width: 34px; height: 34px; padding: 0; justify-content: center;
}
.ai-tugma--fayl svg { width: 18px; height: 18px; }

.ai-tanla { position: relative; }
.ai-tanla__tugma {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 10px; border: 0; border-radius: 9px; background: none;
  font-family: var(--st-font); font-size: 13.4px; font-weight: 500;
  color: var(--st-ink-soft); cursor: pointer;
}
.ai-tanla__tugma svg { width: 14px; height: 14px; }
.ai-tanla__tugma:hover,
.ai-tanla__tugma[aria-expanded="true"] { background: var(--st-bg-tint); color: var(--st-navy); }

.ai-tanla__menyu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20;
  width: 290px; padding: 6px; border: 1px solid var(--st-line);
  border-radius: 14px; background: var(--st-panel);
  box-shadow: 0 10px 30px rgba(10, 23, 48, .14);
}
.ai-tanla__menyu[hidden] { display: none; }
/* Boshlang'ich holatda yozuv maydoni o'rtada — menyu pastga ochiladi */
.ai-oyna.is-bosh .ai-tanla__menyu { bottom: auto; top: calc(100% + 8px); }
.ai-tanla__menyu button {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 9px 34px 9px 11px; border: 0; border-radius: 9px; background: none;
  font-family: var(--st-font); cursor: pointer;
}
.ai-tanla__menyu button:hover { background: var(--st-bg-tint); }
.ai-tanla__menyu button[hidden] { display: none; }
.ai-tanla__menyu b { display: block; font-size: 14px; font-weight: 600; color: var(--st-navy); }
.ai-tanla__menyu span {
  display: block; margin-top: 2px; font-size: 12.4px; line-height: 1.45;
  color: var(--st-muted);
}
.ai-tanla__menyu button.is-active::after {
  content: ''; position: absolute; right: 12px; top: 14px;
  width: 12px; height: 7px; border: solid var(--st-blue);
  border-width: 0 0 2px 2px; transform: rotate(-45deg);
}

/* Ustoz profili (o'quvchi / talaba) — yozuv maydoni tepasida */
.ai-profil { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; }
.ai-profil[hidden] { display: none; }
.ai-profil button {
  padding: 5px 11px; border: 1px solid var(--st-line); border-radius: 999px;
  background: none; font-family: var(--st-font); font-size: 13px; font-weight: 600;
  color: var(--st-ink-soft); cursor: pointer;
}
.ai-profil button span { font-weight: 400; color: var(--st-muted); }
.ai-profil button:hover { background: var(--st-bg-tint); }
.ai-profil button[aria-checked="true"] {
  border-color: var(--st-blue); background: var(--st-bg-tint); color: var(--st-navy);
}
.ai-profil button:disabled { opacity: .55; cursor: default; }
/* Ustoz ishga tushguncha (egasi, 2026-10-19): yozuv maydonida qizil
   «tez orada» yozuvi, yozib bo'lmaydi */
.ai-yozuv textarea.is-tez-orada { cursor: not-allowed; }
.ai-yozuv textarea.is-tez-orada::placeholder { color: #B42318; font-weight: 600; opacity: 1; }

/* ---------- Xabarlar: foydalanuvchi o'ngda, javob ochiq -------- */

.ai-xabar--men { justify-content: flex-end; }
.ai-xabar--men .ai-xabar__tana {
  flex: 0 1 auto; max-width: 80%; white-space: pre-wrap;
}
.ai-xabar--ai .ai-xabar__tana { white-space: normal; }

.ai-matn p { margin: 0 0 10px; }
.ai-matn p:last-child { margin-bottom: 0; }
.ai-matn .ai-sarlavha { margin: 14px 0 6px; font-weight: 650; color: var(--st-navy); }
.ai-matn .ai-sarlavha:first-child { margin-top: 0; }
.ai-matn ul, .ai-matn ol { margin: 4px 0 10px; padding-left: 22px; }
.ai-matn li { margin-bottom: 4px; }
.ai-matn .ai-davom { color: var(--st-ink-soft); font-size: 14.4px; }
.ai-matn blockquote {
  margin: 6px 0 12px; padding: 10px 14px; border-left: 3px solid var(--st-blue);
  border-radius: 0 10px 10px 0; background: var(--st-bg-tint);
}
.ai-matn b { font-weight: 650; color: var(--st-navy); }
.ai-matn a { color: var(--st-blue); word-break: break-all; }
.ai-kursor {
  display: inline-block; width: 8px; height: 8px; margin-left: 3px;
  border-radius: 50%; background: var(--st-navy); vertical-align: middle;
}

.ai-manba--tashqi { background: #EEF3FB; color: #1F4E8C; }
.ai-bolim { color: var(--st-blue); text-decoration: none; font-weight: 500; }
.ai-bolim:hover { text-decoration: underline; }
.ai-nusxa { display: inline-flex; align-items: center; gap: 5px; }
.ai-nusxa svg { width: 14px; height: 14px; }

/* Tugmalar: aniqlashtirish (asosiy) va keyingi qadam */
.ai-tugmalar { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.ai-tugmalar button {
  padding: 6px 12px; border: 1px solid var(--st-line); border-radius: 999px;
  background: var(--st-panel); font-family: var(--st-font); font-size: 13px;
  color: var(--st-ink-soft); cursor: pointer;
}
.ai-tugmalar button:hover { border-color: var(--st-blue); color: var(--st-blue); }
.ai-tugmalar--asosiy button {
  padding: 8px 14px; font-size: 13.8px; color: var(--st-navy);
  border-color: #C9D6EC; background: #F4F7FD;
}

/* ---------- Tor ekran ----------------------------------------- */

@media (max-width: 760px) {
  .ai-oqim { padding: 18px 14px 6px; }
  .ai-xabar, .ai-xato, .ai-yozuv__quti, .ai-ogoh { max-width: none; }
  .ai-ogoh { font-size: 11.6px; }
  .ai-yozuv { padding: 8px 14px 12px; }
  .ai-bosh { padding: 0 0 14px; }
  .ai-bosh h1 { font-size: 22px; flex-direction: column; gap: 10px; }
  .ai-bosh h1 .ai-bosh__nishon { width: 28px; height: 28px; }
  .ai-tanla__menyu { width: min(290px, calc(100vw - 40px)); }
  .ai-xabar--men .ai-xabar__tana { max-width: 90%; }
  .ai-nusxa { margin-left: 0; }
}