:root {
  --fari-back-size: 48px;
  --fari-back-icon-size: 28px;
  --fari-back-top: max(18px, calc(env(safe-area-inset-top) + 12px));
  --fari-back-left: max(18px, calc(50% - 215px + 14px));
  --fari-back-content-top: max(104px, calc(env(safe-area-inset-top) + 88px));
  --fari-back-surface: transparent;
  --fari-back-hover-surface: transparent;
  --fari-back-ink: #29354b;
  --fari-back-border: transparent;
  --fari-back-shadow: none;
  --fari-back-focus: rgba(8, 145, 178, .72);
}

.quick-question-page,
.page-screen.tarot-page:not(.tarot-server-page),
.astrology-page,
.oracle-page,
.full-affirmation,
.tarot-result-page,
.tarot-history-page,
.phone.interaction-text,
.phone.interaction-call,
.phone.interaction-voice {
  --fari-back-ink: rgba(255, 248, 232, .96);
  --fari-back-hover-surface: transparent;
  --fari-back-border: transparent;
  --fari-back-focus: rgba(255, 239, 180, .82);
}

.page-screen .page-back,
.page-screen .quick-back,
.tarot-server-back-button,
.auth-icon-button[data-auth-action="back"],
.onboarding-back-button,
.journal-detail-back,
.history-back-button,
#chatClose {
  width: var(--fari-back-size) !important;
  height: var(--fari-back-size) !important;
  min-width: var(--fari-back-size);
  min-height: var(--fari-back-size);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--fari-back-surface) !important;
  box-shadow: var(--fari-back-shadow) !important;
  color: var(--fari-back-ink) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  opacity: .96;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: none;
  transition:
    color 180ms ease,
    opacity 160ms ease,
    filter 180ms ease !important;
}

.page-screen .page-back::after,
.page-screen .quick-back::after,
.tarot-server-back-button::after,
.auth-icon-button[data-auth-action="back"]::after,
.onboarding-back-button::after,
.journal-detail-back::after,
.history-back-button::after,
#chatClose::after {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  width: var(--fari-back-icon-size) !important;
  height: var(--fari-back-icon-size) !important;
  display: block;
  flex: none;
  background: currentColor !important;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18 9 12 15 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / var(--fari-back-icon-size) var(--fari-back-icon-size) no-repeat !important;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18 9 12 15 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / var(--fari-back-icon-size) var(--fari-back-icon-size) no-repeat !important;
  transform: none !important;
  pointer-events: none;
  transition: opacity 160ms ease, filter 180ms ease;
}

.journal-detail-back > svg,
.history-back-button > span,
#chatClose > svg {
  display: none !important;
}

.page-screen .page-back,
.page-screen .quick-back,
.tarot-server-back-button,
.journal-detail-back {
  position: fixed !important;
  z-index: 12;
  top: var(--fari-back-top) !important;
  left: var(--fari-back-left) !important;
  right: auto !important;
  transform: none;
}

#chatClose {
  position: absolute !important;
  z-index: 12;
  top: var(--fari-back-top) !important;
  left: max(18px, calc(env(safe-area-inset-left) + 12px)) !important;
  right: auto !important;
  transform: none;
}

.page-screen:not(.quick-question-page):not(.chat-page):not(.tarot-page):not(.astrology-page):not(.oracle-page):not(.full-affirmation) .page-shell,
.quick-detail,
.chat-detail,
.tarot-detail,
.astrology-detail,
.oracle-detail,
.tarot-server-shell:not(.tarot-result-shell) {
  padding-top: var(--fari-back-content-top) !important;
}

.tarot-result-hero {
  padding-top: var(--fari-back-content-top) !important;
}

.page-screen.journal-evolved-page:not(.quick-question-page):not(.chat-page):not(.tarot-page):not(.astrology-page):not(.oracle-page):not(.full-affirmation) .page-shell {
  padding-top: max(72px, calc(env(safe-area-inset-top) + 56px)) !important;
}

.page-screen .page-back:hover,
.page-screen .quick-back:hover,
.tarot-server-back-button:hover,
.auth-icon-button[data-auth-action="back"]:hover,
.onboarding-back-button:hover,
.journal-detail-back:hover,
.history-back-button:hover,
#chatClose:hover {
  background: var(--fari-back-hover-surface) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1;
}

.page-screen .page-back:active,
.page-screen .quick-back:active,
.tarot-server-back-button:active,
.auth-icon-button[data-auth-action="back"]:active,
.onboarding-back-button:active,
.journal-detail-back:active,
.history-back-button:active,
#chatClose:active {
  transform: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: .72;
}

.page-screen .page-back:active::after,
.page-screen .quick-back:active::after,
.tarot-server-back-button:active::after,
.auth-icon-button[data-auth-action="back"]:active::after,
.onboarding-back-button:active::after,
.journal-detail-back:active::after,
.history-back-button:active::after,
#chatClose:active::after {
  opacity: .72;
}

.page-screen .page-back:focus-visible,
.page-screen .quick-back:focus-visible,
.tarot-server-back-button:focus-visible,
.auth-icon-button[data-auth-action="back"]:focus-visible,
.onboarding-back-button:focus-visible,
.journal-detail-back:focus-visible,
.history-back-button:focus-visible,
#chatClose:focus-visible {
  outline: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.page-screen .page-back:focus-visible::after,
.page-screen .quick-back:focus-visible::after,
.tarot-server-back-button:focus-visible::after,
.auth-icon-button[data-auth-action="back"]:focus-visible::after,
.onboarding-back-button:focus-visible::after,
.journal-detail-back:focus-visible::after,
.history-back-button:focus-visible::after,
#chatClose:focus-visible::after {
  filter: drop-shadow(0 0 .75px currentColor) drop-shadow(0 0 6px var(--fari-back-focus));
}

.page-screen.quick-question-page > .page-back,
.page-screen.chat-page > .page-back,
.page-screen.tarot-page:not(.tarot-server-page) > .page-back,
.page-screen.astrology-page > .page-back,
.page-screen.oracle-page > .page-back {
  display: none !important;
  pointer-events: none !important;
}

.page-screen.quick-question-page .page-back,
.page-screen.chat-page .page-back,
.page-screen.tarot-page:not(.tarot-server-page) .page-back,
.page-screen.astrology-page .page-back,
.page-screen.oracle-page .page-back {
  display: none !important;
  pointer-events: none !important;
}

@media (max-width: 600px) {
  :root {
    --fari-back-left: max(14px, calc(env(safe-area-inset-left) + 10px));
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  :root {
    --fari-back-top: max(12px, calc(env(safe-area-inset-top) + 8px));
    --fari-back-content-top: max(84px, calc(env(safe-area-inset-top) + 72px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-screen .page-back,
  .page-screen .quick-back,
  .tarot-server-back-button,
  .auth-icon-button[data-auth-action="back"],
  .onboarding-back-button,
  .journal-detail-back,
  .history-back-button,
  #chatClose {
    transition-duration: 1ms !important;
  }
}