/* ==========================================================================
   Transitions: page / conversation changes, theme change, popovers.
   ========================================================================== */
/* Data refreshes no longer re-run an entrance animation on whatever element morph inserted. */
.content > * { animation: none; }

/* Page change (View Transitions): only the content area moves; sidebar and navbar stay still. */
#content { view-transition-name: page; }
:root.vt-page::view-transition-old(root), :root.vt-page::view-transition-new(root) { animation: none; }
:root.vt-page::view-transition-group(page) { animation-duration: .26s; }
:root.vt-page::view-transition-old(page) { animation: bt-page-out .12s ease-in both; }
:root.vt-page::view-transition-new(page) { animation: bt-page-in .26s cubic-bezier(.2, .8, .2, 1) .04s both; }
@keyframes bt-page-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes bt-page-in { from { opacity: 0; transform: translateY(10px); } }

/* Fallback for browsers without View Transitions: the new page's blocks rise in one after another. */
.content.page-enter > * { animation: bt-page-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.content.page-enter > *:nth-child(2) { animation-delay: .03s; }
.content.page-enter > *:nth-child(3) { animation-delay: .06s; }
.content.page-enter > *:nth-child(n+4) { animation-delay: .09s; }

/* Theme change: the whole window cross-fades instead of snapping colours. */
:root.vt-theme::view-transition-group(*) { animation-duration: .35s; }
:root.vt-theme::view-transition-old(*) { animation: bt-fade-out .35s ease both; }
:root.vt-theme::view-transition-new(*) { animation: bt-fade-in .35s ease both; }
@keyframes bt-fade-out { to { opacity: 0; } }
@keyframes bt-fade-in { from { opacity: 0; } }

/* Popovers open with a short scale-in from where they are anchored. */
.ch-switch-menu, .ch-date-pop { animation: bt-pop-down .16s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top left; }
.ch-date-pop { transform-origin: top right; }
.ch-emoji, .ch-picker { animation: bt-pop-up .16s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom left; }
.ch-jumped, .ch-rec { animation: bt-pop-down .2s ease both; }
@keyframes bt-pop-down { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes bt-pop-up { from { opacity: 0; transform: translateY(6px) scale(.97); } }

/* Menu items glide between states. */
.nav-item, .tab, .ch-conv, .nb-theme-row button, .theme-options button { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }

@media (prefers-reduced-motion: reduce) {
  #content { view-transition-name: none; }
  .content.page-enter > *, .ch-switch-menu, .ch-date-pop, .ch-emoji, .ch-picker, .ch-jumped, .ch-rec { animation: none !important; }
}

/* ---------- request progress bar ---------- */
#bt-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
#bt-progress.on { opacity: 1; }
#bt-progress.done { opacity: 0; transition-delay: .12s; }
#bt-progress i { display: block; height: 100%; width: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--accent, #245bbd), #6ea8ff); box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #245bbd) 70%, transparent); transition: width .25s ease; }

/* ---------- splash (first load) ---------- */
.bt-splash { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: var(--bg, #08172f); color: var(--ink, #edf3ff); }
.bt-splash > * { animation: bt-fade-in .4s ease .15s both; }
.bt-splash-mark { position: relative; width: 74px; height: 74px; display: grid; place-items: center; margin-bottom: 8px; }
.bt-splash-mark img { width: 52px; height: 52px; border-radius: 14px; animation: bt-breathe 1.6s ease-in-out infinite; }
.bt-splash-mark span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent, #9dbdff) 20%, transparent); border-top-color: var(--accent, #9dbdff); animation: bt-spin .9s linear infinite; }
.bt-splash strong { font-size: 20px; letter-spacing: -.4px; }
.bt-splash strong em { font-style: normal; color: var(--accent, #9dbdff); }
.bt-splash small { color: var(--muted, #9cafce); font-size: 12.5px; }
@keyframes bt-spin { to { transform: rotate(360deg); } }
@keyframes bt-breathe { 50% { transform: scale(.92); opacity: .85; } }
/* The app shell fades in when it replaces the splash. */
.window-root { animation: bt-fade-in .3s ease both; }
@media (prefers-reduced-motion: reduce) { .bt-splash-mark img, .bt-splash-mark span { animation: none; } #bt-progress i { transition: none; } }