/* ══════════════════════════════════════════════════════════════
   Cognita AI — UI mikro-animatsiyalari (minimalistik)
   app.css DAN KEYIN yuklanadi. Faqat qo'shimcha qatlam.
   Qoidalar: animatsiya — transform/opacity; hover — @media(hover:hover);
   qisqa (.3–.5s), yumshoq, bezovta qilmaydigan.
   ══════════════════════════════════════════════════════════════ */

:root{
  --fx-out:cubic-bezier(.25,.6,.3,1);   /* yumshoq chiqish */
}

/* ══════════════ 1. KEYFRAMES ══════════════ */

/* pastdan yumshoq ko'tarilib paydo bo'lish */
@keyframes fx-rise{ from{opacity:0;transform:translate3d(0,10px,0)} to{opacity:1;transform:none} }
/* oddiy erib chiqish */
@keyframes fx-fade{ from{opacity:0} to{opacity:1} }
/* biroz kattalashib chiqish */
@keyframes fx-pop{ from{opacity:0;transform:scale(.97)} to{opacity:1;transform:none} }

/* ══════════════ 2. SAHIFA KIRISHI ══════════════ */

.top{ animation:fx-fade .45s var(--fx-out) backwards }
.stagebox{ animation:fx-rise .5s var(--fx-out) 60ms backwards }
.composer{ animation:fx-rise .5s var(--fx-out) 120ms backwards }

.hello h1{ animation:fx-rise .45s var(--fx-out) 100ms backwards }
.hello p{ animation:fx-rise .45s var(--fx-out) 160ms backwards }
.hello .hint{ animation:fx-fade .6s var(--fx-out) 420ms backwards }

/* ══════════════ 3. KARTOCHKALAR ══════════════ */

.chip-card{ animation:fx-rise .45s var(--fx-out) backwards }
.chips .chip-card:nth-child(1){ animation-delay:.2s }
.chips .chip-card:nth-child(2){ animation-delay:.26s }
.chips .chip-card:nth-child(3){ animation-delay:.32s }
.chips .chip-card:nth-child(4){ animation-delay:.38s }

/* ══════════════ 4. XABARLAR ══════════════ */

.m-user{ animation:fx-rise .35s var(--fx-out) backwards }
.m-ai{ animation:fx-rise .35s var(--fx-out) backwards }

/* ══════════════ 5. YON PANEL ══════════════ */

.logo{ animation:fx-fade .4s var(--fx-out) backwards }
.side>button{ animation:fx-fade .4s var(--fx-out) backwards }
.side-sec{ animation:fx-fade .45s var(--fx-out) backwards }
.side-foot{ animation:fx-fade .5s var(--fx-out) .2s backwards }
.chat-item{ animation:fx-fade .3s var(--fx-out) backwards }

/* ══════════════ 6. BOSISH REAKSIYASI ══════════════ */

.new-btn:active,.side-q:active,.icon-btn:active,.box button:active,
.l-ctrl button:active,.l-ask button:active,.chip-card:active,
#lClose:active,#lExport:active,#lFull:active{
  transform:scale(.97);
}

/* ══════════════ 7. YUKLANISH HOLATLARI ══════════════ */

/* skeleton — dars/kontent yuklanayotganda: <div class="shimmer"> */
@keyframes fx-shimmer{ from{transform:translate3d(-100%,0,0)} to{transform:translate3d(100%,0,0)} }
.shimmer{
  position:relative;overflow:hidden;border-radius:10px;
  background:rgba(255,255,255,.05);
}
.shimmer::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 50%,transparent);
  animation:fx-shimmer 1.6s linear infinite;
}

.l-loading.show{ animation:fx-fade .35s var(--fx-out) backwards }

/* ══════════════ 8. DARS REJIMI ══════════════ */

body.lesson .l-stage{ animation:fx-fade .4s var(--fx-out) backwards }
body.lesson .l-side{ animation:fx-fade .4s var(--fx-out) 80ms backwards }

/* yangi slayd matni — yumshoq almashinuv */
.l-narr{ animation:fx-fade .4s var(--fx-out) backwards }

/* eksport menyusi — scale + fade, transform-origin yuqori-chapda */
.exp-menu{
  position:fixed;z-index:120;display:flex;flex-direction:column;gap:2px;min-width:196px;
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:12px;padding:6px;
  box-shadow:0 14px 36px rgba(0,0,0,.45);
  transform-origin:top left;opacity:0;transform:translate3d(0,-5px,0) scale(.96);
  pointer-events:none;visibility:hidden;
  transition:opacity .18s var(--fx-out),transform .18s var(--fx-out),visibility 0s .18s;
}
.exp-menu.show{
  opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .2s var(--fx-out),transform .2s var(--fx-out),visibility 0s;
}
.exp-menu button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:none;border-radius:9px;color:var(--txt);
  font-family:var(--body);font-size:.84rem;padding:9px 10px;
  transition:background .18s;
}
.exp-menu button i{ font-style:normal }
.exp-menu button span{ margin-left:auto;font-family:var(--mono);font-size:.6rem;color:var(--mut);letter-spacing:.06em }
@media (hover:hover){
  .exp-menu button:hover{ background:rgba(255,255,255,.06) }
}

/* ══════════════ 9. QAYTA ISHLATILADIGAN YORDAMCHI SINFLAR ══════════════ */
/* JS bu sinflarni qo'shishi mumkin: el.classList.add('fx-up') */

.fx-in{ animation:fx-fade .4s var(--fx-out) backwards }
.fx-up{ animation:fx-rise .4s var(--fx-out) backwards }
.fx-scale{ animation:fx-pop .35s var(--fx-out) backwards }
/* kechikish darajalari — stagger uchun */
.fx-d1{ animation-delay:.06s } .fx-d2{ animation-delay:.12s }
.fx-d3{ animation-delay:.18s } .fx-d4{ animation-delay:.24s }
.fx-d5{ animation-delay:.3s }  .fx-d6{ animation-delay:.36s }

/* ══════════════ 10. HARAKATNI KAMAYTIRISH (MAJBURIY) ══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  .shimmer::after{ display:none !important }
  .exp-menu{ transition:none !important }
  .chip-card:hover{ transform:none !important }
}