:root {
  --fari-surface-canvas: #f8f7f3;
  --fari-surface-card: #ffffff;
  --fari-surface-muted: #f1efe9;
  --fari-ink-primary: #202a3d;
  --fari-ink-secondary: #667085;
  --fari-border-subtle: #e6e3dc;
  --fari-brand-primary: #35466f;
  --fari-brand-soft: #ebe9f3;
  --fari-danger: #b42318;
  --fari-radius-card: 20px;
  --fari-page-gutter: 20px;
  --fari-control-size: 48px;
  --fari-topbar-height: 48px;
  --fari-shadow-card: 0 8px 24px rgba(30, 42, 65, .07);
}

.background-layer,
.background-layer *,
.nebula,
.nebula::before,
.nebula::after,
.aurora,
.celestial-halo,
.light-path,
.star-field,
.star-field * {
  pointer-events: none !important;
}

.task-card[hidden],
.pages button[hidden] {
  display: none !important;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(53, 70, 111, .32);
  outline-offset: 2px;
}

.personal-space-page,
.page-screen.evolved-page:not(.full-affirmation):not(.tarot-page),
.page-screen.page-journal,
.page-screen.page-library,
.page-screen.page-intentions,
.page-screen.page-checkins {
  background: var(--fari-surface-canvas);
  color: var(--fari-ink-primary);
}

.personal-space-page .page-shell {
  width: min(100%, 430px);
  box-sizing: border-box;
  padding:
    calc(var(--fari-navigation-row-top) + var(--fari-topbar-height) + 24px)
    var(--fari-page-gutter)
    max(32px, calc(env(safe-area-inset-bottom) + 24px)) !important;
}

.fari-page-title {
  position: fixed;
  z-index: 11;
  top: var(--fari-navigation-row-top);
  left: 50%;
  width: min(calc(100% - 144px), 260px);
  height: var(--fari-topbar-height);
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  color: var(--fari-ink-primary);
  font-size: 20px;
  font-weight: 750;
  line-height: 1;
  pointer-events: none;
}

.personal-space-page .space-header {
  max-width: 100%;
  margin-bottom: 24px;
}

.personal-space-page .space-header h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.personal-space-page .space-header > p {
  margin-bottom: 7px;
  color: #766994;
  font-size: 12px;
  letter-spacing: .12em;
}

.personal-space-page .space-header > span {
  margin-top: 0;
  color: var(--fari-ink-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.space-card,
.space-form,
.library-detail,
.library-real-card,
.oracle-real-card,
.reflection-signal,
.content-card {
  border-color: var(--fari-border-subtle);
  border-radius: var(--fari-radius-card);
  background: var(--fari-surface-card);
  box-shadow: var(--fari-shadow-card);
}

.space-primary,
.chat-composer [data-chat-send] {
  min-height: var(--fari-control-size);
  border-radius: 16px;
  background: var(--fari-brand-primary);
  color: #fff;
}

.space-secondary,
.space-card-actions button {
  min-height: 44px;
  border-color: var(--fari-border-subtle);
  background: var(--fari-surface-card);
  color: var(--fari-ink-primary);
}

.space-primary:active,
.space-secondary:active,
.space-card-actions button:active,
.library-real-card:active {
  opacity: .76;
}

.library-real-grid {
  max-width: 100%;
  grid-template-columns: 1fr;
  gap: 12px;
}

.library-real-card,
.library-real-card:nth-child(2n) {
  min-height: 148px;
  border: 1px solid var(--fari-border-subtle);
  background: var(--fari-surface-card);
  color: var(--fari-ink-primary);
  box-shadow: var(--fari-shadow-card);
}

.library-real-card::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #8590a3;
  border-right: 2px solid #8590a3;
  transform: rotate(45deg);
}

.library-real-card {
  position: relative;
}

.library-real-card strong {
  max-width: calc(100% - 34px);
  margin-top: 15px;
  font-family: ui-serif, Georgia, "Noto Serif SC", serif;
  font-size: 20px;
}

.library-real-card small {
  max-width: calc(100% - 24px);
  color: var(--fari-ink-secondary);
  font-size: 14px;
  -webkit-line-clamp: 2;
}

.library-real-card i {
  color: var(--fari-brand-primary);
  font-size: 12px;
}

.library-detail {
  max-width: 100%;
  padding: 22px 20px;
}

.library-page.is-library-detail .page-shell {
  padding-top: calc(var(--fari-navigation-row-top) + var(--fari-topbar-height) + 18px) !important;
}

.library-page.is-library-detail .fari-page-title {
  font-size: 17px;
}

.library-page.is-library-detail .library-detail {
  min-height: calc(100dvh - var(--fari-navigation-row-top) - var(--fari-topbar-height) - 56px);
  margin: 0;
  border: 0;
  border-radius: 24px;
  box-shadow: none;
}

.library-page.is-library-detail .library-detail-close {
  display: none;
}

.library-detail h2 {
  color: var(--fari-ink-primary);
  font-size: 26px;
}

.library-detail p,
.library-detail blockquote {
  font-size: 15px;
}

.space-filters {
  max-width: 100%;
  margin-bottom: 18px;
  scrollbar-width: none;
}

.space-filters::-webkit-scrollbar {
  display: none;
}

.space-filters button {
  min-width: 68px;
  min-height: 44px;
}

.drawer {
  background: var(--fari-surface-canvas);
  color: var(--fari-ink-primary);
}

.fari-flat-nav-button,
.fari-flat-settings,
.fari-flat-reset {
  min-height: 48px;
  border-radius: 14px;
}

/* The live call is intentionally visual and quiet. Spoken turns are persisted
   to chat history, but transcripts and assistant copy never cover the companion. */
.phone.interaction-call .call-live-transcript,
.phone.interaction-call .call-context-note,
.phone.interaction-call .call-status,
.phone.interaction-call .call-orb,
.phone.interaction-call .call-controls > strong {
  display: none !important;
}

.phone.interaction-call .call-bottom-bar {
  grid-template-columns: 52px 132px !important;
  justify-content: space-between !important;
}

.phone.interaction-call .call-text-action {
  display: none !important;
}

.phone.interaction-call .call-session-actions {
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 80px)) !important;
  width: min(210px, calc(100% - 44px)) !important;
}

.phone.interaction-call .call-session-actions button[hidden] {
  display: none !important;
}

.phone.interaction-call .call-session-actions [data-call="reconnect"]:not([hidden]),
.phone.interaction-call .call-session-actions [data-call="interrupt"]:not([hidden]) {
  display: block !important;
}

@media (max-width: 360px) {
  :root {
    --fari-page-gutter: 16px;
  }

  .fari-page-title {
    width: calc(100% - 132px);
    font-size: 18px;
  }

  .library-detail {
    padding: 20px 16px;
  }

  .phone.interaction-call .call-bottom-bar {
    grid-template-columns: 48px 124px !important;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .personal-space-page .page-shell {
    padding-top: calc(var(--fari-navigation-row-top) + var(--fari-topbar-height) + 14px) !important;
    padding-right: max(24px, env(safe-area-inset-right)) !important;
    padding-left: max(24px, env(safe-area-inset-left)) !important;
  }

  .phone.interaction-call .angel {
    left: 25% !important;
    top: 52% !important;
  }

  .phone.interaction-call .angel.asset-starlight .spirit-form {
    top: -72px !important;
    width: min(38vw, 230px) !important;
    height: 250px !important;
  }

  .phone.interaction-call .call-bottom-bar {
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    left: 55% !important;
  }

  .phone.interaction-call .call-session-actions {
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 72px)) !important;
    left: auto !important;
    width: min(190px, 38vw) !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}