/* Owner theme motion: one calm mood blend, short tactile feedback, no idle loops. */
#phone :is(button,.thread-card) { touch-action: manipulation; }
#phone button:not(.password-toggle) { transition: transform 140ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 140ms ease; }
#phone button:not(:disabled):not(.password-toggle):active { transform: scale(.975); }
#phone button:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
#phone .jk-mood-blend { display:none!important; } /* Obsolete partial overlay must never obscure the tab bar. */
#phone #bottom-nav { transition: opacity 180ms ease, transform 220ms ease; }
#phone #bottom-nav .navbtn.signature { transition: transform 140ms ease, border-color 180ms ease, color 180ms ease !important; }
/* Deep Talk uses EXACTLY the same .enter-forward/.enter-backward rules as every other tab. */
#phone :is(#jk-thread-dialog,#jk-story-dialog)[open] { animation: jkDialogArrival 240ms cubic-bezier(.2,.8,.2,1); }
#phone :is(#jk-thread-dialog,#jk-story-dialog)::backdrop { animation: jkBackdropArrival 220ms ease; }
#phone .deep-core-tab[aria-pressed=true] { transition: background-color 220ms ease, border-color 220ms ease; }
@keyframes jkDialogArrival { from { opacity: 0; transform: translate3d(0,10px,0) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes jkBackdropArrival { from { background-color: transparent; } }
@media (hover:hover) and (pointer:fine) { #phone button:not(:disabled):not(.password-toggle):not(.navbtn):hover { transform: translateY(-1px); } }
@media (prefers-reduced-motion:reduce) { #phone button,#phone #bottom-nav,#phone #bottom-nav .navbtn.signature { transition: none !important; } #phone :is(#jk-thread-dialog,#jk-story-dialog),#phone :is(#jk-thread-dialog,#jk-story-dialog)::backdrop { animation: none !important; } #phone .jk-mood-blend { display: none; } }

/* Keep a single clean night canvas across root, scroll stage, and fixed
   navigation, but do not add Deep Talk-only route animations. */
:root { --jk-story-stage:#100e14; }
body:has(#phone.story-context),
body:has(#phone.story-context) .preview-shell { background:var(--jk-story-stage); }
#phone.story-context,
#phone.story-context .app,
#phone.story-context .screen[data-screen="stories"],
body.g2-adult-beta #phone.story-context #bottom-nav {
  background:var(--jk-story-stage)!important;
}
#phone.story-context #bottom-nav { border-top-color:#30242e!important; }
#phone.story-context .statusbar { background:var(--jk-story-stage); }
#phone:not(.story-context),#phone:not(.story-context) .app {background:#fff;}
/* The original .app background-color tween continued independently after
   the regular tab content moved, producing unwanted middle-stage flashes. */
#phone .app { transition:none!important; }
@media(prefers-reduced-motion:reduce) {
  #phone .screen.enter-forward,#phone .screen.enter-backward {animation:none!important}
}