/* ═══ Motion polish ═══════════════════════════════════════════════════════════
 * Dimuat paling akhir. Satu sistem gerak untuk seluruh aplikasi:
 *  - token durasi & kurva yang konsisten (dipakai juga oleh aturan lama lewat --t / --ease)
 *  - animasi KELUAR untuk modal, sheet, drawer, menu, toast & scrim (sebelumnya hilang seketika)
 *  - masuk yang lebih cepat di layar yang sering dilihat (sambutan chat, login)
 *  - hanya properti murah (transform & opacity) untuk gerak yang sering/berulang
 * Pengguna "kurangi gerakan" (sistem atau Pengaturan) tetap dilayani aturan global di app.css.
 */
:root {
  --m-fast: 120ms;
  --m-base: 180ms;
  --m-slow: 260ms;
  --m-out: cubic-bezier(.22, 1, .36, 1);     /* masuk: cepat lalu melambat */
  --m-in: cubic-bezier(.4, 0, 1, 1);         /* keluar: pelan lalu cepat */
  --m-io: cubic-bezier(.65, 0, .35, 1);      /* bolak-balik / berulang */
  --m-spring: cubic-bezier(.34, 1.26, .64, 1); /* pantulan halus, tidak "membal" */
  /* Token lama dirapatkan: semua aturan yang memakai var(--t*) ikut lebih gesit & seragam. */
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 300ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: var(--m-out);
  --spring: var(--m-spring);
}

/* ── Keyframes keluar ── */
@keyframes m-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes m-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(.97); } }
@keyframes m-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes m-drawer-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes m-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes m-rise-sm { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes m-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── Lapisan overlay (kit.js menambahkan .overlay-layer & .is-closing) ── */
.overlay-layer.is-closing { pointer-events: none; }
.overlay-layer.is-closing > .scrim { animation: m-fade-out var(--m-base) var(--m-in) both; -webkit-backdrop-filter: none; backdrop-filter: none; } /* blur dilepas dulu: memudarkan blur layar penuh mahal */
.overlay-layer.is-closing > .modal { animation: m-pop-out 160ms var(--m-in) both; }
.overlay-layer.is-closing > .drawer { animation: m-drawer-out 220ms var(--m-in) both; }
.overlay-layer.is-closing > .model-popover { animation: m-fade-out var(--m-fast) var(--m-in) both; }
.modal { animation-duration: 200ms; animation-timing-function: var(--m-out); }
@media (max-width: 640px) {
  .modal { animation-duration: 280ms; } /* sheet naik dari bawah */
  .overlay-layer.is-closing > .modal { animation: m-sheet-out 220ms var(--m-in) both; }
}
.drawer { animation-duration: 280ms; animation-timing-function: var(--m-out); }

/* Menu & sheet akun */
.menu { transform-origin: top left; animation-duration: 140ms; animation-timing-function: var(--m-out); }
.menu.is-closing { pointer-events: none; animation: m-pop-out var(--m-fast) var(--m-in) both !important; }
.menu.profile-menu-sheet.is-closing { animation: m-sheet-out 200ms var(--m-in) both !important; }
.profile-menu-scrim.is-closing { pointer-events: none; animation: m-fade-out 200ms var(--m-in) both; }

/* Toast: masuk dengan pantulan halus, keluar meluncur turun */
.toast { animation: toast-in 240ms var(--m-spring) both; }
.toast.leaving { pointer-events: none; animation: m-toast-out 180ms var(--m-in) both; }

/* Sidebar ponsel: scrim memudar saat ditutup (shell.js menahan elemen sebentar) */
.sidebar-scrim.is-closing { pointer-events: none; animation: m-fade-out var(--m-slow) var(--m-in) both; }

/* ── Masuk yang lebih cepat di layar yang sering dilihat ── */
/* Sambutan chat: dulu ±1,25 detik sampai lengkap; sekarang ±0,5 detik dengan jeda bertahap. */
.welcome h1 { animation: m-rise-sm 340ms var(--m-out) 40ms both; }
.welcome p { animation: m-rise-sm 340ms var(--m-out) 90ms both; }
.starters { animation: m-rise-sm 340ms var(--m-out) 140ms both; }
.welcome-mascot { animation: m-rise-sm 380ms var(--m-out) both; }
.welcome-motif path { animation-duration: 900ms; }
/* Login / daftar */
.auth-card, .auth-animated .auth-card, .auth-editorial .auth-card { animation: m-rise-sm 360ms var(--m-out) both; }
.auth-result { animation-duration: 420ms; }
.auth-art .art-quote { animation-duration: 480ms; }
.auth-art .art-motif path { animation-duration: 1.4s; }

/* Pesan: hanya pesan terbaru yang "naik" — membuka percakapan panjang tidak lagi menganimasikan seluruh riwayat. */
.thread-inner > .msg { animation: none; }
.thread-inner > .msg:nth-last-child(-n+3) { animation: m-rise-sm 220ms var(--m-out) both; }

/* ── Skeleton: kilau digeser dengan transform (dulu background-position = repaint tiap frame) ── */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); animation: none; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--surface-3) 85%, transparent), transparent);
  animation: m-sweep 1.3s var(--m-io) infinite;
}

/* ── Interaksi mikro ── */
.btn { transition-timing-function: var(--m-out); }
.btn:active:not(:disabled) { transform: scale(.97); transition-duration: 80ms; }
.chip, .starters .chip { transition: transform var(--m-fast) var(--m-out), background-color var(--m-fast) var(--m-out), border-color var(--m-fast) var(--m-out), color var(--m-fast) var(--m-out); }
.chip:active { transform: scale(.97); }
.send-btn { transition: transform var(--m-fast) var(--m-out), background-color var(--m-fast) var(--m-out), opacity var(--m-fast) var(--m-out); }
.send-btn:active:not(:disabled) { transform: scale(.92); }
.menu button, .menu a { transition: background-color 90ms var(--m-out), color 90ms var(--m-out); }
.settings-link, .sb-link, .settings-home-row { transition: background-color var(--m-fast) var(--m-out), color var(--m-fast) var(--m-out); }
details > summary::after, details > summary .chev, .sb-more-nav > summary::after { transition: transform var(--m-base) var(--m-out); }

@media (hover: none) {
  /* Di layar sentuh, efek tekan lebih terasa daripada hover. */
  .menu button:active, .menu a:active, .sb-link:active, .settings-home-row:active { background: var(--surface-3); }
}