/* Functional evolution layer. The v1.0 visual model remains the source of truth. */
/* v2.13 ReadingContext: server-authoritative attach, visible context, and explicit detach. */

button,
input,
[role="button"] {
  touch-action: manipulation;
}

.chat-thread {
  max-height: min(34dvh, 292px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.chat-thread::-webkit-scrollbar {
  display: none;
}

.chat-bubble {
  overflow-wrap: anywhere;
}

.chat-runtime-status {
  min-height: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.chat-close {
  width: 48px;
  height: 48px;
  top: 4px;
  right: 8px;
}

.chat-runtime-status:not(:empty) {
  min-height: 24px;
  padding: 3px 8px 5px;
}

.chat-reading-context {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 10px 2px 0;
  padding: 8px 8px 8px 12px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 18px;
  background: rgba(18, 35, 68, .58);
  box-shadow: 0 10px 28px rgba(6, 18, 48, .13);
  color: #fff;
  backdrop-filter: blur(14px);
}

.chat-reading-context[hidden],
.chat-overlay.mode-call .chat-reading-context,
.chat-overlay.mode-voice .chat-reading-context {
  display: none;
}

.chat-reading-context svg {
  width: 32px;
  height: 40px;
  fill: rgba(255, 255, 255, .08);
  stroke: rgba(255, 255, 255, .84);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.chat-reading-context span {
  min-width: 0;
}

.chat-reading-context small,
.chat-reading-context strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-reading-context small {
  color: rgba(255, 255, 255, .65);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}

.chat-reading-context strong {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}

.chat-reading-context button {
  min-width: 48px;
  min-height: 48px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 780;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}

.chat-reading-context button:active {
  background: rgba(255, 255, 255, .24);
}

.chat-reading-context button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.chat-reading-context button[aria-busy="true"] {
  cursor: wait;
  opacity: .58;
}

.chat-response {
  align-self: flex-start;
  display: grid;
  justify-items: start;
  gap: 4px;
  max-width: 84%;
}

.chat-response .chat-bubble {
  align-self: auto;
  max-width: 100%;
}

.chat-response-actions {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
}

.chat-response-actions button,
.chat-turn-state button {
  min-width: 48px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .86);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.chat-response-actions button.selected {
  border-color: rgba(214, 238, 228, .75);
  background: rgba(214, 238, 228, .95);
  color: #31574f;
}

.chat-response-actions button:focus-visible,
.chat-turn-state button:focus-visible,
.chat-composer button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.chat-response-actions small {
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
}

.chat-turn-state {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px 10px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 16px;
  background: rgba(8, 28, 63, .45);
  color: #fff;
}

.chat-turn-state.error {
  border-color: rgba(255, 190, 181, .48);
  background: rgba(91, 36, 49, .55);
}

.chat-turn-state b,
.chat-turn-state p {
  margin: 0;
}

.chat-turn-state b {
  font-size: 11px;
}

.chat-turn-state p {
  margin-top: 3px;
  color: rgba(255, 255, 255, .76);
  font-size: 10px;
  line-height: 1.45;
}

.chat-safety-card {
  align-self: stretch;
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(255, 225, 178, .5);
  border-radius: 18px;
  background: rgba(73, 61, 54, .68);
  color: #fff;
}

.chat-safety-card.critical {
  border-color: rgba(255, 199, 190, .64);
  background: rgba(91, 38, 51, .76);
}

.chat-safety-card > div {
  display: grid;
  gap: 3px;
}

.chat-safety-card > div small {
  color: rgba(255, 255, 255, .68);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .13em;
}

.chat-safety-card strong {
  font-size: 13px;
}

.chat-safety-card p {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  line-height: 1.55;
}

.chat-safety-card button {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #4e3740;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.chat-safety-card > small {
  color: rgba(255, 255, 255, .64);
  font-size: 9px;
  line-height: 1.5;
}

.chat-composer input {
  min-height: 48px;
  font-size: 16px;
}

.chat-composer button {
  width: 48px;
  min-width: 48px;
  height: 48px;
}

.chat-composer button.is-stopping {
  background: #a94b60;
  color: #fff;
}

.chat-bubble.typing {
  display: flex;
  width: 52px;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.chat-bubble.typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: fari-v11-typing 1s ease-in-out infinite;
}

.chat-bubble.typing i:nth-child(2) {
  animation-delay: 120ms;
}

.chat-bubble.typing i:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes fari-v11-typing {
  50% {
    opacity: 0.35;
    transform: translateY(-3px);
  }
}

.chat-image {
  display: block;
  width: min(100%, 220px);
  max-height: 180px;
  border-radius: 13px;
  object-fit: cover;
}

.memory-proposal {
  align-self: flex-start;
  display: grid;
  gap: 7px;
  max-width: 88%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 15px;
  background: rgba(14, 38, 76, 0.48);
  color: #fff;
  font-size: 11px;
  line-height: 1.45;
}

.memory-proposal > small {
  color: rgba(255, 255, 255, .76);
  font-size: 10px;
}

.memory-proposal-actions {
  display: flex;
  gap: 8px;
}

.memory-proposal button {
  min-height: 48px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
}

.memory-proposal button[data-memory-action="save"] {
  border-color: transparent;
  background: #d6eee4;
  color: #31574f;
}

.evolved-link {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(43, 48, 64, 0.14);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.evolved-link span:last-child {
  color: #74847e;
  font-size: 19px;
}

.fari-primary-nav {
  display: grid;
}

.fari-primary-nav .evolved-link,
.drawer-secondary .evolved-link {
  min-height: 52px;
  align-items: center;
}

.fari-primary-nav [data-companion-home] span:last-child {
  font-size: 16px;
}

.drawer-secondary {
  margin-top: 18px;
}

.drawer-secondary > small {
  display: block;
  margin-bottom: 3px;
  color: #82908b;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .17em;
}

.drawer-secondary .drawer-link {
  font-size: 12px;
}

#menuDrawer .drawer {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#menuDrawer .drawer-note {
  position: static;
  margin-top: 16px;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}

#menuDrawer .drawer-note .settings-link {
  min-height: 48px;
}

.evolved-version {
  display: inline-flex;
  margin-top: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(63, 128, 109, 0.1);
  color: #3d806d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.evolved-page {
  background: #f5f3ec;
  color: #29354b;
}

.evolved-page .page-shell {
  min-height: 100dvh;
  overflow-y: auto;
  background:
    radial-gradient(circle at 88% 10%, rgba(130, 216, 220, 0.2), transparent 15rem),
    linear-gradient(180deg, #fbf8f1, #edf2ed);
}

.evolved-page .page-back {
  width: 48px;
  height: 48px;
}

.evolved-kicker {
  margin: 0 0 8px;
  color: #5f8d80;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.evolved-page h1 {
  margin: 0;
  color: #29354b;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.12;
}

.evolved-intro {
  margin: 10px 0 24px;
  color: #718078;
  font-size: 13px;
  line-height: 1.6;
}

.evolved-list {
  display: grid;
  gap: 10px;
}

.evolved-item,
.evolved-empty,
.evolved-settings-card {
  padding: 15px;
  border: 1px solid rgba(43, 48, 64, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 25px rgba(31, 54, 50, 0.06);
}

.evolved-item {
  display: grid;
  gap: 5px;
}

.evolved-item b {
  color: #314a45;
  font-size: 12px;
}

.evolved-item p {
  margin: 0;
  color: #53645f;
  font-size: 13px;
  line-height: 1.5;
}

.evolved-item time {
  color: #86938f;
  font-size: 10px;
}

.evolved-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  margin-top: 5px;
}

.evolved-item-actions button,
.evolved-actions button,
.evolved-toggle {
  min-width: 48px;
  min-height: 48px;
  padding: 9px 14px;
  border: 1px solid rgba(43, 48, 64, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #29354b;
  font-size: 12px;
  font-weight: 750;
}

.evolved-item-actions .memory-delete-confirm {
  border-color: rgba(159, 67, 67, .28);
  background: #fff0ed;
  color: #8c3737;
}

.evolved-memory-status,
.memory-last-used {
  margin: 0 0 14px;
  padding: 13px 14px;
  border: 1px solid rgba(62, 100, 88, .12);
  border-radius: 16px;
  background: rgba(222, 240, 231, .6);
  color: #567068;
  font-size: 12px;
  line-height: 1.5;
}

.evolved-memory-status.error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-color: rgba(164, 73, 86, .2);
  background: rgba(249, 229, 230, .78);
  color: #84464f;
}

.evolved-memory-status button,
.memory-pause-actions button {
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid rgba(43, 48, 64, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: #314a45;
  font: inherit;
  font-weight: 750;
}

.memory-pause-actions {
  display: flex;
  justify-content: flex-end;
  margin: -7px 0 8px;
}

.memory-pause-actions button:disabled {
  opacity: .46;
}

.memory-last-used {
  margin-top: 15px;
}

.memory-last-used small {
  display: block;
  margin-bottom: 5px;
  color: #66897d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.memory-last-used p {
  margin: 5px 0 0;
}

.memory-record.candidate {
  border-color: rgba(86, 147, 129, .24);
  background: rgba(242, 251, 246, .86);
}

.memory-record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.memory-record-head span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(76, 126, 111, .09);
  color: #5c746c;
  font-size: 9px;
  font-weight: 760;
}

.memory-source {
  margin-top: 5px;
  color: #6d7d77;
  font-size: 11px;
}

.memory-source summary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-weight: 750;
}

.memory-source blockquote {
  margin: 3px 0 7px;
  padding: 9px 11px;
  border-left: 3px solid rgba(79, 137, 120, .38);
  border-radius: 0 10px 10px 0;
  background: rgba(226, 238, 231, .7);
  color: #52665f;
  line-height: 1.45;
}

.memory-source small {
  overflow-wrap: anywhere;
}

.memory-edit-field {
  display: grid;
  gap: 6px;
}

.memory-edit-field span {
  color: #667771;
  font-size: 10px;
  font-weight: 760;
}

.memory-edit-field textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid rgba(46, 91, 78, .24);
  border-radius: 13px;
  background: #fff;
  color: #31443f;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.memory-used-notice {
  align-self: flex-start;
  max-width: 92%;
  padding: 9px 11px;
  border: 1px solid rgba(205, 239, 226, .22);
  border-radius: 13px;
  background: rgba(18, 49, 78, .44);
  color: rgba(255, 255, 255, .86);
  font-size: 10px;
}

.memory-used-notice summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 750;
}

.memory-used-notice div {
  padding: 7px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.memory-used-notice p {
  margin: 0 0 4px;
  line-height: 1.45;
}

.memory-used-notice small {
  color: rgba(255, 255, 255, .62);
}

.evolved-settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.evolved-settings-card b,
.evolved-settings-card small {
  display: block;
}

.evolved-settings-card small {
  margin-top: 4px;
  color: #718078;
  font-size: 10px;
  line-height: 1.45;
}

.evolved-toggle[aria-pressed="true"] {
  border-color: transparent;
  background: #d6eee4;
  color: #31574f;
}

.evolved-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

.evolved-section-title {
  margin: 24px 0 10px;
  color: #586a64;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.evolved-settings-stack {
  display: grid;
  gap: 9px;
}

.evolved-settings-stack .evolved-settings-card {
  margin: 0;
}

.reminder-setting {
  align-items: center;
}

.reminder-options {
  display: flex;
  flex: none;
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: #e2e9e4;
}

.reminder-options button {
  min-width: 52px;
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #65736e;
  font-size: 11px;
  font-weight: 800;
}

.reminder-options button.active {
  background: #fff;
  color: #2c3c50;
  box-shadow: 0 3px 10px rgba(38, 55, 50, .14);
}

.prototype-sync-note {
  margin: 20px 2px 0;
  padding: 13px 14px;
  border: 1px solid rgba(67, 91, 82, .1);
  border-radius: 15px;
  background: rgba(223, 237, 229, .55);
  color: #65766f;
  font-size: 11px;
  line-height: 1.55;
}

.evolved-language-setting {
  align-items: center;
  gap: 14px;
}

.evolved-language-setting .language-options {
  flex: none;
}

.evolved-language-setting .language-options button {
  min-height: 48px;
}

@media (max-width: 360px) {
  .evolved-language-setting {
    align-items: stretch;
    flex-direction: column;
  }

  .evolved-language-setting .language-options {
    width: 100%;
  }

  .evolved-language-setting .language-options button {
    flex: 1;
  }
}

.evolved-reduced-motion *,
.evolved-reduced-motion *::before,
.evolved-reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

.record-button.recording {
  color: #fff;
  background: #d75b7f;
  box-shadow: 0 0 0 9px rgba(215, 91, 127, 0.16);
}

.record-button {
  min-width: 116px;
  min-height: 48px;
}

.call-status.live {
  color: #d6eee4;
}

@media (max-width: 600px) {
  .chat-panel {
    max-height: calc(100dvh - max(90px, env(safe-area-inset-top)) - max(78px, env(safe-area-inset-bottom)));
  }

  .chat-thread {
    max-height: min(31dvh, 240px);
  }

  .memory-proposal button {
    min-height: 48px;
  }

  .evolved-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 620px) and (orientation: portrait) {
  .onboarding-welcome {
    justify-content: flex-start;
    padding-top: 18px;
    padding-bottom: 14px;
  }

  .onboarding-welcome .onboarding-language {
    top: 12px;
    right: 12px;
  }

  .onboarding-welcome .onboarding-oracle-mark {
    width: 102px;
    height: 104px;
    margin-top: 54px;
    margin-bottom: 8px;
  }

  .onboarding-welcome h1 {
    margin-top: 7px;
    font-size: 25px;
    line-height: 1.04;
  }

  .onboarding-welcome > p:not(.onboarding-kicker) {
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.45;
  }

  .onboarding-welcome .onboarding-trust-row {
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    margin: 10px 0 9px;
  }

  .onboarding-welcome .onboarding-trust-row span {
    min-width: 0;
    padding: 5px 6px;
    flex: 1 1 0;
    font-size: 8px;
    white-space: nowrap;
  }

  .onboarding-welcome .onboarding-primary,
  .onboarding-welcome .onboarding-text-action {
    min-height: 48px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--sky);
    overscroll-behavior: none;
  }

  .stage {
    display: block;
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    background: var(--sky);
  }

  .phone {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .phone::before {
    display: none;
  }

  .top-actions {
    left: max(16px, calc(env(safe-area-inset-left) + 10px));
    right: max(16px, calc(env(safe-area-inset-right) + 10px));
    top: max(10px, calc(env(safe-area-inset-top) + 6px));
  }

  .card-toggle {
    top: max(9px, calc(env(safe-area-inset-top) + 5px));
    width: 52px;
    height: 52px;
  }

  .task-zone {
    left: max(58px, calc(env(safe-area-inset-left) + 52px));
    right: auto;
    top: max(68px, calc(env(safe-area-inset-top) + 58px));
    width: min(42vw, 340px);
    height: min(206px, calc(100dvh - 142px));
  }

  .task-card {
    padding: 15px 15px 12px !important;
    border-radius: 21px;
  }

  .task-card > span {
    font-size: 9px !important;
  }

  .task-card .line {
    margin: 8px auto 10px !important;
  }

  .task-card h1 {
    min-height: 42px;
    font-size: 17px !important;
  }

  .task-card .play {
    width: 44px;
    height: 44px;
    margin-top: 9px !important;
  }

  .pages {
    left: 25%;
    top: calc(max(68px, env(safe-area-inset-top) + 58px) + min(206px, 100dvh - 142px) + 8px);
  }

  .angel {
    left: 72%;
    top: max(88px, calc(env(safe-area-inset-top) + 76px));
    transform: translateX(-50%) scale(.9);
  }

  .angel-bubble {
    top: -40px;
    min-width: 154px;
    max-width: 184px;
    font-size: 10px;
  }

  .celestial-halo {
    left: 72%;
    top: 50px;
    width: 230px;
    height: 230px;
  }

  .light-path {
    left: 72%;
    top: 182px;
    width: 230px;
    height: 240px;
  }

  .free-actions {
    left: max(18px, calc(env(safe-area-inset-left) + 12px));
    right: max(18px, calc(env(safe-area-inset-right) + 12px));
    bottom: max(5px, calc(env(safe-area-inset-bottom) + 2px));
    height: 54px;
  }

  .drawer {
    width: min(420px, 72vw);
    padding-top: max(62px, calc(env(safe-area-inset-top) + 56px));
    padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
    overflow-y: auto;
  }

  .drawer-close {
    top: max(14px, calc(env(safe-area-inset-top) + 10px));
  }

  .chat-panel {
    top: max(12px, env(safe-area-inset-top));
    bottom: max(12px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  .chat-thread {
    flex: 1;
    min-height: 0;
    max-height: none;
    margin-top: 12px;
    margin-bottom: 10px;
    overflow-y: auto;
  }

  .chat-composer,
  .voice-controls,
  .call-controls {
    flex: none;
  }
}

/* v2.5 notification center: local delivery truth, explicit permission, no coercive urgency. */

#noticeButton {
  position: relative;
}

.notice-unread-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(22, 56, 103, .92);
  border-radius: 999px;
  background: #f5d592;
  color: #3d5061;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.notice-unread-badge[hidden] {
  display: none;
}

.notification-center-drawer {
  width: min(88%, 420px);
  box-sizing: border-box;
  padding: max(74px, calc(env(safe-area-inset-top) + 56px)) 20px max(22px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.notification-center-drawer::-webkit-scrollbar {
  display: none;
}

.notification-center-close {
  top: max(16px, env(safe-area-inset-top));
  right: 14px;
  width: 48px;
  height: 48px;
  z-index: 2;
}

.notification-center-heading {
  min-width: 0;
}

.notification-center-heading h2 {
  margin-bottom: 7px;
  font-size: clamp(26px, 8vw, 34px);
  line-height: 1.05;
}

.notification-center-kicker {
  margin: 0 0 8px;
  color: #66857a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.notification-center-heading .drawer-intro {
  margin-bottom: 16px;
  font-size: 11px;
}

.notification-permission-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 13px;
  border: 1px solid rgba(61, 107, 92, .16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 10%, rgba(198, 231, 219, .72), transparent 38%),
    rgba(255, 255, 255, .72);
  box-shadow: 0 10px 28px rgba(49, 75, 69, .07);
}

.notification-permission-card.denied {
  background:
    radial-gradient(circle at 12% 10%, rgba(241, 220, 201, .72), transparent 38%),
    rgba(255, 255, 255, .72);
}

.notification-permission-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #dcece5;
  color: #427465;
  font-size: 24px;
}

.notification-permission-card b {
  display: block;
  color: #334d45;
  font-size: 12px;
  line-height: 1.35;
}

.notification-permission-card small {
  display: block;
  margin-top: 4px;
  color: #718078;
  font-size: 10px;
  line-height: 1.5;
}

.notification-permission-card > button {
  grid-column: 1 / -1;
  min-height: 48px;
  padding: 9px 14px;
  border: 1px solid rgba(62, 111, 96, .2);
  border-radius: 999px;
  background: #4c7b6d;
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.notification-center-meta {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: #718078;
  font-size: 10px;
  font-weight: 750;
}

.notification-center-meta button {
  min-width: 60px;
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4a7568;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.notification-center-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.notification-record {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  overflow: hidden;
  border: 1px solid rgba(46, 79, 69, .12);
  border-radius: 17px;
  background: rgba(255, 255, 255, .72);
}

.notification-record.unread {
  border-color: rgba(55, 119, 97, .25);
  box-shadow: 0 9px 24px rgba(52, 87, 76, .07);
}

.notification-record.read {
  opacity: .76;
}

.notification-record.scheduled {
  border-style: dashed;
}

.notification-record.scheduled .notification-record-mark {
  background: #ecebe0;
  color: #7e7a62;
}

.notification-record-main,
.notification-record-dismiss {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.notification-record-main {
  min-width: 0;
  min-height: 86px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 5px 13px 13px;
  text-align: left;
}

.notification-record-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #e1eee8;
  color: #477667;
}

.notification-record-main > span:last-child {
  min-width: 0;
}

.notification-record-main b,
.notification-record-main small,
.notification-record-main em {
  display: block;
  overflow-wrap: anywhere;
}

.notification-record-main b {
  color: #34483f;
  font-size: 12px;
  line-height: 1.4;
}

.notification-record-main small {
  margin-top: 3px;
  color: #68766f;
  font-size: 10px;
  line-height: 1.5;
}

.notification-record-main em {
  margin-top: 6px;
  color: #87928d;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.notification-record-dismiss {
  width: 48px;
  min-height: 48px;
  align-self: start;
  color: #7e8b85;
  font-size: 19px;
}

.notification-center-state {
  min-height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(52, 86, 75, .16);
  border-radius: 17px;
  color: #718078;
  text-align: center;
}

.notification-center-state span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5eee9;
  color: #4b7869;
}

.notification-center-state p {
  margin: 0;
  max-width: 26em;
  font-size: 10px;
  line-height: 1.55;
}

.notification-center-state.error {
  border-color: rgba(155, 85, 69, .25);
  color: #8a5b50;
}

.notification-center-boundary {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 13px 0 0;
  border-top: 1px solid rgba(43, 48, 64, .12);
  color: #718078;
}

.notification-center-boundary b {
  color: #526a61;
  font-size: 9px;
}

.notification-center-boundary small {
  font-size: 9px;
  line-height: 1.5;
}

.notification-center-drawer button:focus-visible {
  outline: 3px solid rgba(83, 135, 117, .34);
  outline-offset: 2px;
}

.notification-center-drawer button[aria-busy="true"] {
  opacity: .58;
}

@media (max-width: 360px) {
  .notification-center-drawer {
    width: 92%;
    padding-right: 14px;
    padding-left: 14px;
  }

  .notification-record {
    grid-template-columns: minmax(0, 1fr) 48px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .notification-center-drawer {
    width: min(72%, 520px);
    padding-top: max(58px, calc(env(safe-area-inset-top) + 48px));
  }

  .notification-center-close {
    top: max(5px, env(safe-area-inset-top));
  }

  .notification-center-heading .drawer-intro {
    max-width: 38em;
  }
}

/* v1.7 browser WebRTC voice-session equivalent */
.chat-overlay.mode-call .chat-panel {
  max-height: min(760px, calc(100dvh - env(safe-area-inset-top) - 12px));
}

.chat-overlay.mode-call .call-controls {
  min-height: 0;
  max-height: calc(100dvh - 112px - env(safe-area-inset-bottom));
  padding: 4px 0 max(8px, env(safe-area-inset-bottom));
  overflow-y: auto;
  scrollbar-width: none;
}

.chat-overlay.mode-call .call-controls::-webkit-scrollbar {
  display: none;
}

.call-controls[data-call-state="connecting"] .call-orb,
.call-controls[data-call-state="reconnecting"] .call-orb {
  animation-duration: 1.1s;
}

.call-controls[data-call-state="listening"] .call-orb {
  box-shadow: 0 0 0 8px rgba(126, 215, 194, .08), 0 0 34px rgba(126, 215, 194, .34);
}

.call-controls[data-call-state="thinking"] .call-orb {
  animation: voice-thinking 1.2s ease-in-out infinite;
}

.call-controls[data-call-state="speaking"] .call-orb {
  box-shadow: 0 0 0 8px rgba(255, 221, 155, .1), 0 0 38px rgba(255, 221, 155, .42);
}

.call-controls[data-call-state="failed"] .call-orb {
  filter: grayscale(.7);
  opacity: .72;
}

.call-live-transcript {
  width: 100%;
  min-height: 76px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(15, 25, 47, .26);
  text-align: left;
}

.call-live-transcript span {
  display: block;
  color: rgba(255, 255, 255, .56);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.call-live-transcript p {
  min-height: 32px;
  margin: 6px 0 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
}

.call-context-note,
.call-prototype-boundary {
  display: block;
  width: 100%;
  margin-top: 9px;
  color: rgba(255, 255, 255, .62);
  font-size: 9px;
  line-height: 1.45;
}

.call-prototype-boundary {
  color: rgba(255, 255, 255, .42);
}

.call-actions {
  margin-top: 14px;
}

.call-actions button,
.call-session-actions button {
  min-height: 48px;
}

.call-actions button[aria-pressed="true"] {
  border-color: rgba(151, 235, 211, .5);
  background: rgba(151, 235, 211, .18);
}

.call-actions .call-start.live {
  background: #ef8098;
  color: #fff;
}

.call-session-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.call-session-actions button {
  flex: 1 1 120px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .9);
  font-size: 10px;
  font-weight: 750;
}

.call-session-actions button[data-call="interrupt"] {
  border-color: rgba(255, 210, 139, .34);
  background: rgba(255, 210, 139, .12);
}

.call-session-actions button[hidden] {
  display: none;
}

@keyframes voice-thinking {
  0%,
  100% {
    transform: scale(.94) rotate(-8deg);
    filter: hue-rotate(0deg);
  }

  50% {
    transform: scale(1.06) rotate(8deg);
    filter: hue-rotate(32deg);
  }
}

@media (max-width: 360px) {
  .chat-overlay.mode-call .chat-panel {
    padding-right: 14px;
    padding-left: 14px;
  }

  .call-live-transcript {
    padding: 10px 12px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .chat-overlay.mode-call .chat-panel {
    width: min(760px, calc(100vw - 20px));
    max-height: calc(100dvh - 10px);
  }

  .chat-overlay.mode-call .call-controls {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-areas:
      "orb identity"
      "orb status"
      "transcript transcript"
      "context context"
      "actions actions"
      "session session"
      "boundary boundary";
    column-gap: 14px;
    text-align: left;
  }

  .chat-overlay.mode-call .call-orb {
    grid-area: orb;
    align-self: center;
    margin: 0 auto;
  }

  .chat-overlay.mode-call .call-controls > strong {
    grid-area: identity;
    align-self: end;
  }

  .chat-overlay.mode-call .call-status {
    grid-area: status;
    margin-top: 0;
  }

  .call-live-transcript {
    grid-area: transcript;
    min-height: 64px;
    margin-top: 8px;
  }

  .call-context-note {
    grid-area: context;
  }

  .call-actions {
    grid-area: actions;
  }

  .call-session-actions {
    grid-area: session;
  }

  .call-prototype-boundary {
    grid-area: boundary;
  }
}

@media (prefers-reduced-motion: reduce) {
  .call-controls .call-orb {
    animation: none !important;
  }
}

/* v2.12 Welcome / Auth: a real local guest + email flow with explicit OIDC boundaries. */
.auth-experience {
  position: absolute;
  z-index: 230;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  color: #24324a;
  background:
    radial-gradient(circle at 16% 8%, rgba(105, 221, 219, .74), transparent 32%),
    radial-gradient(circle at 88% 14%, rgba(240, 151, 194, .68), transparent 34%),
    radial-gradient(circle at 58% 96%, rgba(247, 199, 105, .66), transparent 36%),
    linear-gradient(155deg, #dff3ea 0%, #f5e7ee 52%, #f5ecd4 100%);
  transition: opacity .28s ease, visibility .28s ease;
}

.auth-experience.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.auth-experience-content,
.auth-card {
  position: relative;
  width: 100%;
  height: 100%;
}

.auth-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-sky::before,
.auth-sky::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(63, 87, 94, .11);
  border-radius: 50%;
}

.auth-sky::before {
  width: 440px;
  height: 440px;
  top: -260px;
  left: -150px;
}

.auth-sky::after {
  width: 360px;
  height: 360px;
  right: -220px;
  bottom: -170px;
}

.auth-sky i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 12px rgba(255, 255, 255, .72);
  animation: auth-star-breathe 3.8s ease-in-out infinite alternate;
}

.auth-sky i:nth-child(1) { left: 14%; top: 22%; }
.auth-sky i:nth-child(2) { right: 13%; top: 35%; animation-delay: -1.2s; }
.auth-sky i:nth-child(3) { left: 22%; bottom: 14%; animation-delay: -2.2s; }

@keyframes auth-star-breathe {
  to { opacity: .25; transform: scale(.55); }
}

.auth-header {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  min-height: calc(70px + env(safe-area-inset-top));
  padding:
    max(20px, calc(env(safe-area-inset-top) + 10px))
    max(18px, calc(env(safe-area-inset-right) + 14px))
    8px
    max(18px, calc(env(safe-area-inset-left) + 14px));
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
}

.auth-wordmark {
  justify-self: center;
  color: #334255;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .28em;
}

.auth-icon-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(40, 55, 74, .09);
  border-radius: 50%;
  background: rgba(255, 255, 255, .58);
  color: #2e3c50;
  box-shadow: 0 8px 24px rgba(47, 66, 68, .08);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.auth-icon-button.close {
  font-size: 24px;
}

.auth-scroll {
  position: relative;
  z-index: 2;
  width: min(100%, 500px);
  height: 100%;
  margin: 0 auto;
  padding:
    max(104px, calc(env(safe-area-inset-top) + 88px))
    max(24px, calc(env(safe-area-inset-right) + 20px))
    max(90px, calc(env(safe-area-inset-bottom) + 76px))
    max(24px, calc(env(safe-area-inset-left) + 20px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.auth-scroll::-webkit-scrollbar {
  display: none;
}

.auth-intro,
.auth-form-intro,
.auth-provider-boundary,
.auth-success {
  text-align: center;
}

.auth-orb {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 4px auto 27px;
  display: grid;
  place-items: center;
  border-radius: 45% 55% 51% 49% / 58% 46% 54% 42%;
  color: rgba(255, 255, 255, .94);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .78), transparent 16%),
    radial-gradient(circle at 32% 39%, #74d9cf, transparent 36%),
    radial-gradient(circle at 70% 54%, #ed8fba, transparent 39%),
    radial-gradient(circle at 48% 78%, #f2c46d, transparent 34%),
    #8f83c3;
  box-shadow:
    0 22px 45px rgba(61, 78, 89, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .5);
  animation: auth-orb-float 4.4s ease-in-out infinite alternate;
}

.auth-orb::before,
.auth-orb::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 50%;
  transform: rotate(24deg);
}

.auth-orb::after {
  inset: -18px 6px;
  border-color: rgba(69, 88, 100, .14);
  transform: rotate(-31deg);
}

.auth-orb span {
  font-size: 32px;
  text-shadow: 0 0 18px rgba(255, 255, 255, .9);
}

@keyframes auth-orb-float {
  to { transform: translateY(-6px) rotate(2deg); }
}

.auth-kicker {
  margin: 0 0 12px;
  color: #687b78;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: .2em;
}

.auth-intro h1,
.auth-form-intro h1,
.auth-provider-boundary h1,
.auth-success h1 {
  margin: 0 auto;
  max-width: 370px;
  color: #26344b;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(27px, 8vw, 36px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.025em;
}

.auth-intro > p:last-child,
.auth-form-intro > p:last-child,
.auth-provider-boundary > p,
.auth-success > p {
  max-width: 380px;
  margin: 16px auto 0;
  color: #61716f;
  font-size: 13px;
  line-height: 1.55;
}

.auth-main-actions,
.auth-form {
  display: grid;
  gap: 11px;
  margin-top: 28px;
}

.auth-primary,
.auth-secondary,
.auth-text-button,
.auth-provider-grid button,
.auth-status-action {
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 99px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 760;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.auth-primary {
  border: 0;
  color: #fff;
  background: #29364c;
  box-shadow: 0 12px 25px rgba(42, 54, 74, .2);
}

.auth-secondary {
  border: 1px solid rgba(42, 55, 72, .18);
  color: #2c3b4f;
  background: rgba(255, 255, 255, .65);
}

.auth-text-button {
  border: 0;
  color: #506762;
  background: transparent;
}

.auth-text-button.danger {
  margin-top: 9px;
  color: #8b4f61;
}

.auth-primary:active,
.auth-secondary:active,
.auth-text-button:active,
.auth-provider-grid button:active {
  transform: scale(.975);
}

.auth-primary:disabled,
.auth-secondary:disabled {
  opacity: .58;
  cursor: wait;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 12px;
  color: #778681;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(57, 76, 80, .13);
}

.auth-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.auth-provider-grid button {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(42, 55, 72, .14);
  border-radius: 18px;
  color: #2d394b;
  background: rgba(255, 255, 255, .57);
}

.auth-provider-grid small {
  color: #82908b;
  font-size: 9px;
  letter-spacing: .1em;
}

.auth-trust-note,
.auth-policy {
  margin: 13px auto 0;
  color: #76837e;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.auth-form-intro {
  margin-bottom: 4px;
}

.auth-form-intro h1 {
  font-size: clamp(28px, 8vw, 35px);
}

.auth-field {
  display: grid;
  gap: 7px;
  text-align: left;
}

.auth-field > span {
  padding-left: 4px;
  color: #52635f;
  font-size: 11px;
  font-weight: 760;
}

.auth-field input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid rgba(43, 59, 73, .15);
  border-radius: 17px;
  outline: 0;
  color: #26354a;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  font: inherit;
  font-size: 16px;
}

.auth-field input:focus-visible,
.auth-icon-button:focus-visible,
.auth-primary:focus-visible,
.auth-secondary:focus-visible,
.auth-text-button:focus-visible,
.auth-provider-grid button:focus-visible {
  outline: 3px solid rgba(47, 108, 122, .3);
  outline-offset: 2px;
}

.auth-policy {
  margin: 0 3px 2px;
  text-align: left;
}

.auth-error {
  margin-top: 14px;
  padding: 13px 15px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(157, 75, 96, .2);
  border-radius: 16px;
  color: #7f4356;
  background: rgba(255, 239, 242, .76);
  font-size: 11px;
  line-height: 1.45;
}

.auth-local-code {
  margin: 22px 0 7px;
  padding: 16px;
  display: grid;
  gap: 7px;
  border: 1px dashed rgba(47, 71, 76, .28);
  border-radius: 18px;
  text-align: center;
  background: rgba(255, 255, 255, .46);
}

.auth-local-code small {
  color: #74827e;
  font-size: 9px;
  letter-spacing: .13em;
  font-weight: 800;
}

.auth-local-code strong {
  color: #29374b;
  font-size: 29px;
  letter-spacing: .24em;
}

.auth-provider-boundary {
  padding-top: 24px;
}

.auth-provider-mark,
.auth-success-mark {
  width: 86px;
  height: 86px;
  margin: 0 auto 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(43, 60, 73, .13);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(145deg, #5ccdc9, #c988b4 56%, #e6b762);
  box-shadow: 0 18px 38px rgba(53, 72, 78, .16);
  font-family: Georgia, serif;
  font-size: 34px;
}

.auth-boundary-list {
  margin: 24px 0;
  padding: 16px;
  display: grid;
  gap: 11px;
  border: 1px solid rgba(47, 65, 74, .12);
  border-radius: 19px;
  text-align: left;
  color: #52635f;
  background: rgba(255, 255, 255, .48);
  font-size: 11px;
  line-height: 1.4;
}

.auth-success {
  padding-top: min(16vh, 115px);
}

.auth-success-mark {
  border-radius: 50%;
  font-family: inherit;
  font-size: 31px;
}

.auth-success .auth-primary,
.auth-provider-boundary .auth-primary {
  margin-top: 28px;
}

.auth-account-summary {
  margin: 25px 0 18px;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(45, 61, 75, .13);
  border-radius: 19px;
  background: rgba(255, 255, 255, .55);
}

.auth-account-summary > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #fff;
  background: #334258;
  font-weight: 800;
}

.auth-account-summary div {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left;
}

.auth-account-summary b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.auth-account-summary small {
  color: #77847f;
  font-size: 10px;
}

.auth-global-boundary {
  position: absolute;
  z-index: 4;
  left: max(18px, calc(env(safe-area-inset-left) + 14px));
  right: max(18px, calc(env(safe-area-inset-right) + 14px));
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 7px));
  color: rgba(52, 69, 75, .62);
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: .06em;
  text-align: center;
  pointer-events: none;
}

.auth-settings-link {
  width: 100%;
  min-height: 48px;
}

.account-auth-manage {
  width: 100%;
  min-height: 48px;
  margin: 10px 0 14px;
  padding: 12px 17px;
  border: 1px solid rgba(57, 72, 87, .13);
  border-radius: 16px;
  color: #304057;
  background: rgba(255, 255, 255, .7);
  font-weight: 760;
  cursor: pointer;
}

@media (max-width: 340px) {
  .auth-scroll {
    padding-right: max(18px, calc(env(safe-area-inset-right) + 14px));
    padding-left: max(18px, calc(env(safe-area-inset-left) + 14px));
  }

  .auth-orb {
    width: 96px;
    height: 96px;
    margin-bottom: 22px;
  }

  .auth-intro h1,
  .auth-form-intro h1,
  .auth-provider-boundary h1,
  .auth-success h1 {
    font-size: 27px;
  }
}

@media (max-height: 700px) and (orientation: portrait) {
  .auth-scroll {
    padding-top: max(88px, calc(env(safe-area-inset-top) + 76px));
  }

  .auth-orb {
    width: 86px;
    height: 86px;
    margin-bottom: 17px;
  }

  .auth-main-actions,
  .auth-form {
    margin-top: 20px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .auth-header {
    min-height: calc(58px + env(safe-area-inset-top));
    padding-top: max(7px, env(safe-area-inset-top));
  }

  .auth-scroll {
    width: min(100%, 780px);
    padding:
      max(66px, calc(env(safe-area-inset-top) + 56px))
      max(72px, calc(env(safe-area-inset-right) + 28px))
      max(46px, calc(env(safe-area-inset-bottom) + 38px))
      max(72px, calc(env(safe-area-inset-left) + 28px));
  }

  .auth-orb {
    width: 68px;
    height: 68px;
    margin: 0 auto 11px;
  }

  .auth-orb span {
    font-size: 22px;
  }

  .auth-intro h1,
  .auth-form-intro h1,
  .auth-provider-boundary h1,
  .auth-success h1 {
    font-size: 25px;
  }

  .auth-intro > p:last-child,
  .auth-form-intro > p:last-child,
  .auth-provider-boundary > p,
  .auth-success > p {
    margin-top: 9px;
  }

  .auth-main-actions,
  .auth-form {
    margin-top: 14px;
  }

  .auth-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .auth-form[data-auth-form="register"] .auth-field:first-child,
  .auth-form .auth-policy,
  .auth-form .auth-primary {
    grid-column: 1 / -1;
  }

  .auth-form[data-auth-form="recovery-request"] .auth-primary {
    grid-column: auto;
  }

  .auth-form[data-auth-form="recovery-complete"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .auth-primary,
  .auth-secondary,
  .auth-text-button,
  .auth-provider-grid button {
    min-height: 48px;
  }

  .auth-divider {
    margin: 13px 0 8px;
  }

  .auth-provider-boundary,
  .auth-success {
    padding-top: 0;
  }

  .auth-provider-mark,
  .auth-success-mark {
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    border-radius: 19px;
    font-size: 24px;
  }

  .auth-boundary-list {
    margin: 14px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-experience,
  .auth-orb,
  .auth-sky i {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* v1.8 Widget Snapshot Gallery */
.widgets-evolved-page {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
}

.widgets-evolved-page .page-shell {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
}

.widgets-evolved-page .page-content {
  width: min(100%, 760px);
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.widgets-evolved-page .page-back {
  right: max(18px, calc(50% - 380px + 18px));
}

.widget-platform-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}

.widget-platform-strip span {
  padding: 6px 9px;
  border: 1px solid rgba(52, 80, 70, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  color: #60716b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
}

.widget-preview-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin: 10px 0 24px;
}

.widget-preview {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 12%, rgba(244, 220, 162, .32), transparent 30%),
    radial-gradient(circle at 12% 86%, rgba(125, 199, 179, .22), transparent 36%),
    linear-gradient(145deg, rgba(51, 66, 94, .94), rgba(42, 50, 77, .97));
  box-shadow: 0 14px 32px rgba(36, 48, 68, .16);
  color: #fff;
}

.widget-preview.small {
  aspect-ratio: 1;
}

.widget-preview.medium {
  grid-column: span 2;
  min-height: 150px;
}

.widget-preview.lock {
  grid-column: span 2;
  min-height: 118px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 48%, rgba(166, 133, 209, .28), transparent 30%),
    linear-gradient(135deg, rgba(49, 57, 84, .94), rgba(59, 75, 95, .94));
}

.widget-system-chrome {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 0;
  color: rgba(255, 255, 255, .6);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.widget-preview-content {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.widget-preview.small .widget-preview-content {
  grid-template-columns: 1fr;
  align-content: center;
  text-align: center;
}

.widget-fari-mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7c5 0 8%, #8bd4c3 24%, #7a69aa 52%, transparent 72%);
  box-shadow: 0 0 24px rgba(139, 212, 195, .34);
  color: #fff8c5;
}

.widget-preview.small .widget-fari-mark {
  margin: 0 auto;
}

.widget-preview-content img {
  width: 46px;
  height: 74px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .3);
}

.widget-preview-content b,
.widget-preview-content p {
  display: block;
  min-width: 0;
}

.widget-preview-content b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.15;
}

.widget-preview-content p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  line-height: 1.45;
}

.widget-preview > button {
  width: calc(100% - 24px);
  min-height: 48px;
  margin: 0 12px 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .82);
  font-size: 8px;
  font-weight: 750;
}

.widget-preview.placeholder {
  min-height: 140px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
}

.widget-preview.placeholder i {
  height: 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
}

.widget-preview.placeholder i:nth-child(2) {
  width: 72%;
}

.widget-preview.placeholder i:nth-child(3) {
  width: 45%;
}

.widget-privacy-card {
  align-items: flex-start;
  flex-direction: column;
}

.widget-privacy-options {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.widget-privacy-options button,
.widget-kind-list button,
.widget-tarot-reveal > button,
.widget-personal-confirmation button {
  min-height: 48px;
}

.widget-privacy-options button {
  padding: 8px 6px;
  border: 1px solid rgba(48, 79, 68, .11);
  border-radius: 12px;
  background: #f1f4f1;
  color: #6a7772;
  font-size: 9px;
  font-weight: 800;
}

.widget-privacy-options button[aria-pressed="true"] {
  border-color: rgba(58, 124, 101, .2);
  background: #dcefe7;
  color: #366c5d;
}

.widget-personal-confirmation {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  margin: 10px 0 20px;
  padding: 14px;
  border: 1px solid rgba(156, 112, 65, .16);
  border-radius: 18px;
  background: #fff6e9;
  color: #6d5947;
}

.widget-personal-confirmation > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f3dfbe;
}

.widget-personal-confirmation b {
  font-size: 12px;
}

.widget-personal-confirmation p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.widget-personal-confirmation button {
  padding: 8px 12px;
  border: 0;
  border-radius: 13px;
  background: #3f7564;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.widget-personal-confirmation button:last-child {
  grid-column: 2;
  border: 1px solid rgba(63, 117, 100, .14);
  background: transparent;
  color: #4f6e64;
}

.widget-kind-list {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.widget-kind-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(46, 72, 64, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .66);
  color: #52675f;
  text-align: left;
}

.widget-kind-list button span {
  font-size: 11px;
  font-weight: 760;
}

.widget-kind-list button b {
  color: #8a9591;
  font-size: 9px;
}

.widget-kind-list button[aria-pressed="true"] {
  background: #e5f1eb;
}

.widget-kind-list button[aria-pressed="true"] b {
  color: #3c7766;
}

.widget-tarot-reveal {
  margin-bottom: 18px;
}

.widget-tarot-reveal.disabled {
  opacity: .58;
}

.widget-tarot-reveal > button {
  min-width: 110px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: #e6eee9;
  color: #587066;
  font-size: 9px;
  font-weight: 800;
}

.widget-tarot-reveal > button[aria-pressed="true"] {
  background: #d7ede3;
  color: #36705f;
}

.widget-native-boundary {
  margin: 16px 0 8px;
  padding: 14px;
  border: 1px dashed rgba(55, 85, 74, .18);
  border-radius: 16px;
  color: #5d6f68;
}

.widget-native-boundary b {
  font-size: 10px;
}

.widget-native-boundary p {
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.55;
}

@media (max-width: 360px) {
  .widget-preview-board {
    grid-template-columns: 1fr;
  }

  .widget-preview.medium,
  .widget-preview.lock {
    grid-column: auto;
  }

  .widget-preview.small {
    width: min(100%, 230px);
    justify-self: center;
  }

  .widget-personal-confirmation {
    grid-template-columns: 1fr;
  }

  .widget-personal-confirmation > span {
    display: none;
  }

  .widget-personal-confirmation button:last-child {
    grid-column: auto;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .widget-preview-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .widget-preview.medium,
  .widget-preview.lock {
    grid-column: auto;
  }

  .widget-preview.small {
    aspect-ratio: auto;
    min-height: 180px;
  }
}

/* v1.9 Account, subscription, safety, export, and deletion center */
.settings-evolved-page {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
}

.settings-evolved-page .page-shell {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
}

.settings-evolved-page .page-content {
  width: min(100%, 760px);
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.settings-evolved-page .page-back {
  right: max(18px, calc(50% - 380px + 18px));
}

.account-status-card,
.account-profile-card,
.account-device-card,
.account-persistence-card,
.subscription-card,
.safety-boundary-card,
.feedback-form,
.data-control-card,
.danger-zone,
.deletion-scheduled-card,
.deletion-confirmation {
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid rgba(43, 67, 59, .11);
  border-radius: 20px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 11px 27px rgba(37, 55, 49, .06);
}

.account-status-card {
  min-height: 72px;
  display: grid;
  place-items: center;
  gap: 10px;
  color: #65756f;
  font-size: 12px;
}

.account-status-card.error {
  color: #8b4f50;
  background: #fff0ee;
}

.account-status-card button,
.account-profile-card button,
.account-device-card button,
.subscription-card button,
.feedback-entry-actions button,
.feedback-form button,
.data-control-card button,
.danger-zone button,
.deletion-scheduled-card button,
.deletion-confirmation button {
  min-width: 48px;
  min-height: 48px;
  cursor: pointer;
}

.account-profile-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.account-profile-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, #fff4bc 0 8%, #83d0bc 24%, #786aa8 54%, #354867 78%);
  box-shadow: 0 8px 20px rgba(69, 105, 94, .18);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 20px;
}

.account-profile-card b,
.account-device-card b,
.data-control-card b,
.danger-zone b,
.deletion-scheduled-card b {
  display: block;
  color: #30483f;
  font-size: 12px;
}

.account-profile-card small,
.account-device-card small,
.account-persistence-card small,
.data-control-card small,
.danger-zone small,
.deletion-scheduled-card small {
  display: block;
  margin-top: 4px;
  color: #6d7c76;
  font-size: 10px;
  line-height: 1.5;
}

.account-profile-card code,
.account-device-card code {
  display: inline-block;
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  color: #6a7772;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-state-chip {
  padding: 7px 9px;
  border-radius: 999px;
  background: #dcefe7;
  color: #376c5d;
  font-size: 9px;
  font-weight: 800;
}

.account-device-card,
.account-persistence-card,
.data-control-card,
.danger-zone,
.deletion-scheduled-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.account-persistence-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.account-persistence-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #dceee7;
  color: #3d7565;
  font-size: 18px;
  font-weight: 850;
}

.account-persistence-card.inactive > span {
  background: #eee9df;
  color: #837565;
}

.account-persistence-card b {
  display: block;
  color: #30483f;
  font-size: 12px;
}

.subscription-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 4%, rgba(244, 214, 151, .35), transparent 32%),
    linear-gradient(145deg, #2f3c5c, #44536b);
  color: #fff;
}

.subscription-card.active {
  background:
    radial-gradient(circle at 87% 10%, rgba(251, 223, 153, .5), transparent 30%),
    linear-gradient(145deg, #374f5b, #516c68 64%, #8d7c68);
}

.subscription-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.subscription-head small {
  color: #f5d89e;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
}

.subscription-head h3 {
  margin: 6px 0 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 24px;
  font-weight: 500;
}

.subscription-head > span {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: rgba(255, 255, 255, .76);
  font-size: 9px;
  text-transform: uppercase;
}

.subscription-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 16px 0 12px;
}

.subscription-benefits span {
  min-width: 0;
  padding: 10px 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .7);
  font-size: 8px;
  line-height: 1.35;
  text-align: center;
}

.subscription-benefits b {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 13px;
}

.subscription-card > p,
.subscription-boundary {
  display: block;
  margin: 9px 0 0;
  color: rgba(255, 255, 255, .65);
  font-size: 9px;
  line-height: 1.5;
}

.subscription-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.subscription-actions button,
.subscription-test-failure {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.subscription-actions button:first-child {
  border-color: transparent;
  background: #fff;
  color: #33485a;
}

.subscription-test-failure {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .7);
}

.subscription-outcome {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .82);
  font-size: 9px;
}

.subscription-outcome.failed {
  background: rgba(255, 170, 158, .15);
  color: #ffe1dd;
}

.safety-boundary-card {
  display: grid;
  gap: 12px;
}

.safety-boundary-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.safety-boundary-row > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #e1eee8;
  color: #3f6d60;
  font-size: 9px;
  font-weight: 900;
}

.safety-boundary-row b,
.feedback-form b {
  display: block;
  color: #334b42;
  font-size: 11px;
}

.safety-boundary-row small,
.feedback-form small {
  display: block;
  margin-top: 4px;
  color: #6b7a74;
  font-size: 9px;
  line-height: 1.5;
}

.feedback-entry-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.feedback-entry-actions button,
.data-control-card button,
.deletion-scheduled-card button {
  padding: 8px 12px;
  border: 1px solid rgba(47, 89, 74, .13);
  border-radius: 14px;
  background: #e2efe9;
  color: #3e6b5d;
  font-size: 10px;
  font-weight: 800;
}

.feedback-entry-actions button:last-child {
  background: #f3e8e6;
  color: #83524e;
}

.feedback-form {
  display: grid;
  gap: 13px;
}

.feedback-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.feedback-form-head button {
  width: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #edf1ee;
  color: #56665f;
  font-size: 25px;
}

.feedback-form label,
.deletion-confirmation label {
  display: grid;
  gap: 6px;
  color: #4e6159;
  font-size: 10px;
  font-weight: 750;
}

.feedback-form select,
.feedback-form textarea,
.deletion-confirmation input {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid rgba(48, 75, 65, .14);
  border-radius: 13px;
  outline: 0;
  background: #f8faf8;
  color: #31483f;
  font: inherit;
  font-size: 16px;
}

.feedback-form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.feedback-form select:focus,
.feedback-form textarea:focus,
.deletion-confirmation input:focus {
  border-color: #548a77;
  box-shadow: 0 0 0 3px rgba(84, 138, 119, .14);
}

.feedback-consent {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
}

.feedback-consent input {
  width: 24px;
  height: 24px;
  margin: 0 auto;
}

.feedback-form > button {
  border: 0;
  border-radius: 14px;
  background: #356b5b;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

.feedback-success {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #e0f0e8;
  color: #396a5b;
  font-size: 10px;
}

.data-control-card {
  grid-template-columns: minmax(0, 1fr);
}

.data-control-card button {
  width: 100%;
}

.danger-zone {
  border-color: rgba(155, 68, 67, .15);
  background: #fff5f3;
}

.danger-zone button {
  padding: 8px 12px;
  border: 1px solid rgba(153, 67, 65, .18);
  border-radius: 14px;
  background: #f5dfdc;
  color: #8a4d4a;
  font-size: 10px;
  font-weight: 850;
}

.deletion-scheduled-card {
  border-color: rgba(153, 113, 50, .18);
  background: #fff7e9;
}

.deletion-confirmation {
  border-color: rgba(153, 67, 65, .2);
  background: #fff1ee;
}

.deletion-confirmation > b {
  color: #784542;
  font-size: 13px;
}

.deletion-confirmation > p {
  color: #745e5a;
  font-size: 10px;
  line-height: 1.55;
}

.deletion-confirmation > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.deletion-confirmation button {
  border: 1px solid rgba(119, 70, 66, .13);
  border-radius: 14px;
  background: transparent;
  color: #70514e;
  font-size: 10px;
  font-weight: 800;
}

.deletion-confirmation button:last-child {
  border: 0;
  background: #9a514d;
  color: #fff;
}

@media (max-width: 360px) {
  .account-profile-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .account-state-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .account-device-card,
  .account-persistence-card,
  .danger-zone,
  .deletion-scheduled-card {
    grid-template-columns: 1fr;
  }

  .subscription-actions,
  .feedback-entry-actions,
  .deletion-confirmation > div {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .subscription-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .safety-boundary-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .safety-boundary-row {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
  }

  .safety-boundary-row > span {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 700px) and (max-height: 620px) and (orientation: landscape) {
  .onboarding-shell {
    padding-right: max(14px, calc(env(safe-area-inset-right) + 10px));
    padding-left: max(14px, calc(env(safe-area-inset-left) + 10px));
  }

  .onboarding-welcome {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    column-gap: 18px;
  }

  .onboarding-question {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: 16px;
  }

  .onboarding-reveal {
    grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr);
    column-gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble.typing i {
    animation: none;
  }
}

/* Preference-matching onboarding: transparent, editable, and explicitly non-clinical. */
.onboarding-page {
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 4%, rgba(111, 211, 201, .28), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(233, 164, 196, .26), transparent 32%),
    linear-gradient(180deg, #fbf7ef 0%, #edf3ee 100%);
  color: #26344b;
}

.onboarding-page .page-back {
  display: none;
}

.onboarding-page > .page-shell {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  max-width: none;
  box-sizing: border-box;
}

.onboarding-page #pageContent {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  max-width: none;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.onboarding-shell {
  position: relative;
  width: min(100%, 560px);
  min-height: 100%;
  margin: 0 auto;
  padding:
    max(32px, calc(env(safe-area-inset-top) + 24px))
    clamp(18px, 5vw, 28px)
    max(30px, calc(env(safe-area-inset-bottom) + 22px));
  color: #26344b;
}

.onboarding-shell button,
.onboarding-shell textarea {
  font: inherit;
}

.onboarding-kicker {
  margin: 0;
  color: #577168;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.onboarding-shell h1 {
  margin: 10px 0 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(31px, 8.5vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.onboarding-shell > p,
.onboarding-question-copy > p {
  color: #687871;
  font-size: 13px;
  line-height: 1.65;
}

.onboarding-welcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.onboarding-language {
  position: absolute;
  top: max(18px, calc(env(safe-area-inset-top) + 12px));
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  display: flex;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .65);
}

.onboarding-language button {
  min-width: 56px;
  min-height: 48px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #75817c;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.onboarding-language button[aria-pressed="true"] {
  background: #fff;
  color: #304840;
  box-shadow: 0 5px 15px rgba(54, 81, 71, .11);
}

.onboarding-oracle-mark {
  position: relative;
  width: 156px;
  height: 172px;
  margin: 44px auto 25px;
  display: grid;
  place-items: center;
}

.onboarding-oracle-mark::before,
.onboarding-oracle-mark::after,
.onboarding-oracle-mark i {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.onboarding-oracle-mark::before {
  inset: 7px 0 9px;
  border: 1px solid rgba(71, 110, 96, .22);
  background:
    radial-gradient(circle at 52% 40%, rgba(255, 239, 186, .95) 0 5%, rgba(129, 209, 188, .65) 18%, rgba(130, 111, 187, .36) 43%, transparent 70%);
  box-shadow: 0 20px 48px rgba(67, 94, 84, .12);
}

.onboarding-oracle-mark::after {
  inset: 25px 18px 27px;
  border: 1px solid rgba(255, 255, 255, .7);
}

.onboarding-oracle-mark i {
  width: 94px;
  height: 94px;
  border: 1px solid rgba(250, 220, 151, .58);
  transform: rotate(45deg);
}

.onboarding-oracle-mark span {
  position: relative;
  color: #fff7d5;
  font-size: 34px;
  text-shadow: 0 0 22px rgba(255, 222, 151, .95);
}

.onboarding-welcome > p:not(.onboarding-kicker) {
  max-width: 440px;
  margin: 15px auto 0;
}

.onboarding-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 22px auto 26px;
}

.onboarding-trust-row span,
.onboarding-traits span {
  padding: 7px 10px;
  border: 1px solid rgba(69, 100, 88, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .57);
  color: #5f716a;
  font-size: 10px;
  font-weight: 700;
}

.onboarding-primary,
.onboarding-text-action,
.onboarding-match-status button {
  width: 100%;
  min-height: 52px;
  border-radius: 17px;
  cursor: pointer;
}

.onboarding-primary {
  border: 0;
  background: #2f6757;
  box-shadow: 0 12px 25px rgba(47, 103, 87, .2);
  color: #fff;
  font-weight: 780;
}

.onboarding-text-action {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #708079;
  font-size: 12px;
  font-weight: 700;
}

.onboarding-question {
  display: flex;
  flex-direction: column;
}

.onboarding-question-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
}

.onboarding-back-button,
.onboarding-close-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 8px 22px rgba(39, 61, 53, .08);
  color: #375148;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.onboarding-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(68, 94, 84, .1);
}

.onboarding-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fb8a4, #d79abc);
  transition: width .3s ease;
}

.onboarding-skip {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #738079;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.onboarding-question-copy {
  margin-top: 30px;
}

.onboarding-question-copy h1 {
  max-width: 500px;
}

.onboarding-question-copy > p:not(.onboarding-kicker) {
  margin: 12px 0 0;
}

.onboarding-question-body {
  margin-top: 24px;
}

.onboarding-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.onboarding-fieldset legend {
  margin-bottom: 10px;
  color: #4d635a;
  font-size: 12px;
  font-weight: 760;
}

.onboarding-option-list,
.onboarding-option-grid,
.onboarding-chip-grid {
  display: grid;
  gap: 10px;
}

.onboarding-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-option-grid.compact {
  gap: 8px;
}

.onboarding-chip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-option {
  min-width: 0;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid rgba(66, 91, 81, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .67);
  color: #435850;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.onboarding-option:hover {
  transform: translateY(-1px);
}

.onboarding-option.selected,
.onboarding-option[aria-pressed="true"] {
  border-color: rgba(60, 115, 94, .46);
  background: #e5f1ea;
  box-shadow: 0 8px 22px rgba(54, 91, 77, .08);
}

.onboarding-option strong,
.onboarding-option small {
  display: block;
}

.onboarding-option strong {
  font-size: 14px;
}

.onboarding-option small {
  margin-top: 4px;
  color: #72817b;
  font-size: 10px;
  line-height: 1.4;
}

.onboarding-option-grid.compact .onboarding-option,
.onboarding-chip-grid .onboarding-option {
  min-height: 50px;
  text-align: center;
  font-size: 12px;
  font-weight: 720;
}

.onboarding-selection-note {
  margin: 10px 0 0;
  color: #79857f;
  font-size: 10px;
  text-align: center;
}

.onboarding-consent-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(66, 91, 81, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .65);
  cursor: pointer;
}

.onboarding-consent-card input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #3f7665;
}

.onboarding-consent-card strong,
.onboarding-consent-card small {
  display: block;
}

.onboarding-consent-card strong {
  color: #40564d;
  font-size: 13px;
}

.onboarding-consent-card small {
  margin-top: 5px;
  color: #73817b;
  font-size: 10px;
  line-height: 1.5;
}

.onboarding-note-field {
  display: block;
  margin-top: 18px;
}

.onboarding-note-field > span {
  display: block;
  margin-bottom: 8px;
  color: #53675f;
  font-size: 11px;
  font-weight: 720;
}

.onboarding-note-field textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid rgba(65, 91, 80, .14);
  border-radius: 17px;
  outline: none;
  background: rgba(255, 255, 255, .72);
  color: #30453d;
  font-size: 16px;
  line-height: 1.5;
}

.onboarding-note-field textarea:focus {
  border-color: #568471;
  box-shadow: 0 0 0 3px rgba(86, 132, 113, .12);
}

.onboarding-voice-answer {
  margin-top: 10px;
}

.onboarding-voice-answer button,
.onboarding-voice-preview {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid rgba(61, 91, 79, .15);
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  color: #3f6557;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.onboarding-voice-answer button {
  width: 100%;
}

.onboarding-voice-answer button i,
.onboarding-voice-preview i {
  position: relative;
  width: 13px;
  height: 17px;
  flex: none;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.onboarding-voice-answer button i::after,
.onboarding-voice-preview i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 8px;
  height: 5px;
  transform: translateX(-50%);
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 7px 7px;
}

.onboarding-voice-answer button.listening,
.onboarding-voice-preview.playing {
  border-color: rgba(172, 91, 115, .28);
  background: rgba(248, 226, 232, .84);
  color: #8f4c61;
}

.onboarding-voice-answer button.listening i,
.onboarding-voice-preview.playing i {
  animation: onboarding-voice-pulse 1.15s ease-in-out infinite;
}

.onboarding-voice-answer button:disabled,
.onboarding-voice-preview:disabled {
  cursor: default;
  opacity: .58;
}

.onboarding-voice-answer p,
.onboarding-voice-preview-status {
  margin: 7px 3px 0;
  color: #7a8781;
  font-size: 9.5px;
  line-height: 1.45;
}

@keyframes onboarding-voice-pulse {
  50% {
    transform: scale(1.16);
    filter: drop-shadow(0 0 6px rgba(143, 76, 97, .38));
  }
}

.onboarding-question-footer {
  margin-top: auto;
  padding-top: 24px;
}

.onboarding-reflection {
  min-height: 18px;
  margin: 0 0 10px;
  color: #658075;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.onboarding-review-list {
  display: grid;
  gap: 8px;
}

.onboarding-review-list button {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(64, 90, 79, .11);
  border-radius: 17px;
  background: rgba(255, 255, 255, .66);
  color: #40554d;
  text-align: left;
  cursor: pointer;
}

.onboarding-review-list small,
.onboarding-review-list strong {
  display: block;
}

.onboarding-review-list small {
  color: #7a8781;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.onboarding-review-list strong {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}

.onboarding-review-list b {
  color: #4d7867;
  font-size: 10px;
}

.onboarding-memory-summary,
.onboarding-ai-note {
  margin-top: 14px;
  padding: 15px;
  border-radius: 18px;
  background: rgba(225, 238, 231, .75);
}

.onboarding-memory-summary strong,
.onboarding-ai-note strong {
  color: #3f5b50;
  font-size: 12px;
}

.onboarding-memory-summary p,
.onboarding-ai-note p {
  margin: 5px 0 0;
  color: #697a73;
  font-size: 10px;
  line-height: 1.55;
}

.onboarding-matching {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.onboarding-match-orb {
  position: relative;
  width: 184px;
  height: 184px;
  margin-bottom: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 203, .96) 0 4%, rgba(116, 203, 183, .72) 16%, rgba(135, 115, 188, .34) 43%, transparent 70%);
}

.onboarding-match-orb i {
  position: absolute;
  inset: calc(12px * var(--ring, 1));
  border: 1px solid rgba(74, 115, 100, .2);
  border-radius: 50%;
  animation: onboarding-ring 3.4s ease-in-out infinite;
}

.onboarding-match-orb i:nth-child(2) {
  --ring: 2;
  animation-delay: -.8s;
}

.onboarding-match-orb i:nth-child(3) {
  --ring: 3;
  animation-delay: -1.6s;
}

.onboarding-match-orb span {
  color: #fff9dc;
  font-size: 38px;
  text-shadow: 0 0 20px rgba(255, 226, 154, .95);
}

@keyframes onboarding-ring {
  50% {
    opacity: .45;
    transform: scale(1.08);
  }
}

.onboarding-matching h1 {
  max-width: 470px;
}

.onboarding-matching > p:not(.onboarding-kicker) {
  max-width: 420px;
  margin: 14px auto 0;
}

.onboarding-match-status {
  min-height: 48px;
  margin-top: 24px;
  color: #64766e;
  font-size: 11px;
}

.onboarding-match-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #6cae98;
  animation: backend-status-pulse 1s ease-in-out infinite alternate;
}

.onboarding-match-status.error {
  max-width: 420px;
  padding: 14px;
  border: 1px solid rgba(158, 84, 77, .16);
  border-radius: 17px;
  background: rgba(255, 240, 236, .84);
  color: #7c4e49;
}

.onboarding-match-status.error::before {
  display: none;
}

.onboarding-match-status strong,
.onboarding-match-status span {
  display: block;
}

.onboarding-match-status span {
  margin-top: 5px;
  line-height: 1.5;
}

.onboarding-match-status button {
  min-height: 44px;
  margin-top: 11px;
  border: 1px solid rgba(124, 78, 73, .18);
  background: #fff;
  color: inherit;
  font-weight: 750;
}

.onboarding-reveal {
  padding-top: max(68px, calc(env(safe-area-inset-top) + 58px));
  text-align: center;
}

.onboarding-close-button {
  position: absolute;
  top: max(18px, calc(env(safe-area-inset-top) + 12px));
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  font-size: 24px;
}

.onboarding-companion-portrait {
  position: relative;
  width: 146px;
  height: 146px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 46% 54%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 249, 216, .95) 0 5%, rgba(129, 209, 188, .8) 19%, rgba(92, 150, 131, .7) 43%, rgba(92, 81, 143, .35) 68%, transparent 72%);
  filter: drop-shadow(0 18px 22px rgba(57, 82, 73, .14));
}

.onboarding-companion-portrait[data-persona="mira"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 247, 205, .96) 0 5%, rgba(236, 169, 198, .78) 20%, rgba(155, 118, 183, .65) 47%, transparent 72%);
}

.onboarding-companion-portrait[data-persona="ember"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 248, 212, .96) 0 5%, rgba(239, 184, 117, .8) 21%, rgba(175, 105, 92, .56) 49%, transparent 72%);
}

.onboarding-companion-portrait i {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 50%;
}

.onboarding-companion-portrait span {
  color: #fff6d2;
  font-size: 38px;
  text-shadow: 0 0 22px rgba(255, 226, 155, .95);
}

.onboarding-reveal h1 {
  margin-top: 4px;
  font-size: clamp(38px, 11vw, 52px);
}

.onboarding-voice {
  margin: 5px 0 0;
  color: #6b7a74;
  font-size: 11px;
  font-weight: 720;
}

.onboarding-voice-preview {
  min-width: 190px;
  margin: 10px auto 0;
}

.onboarding-voice-preview-status {
  max-width: 440px;
  margin-right: auto;
  margin-left: auto;
}

.onboarding-traits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 14px 0;
}

.onboarding-rationale {
  max-width: 470px;
  margin: 0 auto;
}

.onboarding-reveal blockquote {
  max-width: 480px;
  margin: 18px auto;
  padding: 16px;
  border: 1px solid rgba(64, 92, 81, .11);
  border-radius: 19px;
  background: rgba(255, 255, 255, .68);
  color: #40564d;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 14px;
  line-height: 1.6;
}

.onboarding-persona-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.onboarding-persona-picker button {
  min-height: 67px;
  padding: 9px 6px;
  border: 1px solid rgba(63, 90, 79, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .56);
  color: #52665e;
  cursor: pointer;
}

.onboarding-persona-picker button[aria-pressed="true"] {
  border-color: rgba(53, 110, 88, .45);
  background: #deeee5;
}

.onboarding-persona-picker strong,
.onboarding-persona-picker small {
  display: block;
}

.onboarding-persona-picker strong {
  font-size: 12px;
}

.onboarding-persona-picker small {
  margin-top: 3px;
  color: #78857f;
  font-size: 8px;
  line-height: 1.35;
}

.onboarding-reveal .onboarding-primary {
  margin-top: 16px;
}

.onboarding-settings-link {
  border-top: 1px solid rgba(43, 48, 64, .08);
}

@media (max-width: 360px) {
  .onboarding-shell {
    padding-right: 16px;
    padding-left: 16px;
  }

  .onboarding-shell h1 {
    font-size: 29px;
  }

  .onboarding-question-copy {
    margin-top: 20px;
  }

  .onboarding-question-body {
    margin-top: 18px;
  }

  .onboarding-option {
    min-height: 56px;
    padding: 10px 12px;
  }

  .onboarding-oracle-mark {
    width: 128px;
    height: 140px;
    margin-top: 55px;
    margin-bottom: 18px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .onboarding-shell {
    width: min(100%, 820px);
    padding:
      max(20px, calc(env(safe-area-inset-top) + 14px))
      max(22px, calc(env(safe-area-inset-right) + 18px))
      max(20px, calc(env(safe-area-inset-bottom) + 14px))
      max(22px, calc(env(safe-area-inset-left) + 18px));
  }

  .onboarding-welcome {
    display: grid;
    grid-template-columns: minmax(170px, .72fr) minmax(300px, 1.28fr);
    align-content: center;
    column-gap: 28px;
    text-align: left;
  }

  .onboarding-welcome .onboarding-oracle-mark {
    grid-column: 1;
    grid-row: 1 / span 7;
    margin: 0 auto;
  }

  .onboarding-welcome > :not(.onboarding-oracle-mark):not(.onboarding-language) {
    grid-column: 2;
  }

  .onboarding-welcome .onboarding-trust-row {
    justify-content: flex-start;
    margin: 13px 0;
  }

  .onboarding-question {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(300px, 1.1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 28px;
  }

  .onboarding-question-head {
    grid-column: 1 / -1;
  }

  .onboarding-question-copy {
    grid-column: 1;
    grid-row: 2;
    margin-top: 20px;
  }

  .onboarding-question-body {
    grid-column: 2;
    grid-row: 2 / span 2;
    margin-top: 20px;
  }

  .onboarding-question-footer {
    grid-column: 1;
    grid-row: 3;
    padding-top: 12px;
  }

  .onboarding-option {
    min-height: 50px;
    padding: 9px 12px;
  }

  .onboarding-reveal {
    width: min(100%, 820px);
    display: grid;
    grid-template-columns: minmax(170px, .62fr) minmax(340px, 1.38fr);
    align-content: center;
    column-gap: 28px;
    text-align: left;
  }

  .onboarding-reveal .onboarding-companion-portrait {
    grid-column: 1;
    grid-row: 1 / span 9;
    margin: 0 auto;
  }

  .onboarding-reveal > :not(.onboarding-companion-portrait):not(.onboarding-close-button) {
    grid-column: 2;
  }

  .onboarding-reveal .onboarding-traits {
    justify-content: flex-start;
  }

  .onboarding-reveal .onboarding-voice-preview,
  .onboarding-reveal .onboarding-voice-preview-status {
    margin-right: 0;
    margin-left: 0;
  }

  .onboarding-reveal blockquote,
  .onboarding-rationale {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 620px) and (max-height: 620px) and (orientation: landscape) {
  .onboarding-shell {
    padding-right: max(16px, calc(env(safe-area-inset-right) + 12px));
    padding-left: max(16px, calc(env(safe-area-inset-left) + 12px));
  }

  .onboarding-question {
    grid-template-columns: minmax(176px, .8fr) minmax(0, 1.2fr);
    column-gap: 18px;
  }

  .onboarding-reveal {
    grid-template-columns: minmax(136px, .52fr) minmax(0, 1.48fr);
    column-gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-progress i,
  .onboarding-option {
    transition: none;
  }

  .onboarding-match-orb i,
  .onboarding-match-status::before,
  .onboarding-voice-answer button.listening i,
  .onboarding-voice-preview.playing i {
    animation: none;
  }
}

.local-backend-status {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(67, 91, 83, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.52);
  color: #66766f;
  font-size: 10px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.local-backend-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #b29d76;
}

.local-backend-status.online::before {
  background: #4ca878;
  box-shadow: 0 0 0 3px rgba(76, 168, 120, 0.12);
}

.local-backend-status.offline::before,
.local-backend-status.degraded::before {
  background: #ba7069;
}

.local-backend-status.connecting::before {
  animation: backend-status-pulse 1s ease-in-out infinite alternate;
}

.phone {
  overscroll-behavior-x: none;
}

@media (max-width: 600px) {
  .phone {
    overflow: clip;
  }
}

@keyframes backend-status-pulse {
  to {
    opacity: 0.35;
    transform: scale(0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .local-backend-status.connecting::before {
    animation: none;
  }
}

/* Server-fixed tarot ritual. The local API chooses; this surface only reveals. */
.tarot-server-page {
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(117, 217, 213, .22), transparent 28%),
    radial-gradient(circle at 86% 0%, rgba(230, 159, 201, .2), transparent 30%),
    linear-gradient(180deg, #f9f5ec 0%, #edf3ee 100%);
}

.tarot-server-page .page-back {
  display: none;
}

.tarot-server-page #pageContent {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tarot-server-shell {
  width: min(100%, 560px);
  min-height: 100%;
  margin: 0 auto;
  padding:
    max(72px, calc(env(safe-area-inset-top) + 58px))
    clamp(18px, 5vw, 28px)
    max(32px, calc(env(safe-area-inset-bottom) + 24px));
  color: #26344b;
}

.tarot-server-shell button,
.tarot-server-shell textarea {
  font: inherit;
}

.tarot-server-back-button {
  position: absolute;
  z-index: 4;
  top: max(18px, calc(env(safe-area-inset-top) + 12px));
  left: max(16px, calc(env(safe-area-inset-left) + 12px));
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 24px rgba(35, 52, 73, .08);
  color: #34435a;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.tarot-server-back-button:active {
  transform: scale(.94);
}

.tarot-server-kicker {
  margin: 0 0 13px;
  color: #64766e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.tarot-server-shell > h1,
.tarot-ritual-prompt {
  max-width: 460px;
  margin: 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(29px, 8vw, 42px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.025em;
}

.tarot-server-lead {
  max-width: 460px;
  margin: 16px 0 23px;
  color: #66756f;
  font-size: 14px;
  line-height: 1.65;
}

.tarot-spread-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.tarot-spread-picker legend {
  width: 100%;
  margin-bottom: 9px;
  color: #4f625b;
  font-size: 12px;
  font-weight: 760;
}

.tarot-spread-option {
  min-width: 0;
  min-height: 156px;
  padding: 16px 13px 14px;
  border: 1px solid rgba(65, 87, 78, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 9px 26px rgba(46, 69, 61, .06);
  color: #33433e;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tarot-spread-option.selected {
  border-color: #587e70;
  background: #fff;
  box-shadow: 0 12px 30px rgba(48, 83, 71, .13);
}

.tarot-spread-option:active {
  transform: scale(.98);
}

.tarot-spread-option strong,
.tarot-spread-option small {
  display: block;
}

.tarot-spread-option strong {
  margin-top: 12px;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 17px;
  font-weight: 600;
}

.tarot-spread-option small {
  margin-top: 5px;
  color: #74817d;
  font-size: 11px;
  line-height: 1.45;
}

.tarot-option-art {
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarot-option-art i {
  width: 34px;
  height: 53px;
  display: block;
  border: 2px solid rgba(255, 255, 255, .75);
  border-radius: 7px;
  background:
    radial-gradient(circle, #f5d78c 0 3px, transparent 4px),
    linear-gradient(145deg, #355d68, #94758f);
  box-shadow: 0 6px 13px rgba(40, 51, 71, .18);
}

.tarot-option-art.three i:nth-child(1) {
  transform: translate(8px, 4px) rotate(-10deg);
}

.tarot-option-art.three i:nth-child(2) {
  z-index: 2;
}

.tarot-option-art.three i:nth-child(3) {
  transform: translate(-8px, 4px) rotate(10deg);
}

.tarot-question-label {
  display: block;
  margin: 0 0 18px;
}

.tarot-question-label > span,
.tarot-question-label > small {
  display: block;
}

.tarot-question-label > span {
  margin-bottom: 8px;
  color: #4c6058;
  font-size: 12px;
  font-weight: 760;
}

.tarot-question-label textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid rgba(61, 84, 75, .16);
  border-radius: 17px;
  outline: none;
  background: rgba(255, 255, 255, .75);
  color: #26344b;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.tarot-question-label textarea:focus {
  border-color: #527d6d;
  box-shadow: 0 0 0 3px rgba(82, 125, 109, .13);
}

.tarot-question-label > small {
  margin-top: 6px;
  color: #7b8782;
  font-size: 10px;
}

.tarot-memory-personalization {
  margin: 0 0 18px;
  padding: 15px;
  border: 1px solid rgba(71, 105, 91, .13);
  border-radius: 19px;
  background: rgba(241, 246, 241, .78);
}

.tarot-memory-personalization > div:first-child > span,
.tarot-memory-personalization > div:first-child > strong,
.tarot-memory-personalization > div:first-child > p {
  display: block;
}

.tarot-memory-personalization > div:first-child > span {
  color: #6f6590;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

.tarot-memory-personalization > div:first-child > strong {
  margin-top: 5px;
  color: #3f554d;
  font-size: 13px;
}

.tarot-memory-personalization > div:first-child > p {
  margin: 5px 0 0;
  color: #75827d;
  font-size: 10px;
  line-height: 1.5;
}

.tarot-memory-personalization > button {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 10px 13px;
  border: 1px solid rgba(62, 91, 79, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  color: #416357;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.tarot-memory-personalization > button:disabled {
  cursor: default;
  opacity: .58;
}

.tarot-memory-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 9px;
  overscroll-behavior: contain;
}

.tarot-memory-options[hidden] {
  display: none;
}

.tarot-memory-options > button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(61, 87, 76, .11);
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  color: #42574f;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}

.tarot-memory-options > button[aria-pressed="true"] {
  border-color: rgba(70, 119, 101, .32);
  background: rgba(220, 239, 230, .92);
}

.tarot-memory-options > button span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.tarot-memory-options > button small,
.tarot-memory-options > button strong {
  display: block;
}

.tarot-memory-options > button small {
  color: #7d8984;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tarot-memory-options > button strong {
  margin-top: 4px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-memory-options > button i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: #e7eee9;
  color: #476a5d;
  font-style: normal;
  font-size: 16px;
}

.tarot-memory-options > button[aria-pressed="true"] i {
  background: #3d6d5d;
  color: #fff;
}

.tarot-memory-empty {
  padding: 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .68);
  color: #74817c;
  font-size: 10px;
  line-height: 1.5;
}

.tarot-memory-status {
  margin: 8px 2px 0;
  color: #76847e;
  font-size: 9px;
  line-height: 1.45;
}

.tarot-choice-actions,
.server-actions {
  display: grid;
  gap: 10px;
}

.tarot-primary-action,
.tarot-secondary-action,
.tarot-context-action,
.tarot-server-error button {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 16px;
  cursor: pointer;
}

.tarot-primary-action {
  border: 0;
  background: #2f5d50;
  box-shadow: 0 10px 23px rgba(47, 93, 80, .2);
  color: #fff;
  font-weight: 760;
}

.tarot-primary-action:disabled,
.tarot-secondary-action:disabled,
.tarot-context-action:disabled {
  cursor: default;
  opacity: .52;
}

.tarot-primary-action.loading {
  position: relative;
  padding-left: 42px;
}

.tarot-primary-action.loading::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tarot-server-spin .8s linear infinite;
}

.tarot-secondary-action,
.tarot-context-action {
  border: 1px solid rgba(66, 87, 79, .14);
  background: rgba(255, 255, 255, .62);
  color: #4b6058;
  font-weight: 700;
}

.tarot-context-action {
  border-color: transparent;
  background: transparent;
  color: #718079;
  font-size: 12px;
}

.tarot-safety-note,
.tarot-fixed-note {
  margin: 15px auto 0;
  color: #79867f;
  font-size: 10px;
  line-height: 1.55;
  text-align: center;
}

.tarot-inline-status {
  margin-top: 12px;
}

.tarot-server-error {
  padding: 13px 14px;
  border: 1px solid rgba(157, 76, 72, .18);
  border-radius: 15px;
  background: rgba(255, 239, 236, .88);
  color: #844d4a;
  font-size: 12px;
  line-height: 1.5;
}

.tarot-server-error strong,
.tarot-server-error span {
  display: block;
}

.tarot-server-error span {
  margin-top: 3px;
}

.tarot-server-error button {
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid rgba(132, 77, 74, .2);
  background: #fff;
  color: inherit;
  font-weight: 740;
}

.tarot-ritual-shell {
  text-align: center;
}

.tarot-ritual-shell .tarot-server-kicker,
.tarot-ritual-shell .tarot-ritual-prompt {
  margin-right: auto;
  margin-left: auto;
}

.tarot-ritual-prompt {
  font-size: clamp(25px, 7vw, 37px);
}

.tarot-question-echo {
  max-width: 420px;
  margin: 13px auto 0;
  color: #74817c;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
}

.tarot-server-deck {
  position: relative;
  width: min(100%, 380px);
  height: 218px;
  margin: 20px auto 9px;
}

.tarot-server-back {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 104px;
  height: 177px;
  padding: 0;
  overflow: hidden;
  transform: translateX(calc(-50% + var(--card-offset))) rotate(var(--card-angle));
  transform-origin: 50% 88%;
  border: 0;
  border-radius: 11px;
  background: #284b58;
  box-shadow: 0 15px 28px rgba(33, 49, 62, .22);
  cursor: pointer;
  transition: transform .24s ease, opacity .24s ease;
}

.tarot-server-back img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tarot-server-back:active {
  transform: translateX(calc(-50% + var(--card-offset))) rotate(var(--card-angle)) translateY(-8px);
}

.tarot-server-back.chosen {
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(-50% + var(--card-offset))) rotate(var(--card-angle)) translateY(-34px);
}

.tarot-server-revealed {
  min-height: 52px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.tarot-server-revealed article {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 150px;
  padding: 5px 8px 5px 5px;
  border: 1px solid rgba(65, 86, 78, .1);
  border-radius: 11px;
  background: rgba(255, 255, 255, .63);
  text-align: left;
}

.tarot-revealed-thumb {
  width: 27px;
  height: 45px;
  flex: none;
  border-radius: 4px;
  object-fit: cover;
}

.tarot-server-revealed span,
.tarot-server-revealed small,
.tarot-server-revealed b {
  display: block;
  min-width: 0;
}

.tarot-server-revealed small {
  color: #75817c;
  font-size: 8px;
  text-transform: uppercase;
}

.tarot-server-revealed b {
  margin-top: 2px;
  overflow: hidden;
  color: #33443e;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-server-progress {
  margin: 12px 0 0;
  color: #5d7169;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

.tarot-server-focus {
  position: absolute;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: end center;
  opacity: 0;
  transition: opacity .22s ease;
}

.tarot-server-focus.visible {
  opacity: 1;
}

.tarot-focus-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 40, .56);
  backdrop-filter: blur(7px);
}

.tarot-focus-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: calc(100dvh - max(22px, env(safe-area-inset-top)));
  padding: 23px 22px max(22px, calc(env(safe-area-inset-bottom) + 16px));
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  background: #fbf7ef;
  color: #2b3b4d;
  text-align: center;
  transform: translateY(20px);
  transition: transform .28s cubic-bezier(.2, .82, .2, 1);
}

.tarot-server-focus.visible .tarot-focus-sheet {
  transform: translateY(0);
}

.tarot-focus-sheet > p {
  margin: 0 0 13px;
  color: #6b7c74;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tarot-focus-image {
  width: min(45vw, 168px);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 11px;
  box-shadow: 0 17px 32px rgba(38, 51, 61, .22);
}

.tarot-focus-sheet h2 {
  margin: 16px 0 4px;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 24px;
  font-weight: 500;
}

.tarot-focus-sheet > span {
  display: block;
  color: #6b7c74;
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.tarot-focus-sheet > small {
  max-width: 380px;
  display: block;
  margin: 11px auto 17px;
  color: #63716c;
  font-size: 13px;
  line-height: 1.55;
}

.tarot-focus-sheet > button {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  background: #2f5d50;
  color: #fff;
  font-weight: 760;
  cursor: pointer;
}

.reversed {
  transform: rotate(180deg);
}

.tarot-result-shell > h1 {
  font-size: clamp(28px, 7.5vw, 39px);
}

.tarot-server-result-list {
  display: grid;
  gap: 12px;
  margin: 23px 0 17px;
}

.tarot-server-result-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(65, 87, 78, .11);
  border-radius: 20px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 9px 25px rgba(43, 66, 58, .06);
}

.tarot-result-image {
  width: 84px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 19px rgba(40, 54, 66, .17);
}

.tarot-server-result-card small {
  color: #6d7f77;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tarot-server-result-card h2 {
  margin: 5px 0 7px;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 500;
}

.tarot-server-result-card p {
  margin: 0;
  color: #68766f;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tarot-server-integration {
  margin: 0 0 17px;
  padding: 17px;
  border: 1px solid rgba(81, 111, 99, .12);
  border-radius: 20px;
  background: rgba(224, 238, 230, .72);
}

.tarot-server-integration > small {
  color: #557166;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.tarot-server-integration > p {
  margin: 9px 0 0;
  color: #4f625b;
  font-size: 13px;
  line-height: 1.6;
}

.tarot-server-integration .tarot-commitment {
  color: #78867f;
  font-size: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tarot-share-overlay {
  position: absolute;
  z-index: 190;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

.tarot-share-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.tarot-share-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(3, 17, 46, .48);
  backdrop-filter: blur(5px);
}

.tarot-share-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 28px;
  background: linear-gradient(160deg, #fbf8f0, #edf3ed);
  box-shadow: 0 28px 70px rgba(5, 23, 55, .32);
  color: #26394a;
  transform: translateY(24px);
  transition: transform .28s cubic-bezier(.2, .84, .2, 1);
}

.tarot-share-overlay.visible .tarot-share-sheet {
  transform: none;
}

.tarot-share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tarot-share-head small {
  color: #52756a;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
}

.tarot-share-head h2 {
  margin: 5px 0 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.tarot-share-head > button {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(39, 56, 72, .08);
  color: #26394a;
  font-size: 24px;
  cursor: pointer;
}

.tarot-share-preview {
  margin: 16px 0 13px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 216, 211, .22), transparent 30%),
    radial-gradient(circle at 86% 82%, rgba(234, 163, 202, .25), transparent 33%),
    linear-gradient(145deg, #071a45, #3c5d76 60%, #756078);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.tarot-share-preview > p {
  margin: 0 0 13px;
  color: rgba(255, 255, 255, .78);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.tarot-share-preview > div {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 9px;
}

.tarot-share-preview > div > span {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.tarot-share-card-image {
  width: min(100%, 92px);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 7px;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .25);
}

.tarot-share-preview b {
  max-width: 100%;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 10px;
}

.tarot-share-preview span small {
  color: rgba(255, 255, 255, .68);
  font-size: 8px;
  line-height: 1.35;
}

.tarot-share-preview blockquote {
  margin: 16px 0 9px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 15px;
  background: rgba(255, 255, 255, .09);
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 12px;
  line-height: 1.6;
}

.tarot-share-preview > small {
  color: rgba(255, 255, 255, .7);
  font-size: 9px;
}

.tarot-share-privacy {
  margin: 0 0 13px;
  color: #65756f;
  font-size: 10px;
  line-height: 1.55;
}

.tarot-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.tarot-share-actions button {
  min-height: 48px;
}

.tarot-share-status {
  min-height: 20px;
  padding-top: 8px;
  color: #597068;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 360px) {
  .tarot-share-sheet {
    padding: 14px;
    border-radius: 23px;
  }

  .tarot-share-head h2 {
    font-size: 19px;
  }

  .tarot-share-preview {
    padding: 14px;
  }

  .tarot-share-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .tarot-share-overlay {
    place-items: center;
  }

  .tarot-share-sheet {
    width: min(92vw, 760px);
    max-height: calc(100dvh - 24px);
  }

  .tarot-share-preview {
    display: grid;
    grid-template-columns: minmax(230px, .8fr) minmax(280px, 1.2fr);
    column-gap: 18px;
  }

  .tarot-share-preview > p,
  .tarot-share-preview > div {
    grid-column: 1;
  }

  .tarot-share-preview blockquote,
  .tarot-share-preview > small {
    grid-column: 2;
  }

  .tarot-share-preview blockquote {
    grid-row: 1 / span 2;
    margin: 0;
  }
}

.tarot-question-ack {
  max-width: 560px;
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(74, 112, 97, .24);
  color: #66756f;
  font-size: 12px;
  line-height: 1.6;
}

.tarot-boundary-panel {
  margin: 16px 0 0;
  padding: 14px 15px;
  border: 1px solid rgba(145, 103, 45, .2);
  border-radius: 17px;
  background: rgba(252, 242, 216, .78);
  color: #6f5a36;
}

.tarot-boundary-panel strong {
  display: block;
  font-size: 12px;
}

.tarot-boundary-panel p {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.tarot-personalization-panel {
  margin: 16px 0;
  padding: 15px;
  border: 1px solid rgba(75, 105, 94, .13);
  border-radius: 19px;
}

.tarot-personalization-panel.neutral {
  background: rgba(244, 246, 242, .78);
  color: #65756e;
}

.tarot-personalization-panel.neutral strong {
  display: block;
  color: #4e625a;
  font-size: 12px;
}

.tarot-personalization-panel.neutral p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.52;
}

.tarot-personalization-panel.used {
  background:
    radial-gradient(circle at 92% 8%, rgba(232, 192, 217, .34), transparent 37%),
    linear-gradient(145deg, rgba(231, 242, 236, .94), rgba(247, 241, 235, .9));
}

.tarot-personalization-panel.used > small {
  color: #71668f;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

.tarot-personalization-panel.used h2 {
  margin: 5px 0 10px;
  color: #3d534b;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 500;
}

.tarot-personalization-panel.used ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarot-personalization-panel.used li {
  padding: 10px 11px;
  border: 1px solid rgba(61, 87, 76, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .68);
}

.tarot-personalization-panel.used li span {
  display: block;
  color: #7b8782;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.tarot-personalization-panel.used li p {
  margin: 4px 0 0;
  color: #4c5f58;
  font-size: 10px;
  line-height: 1.5;
}

.tarot-personalized-reflection {
  margin: 12px 0 0;
  color: #425950;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 13px;
  line-height: 1.64;
}

.tarot-personalization-panel.used em {
  display: block;
  margin-top: 9px;
  color: #77847f;
  font-size: 8.5px;
  font-style: normal;
  line-height: 1.45;
}

.tarot-interpret-section,
.tarot-gentle-action {
  margin: 0 0 14px;
  padding: 16px 17px;
  border: 1px solid rgba(65, 87, 78, .1);
  border-radius: 19px;
  background: rgba(255, 255, 255, .62);
}

.tarot-interpret-section h2 {
  margin: 0 0 8px;
  color: #3f534b;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 500;
}

.tarot-interpret-section ul {
  margin: 0;
  padding-left: 18px;
  color: #65756e;
  font-size: 12px;
  line-height: 1.58;
}

.tarot-interpret-section li + li {
  margin-top: 7px;
}

.tarot-gentle-action {
  background: linear-gradient(145deg, rgba(234, 223, 246, .72), rgba(228, 240, 232, .78));
}

.tarot-gentle-action small {
  color: #68726f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.tarot-gentle-action p {
  margin: 8px 0;
  color: #455951;
  font-size: 13px;
  line-height: 1.6;
}

.tarot-gentle-action strong {
  display: block;
  color: #384c45;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.tarot-interpret-loading-shell,
.tarot-crisis-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
}

.tarot-interpret-loader,
.tarot-interpret-error,
.tarot-crisis-card {
  width: min(100%, 480px);
  padding: 28px 20px;
  text-align: center;
}

.tarot-interpret-loader i {
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto 20px;
  border: 2px solid rgba(71, 100, 88, .16);
  border-top-color: #4c7566;
  border-radius: 50%;
  animation: tarot-server-spin .9s linear infinite;
}

.tarot-interpret-loader h1,
.tarot-interpret-error h1 {
  margin: 8px 0 11px;
  font-size: clamp(27px, 7vw, 38px);
}

.tarot-interpret-loader span,
.tarot-interpret-error > p {
  color: #6c7b75;
  font-size: 13px;
  line-height: 1.6;
}

.tarot-interpret-error .tarot-primary-action {
  margin-top: 22px;
}

.tarot-interpret-error .tarot-secondary-action {
  margin-top: 10px;
}

.tarot-crisis-card {
  padding: 28px 22px;
  border: 1px solid rgba(67, 102, 88, .13);
  border-radius: 26px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 46px rgba(55, 78, 69, .08);
}

.tarot-crisis-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  place-items: center;
  border-radius: 50%;
  background: #e2eee7;
  color: #426a59;
  font-size: 24px;
}

.tarot-crisis-card h1 {
  margin: 8px 0 12px;
  font-size: clamp(29px, 8vw, 40px);
}

.tarot-crisis-card > p,
.tarot-crisis-action p {
  color: #5c6d66;
  font-size: 13px;
  line-height: 1.65;
}

.tarot-crisis-action {
  margin: 20px 0 15px;
  padding: 16px;
  border-radius: 18px;
  background: #edf4f0;
  text-align: left;
}

.tarot-crisis-action strong {
  color: #355448;
  font-size: 12px;
}

.tarot-crisis-action p {
  margin: 6px 0 0;
}

.tarot-crisis-card .tarot-crisis-question {
  color: #354c43;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 16px;
}

.tarot-crisis-card .tarot-primary-action {
  margin-top: 12px;
}

.tarot-crisis-card .tarot-context-detach-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(139, 63, 63, .08);
  color: #7a3f3f;
  font-size: 11px;
}

.tarot-crisis-card .tarot-context-detach-status:empty {
  display: none;
}

.tarot-crisis-card > small {
  display: block;
  margin-top: 14px;
  color: #7a8782;
  font-size: 10px;
  line-height: 1.5;
}

.tarot-history-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.tarot-history-loading,
.tarot-history-empty {
  padding: 28px 18px;
  border: 1px solid rgba(64, 87, 77, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
  color: #697871;
  text-align: center;
}

.tarot-history-loading i {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto 10px;
  border: 2px solid rgba(71, 100, 88, .16);
  border-top-color: #4c7566;
  border-radius: 50%;
  animation: tarot-server-spin .8s linear infinite;
}

.tarot-history-empty h2 {
  margin: 0;
  color: #344740;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 22px;
}

.tarot-history-empty p {
  margin: 8px 0 17px;
  font-size: 12px;
  line-height: 1.55;
}

.tarot-history-item {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px 9px 9px;
  border: 1px solid rgba(63, 85, 76, .11);
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
  color: #32433d;
  text-align: left;
  cursor: pointer;
}

.tarot-history-thumb {
  width: 48px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 5px;
}

.tarot-history-item span,
.tarot-history-item small,
.tarot-history-item strong,
.tarot-history-item em {
  display: block;
  min-width: 0;
}

.tarot-history-item small {
  color: #738079;
  font-size: 9px;
}

.tarot-history-item strong {
  margin: 4px 0;
  overflow: hidden;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-history-item em {
  overflow: hidden;
  color: #7d8984;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-history-item > b {
  color: #7a8982;
  font-size: 22px;
  font-weight: 400;
}

@keyframes tarot-server-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 350px) {
  .tarot-server-shell {
    padding-right: 15px;
    padding-left: 15px;
  }

  .tarot-spread-picker {
    gap: 8px;
  }

  .tarot-spread-option {
    min-height: 148px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .tarot-server-back {
    width: 88px;
    height: 151px;
  }

  .tarot-server-deck {
    height: 186px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .tarot-server-page .page-shell {
    width: 100%;
    max-width: none;
  }

  .tarot-server-page #pageContent {
    width: 100%;
  }

  .tarot-server-shell {
    width: min(100%, 760px);
    padding:
      max(58px, calc(env(safe-area-inset-top) + 50px))
      max(20px, calc(env(safe-area-inset-right) + 16px))
      max(22px, calc(env(safe-area-inset-bottom) + 16px))
      max(20px, calc(env(safe-area-inset-left) + 16px));
  }

  .tarot-choice-shell {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) minmax(270px, 1.15fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 16px;
  }

  .tarot-choice-shell > .tarot-server-kicker,
  .tarot-choice-shell > h1,
  .tarot-choice-shell > .tarot-server-lead {
    grid-column: 1;
  }

  .tarot-choice-shell > .tarot-spread-picker,
  .tarot-choice-shell > .tarot-dedicated-spread,
  .tarot-choice-shell > .tarot-question-label,
  .tarot-choice-shell > .tarot-memory-personalization,
  .tarot-choice-shell > .tarot-choice-actions,
  .tarot-choice-shell > .tarot-safety-note,
  .tarot-choice-shell > .tarot-inline-status {
    grid-column: 2;
  }

  .tarot-choice-shell > .tarot-spread-picker {
    grid-row: 1 / span 3;
  }

  .tarot-choice-shell > .tarot-dedicated-spread {
    grid-row: 1 / span 3;
  }

  .tarot-choice-shell > .tarot-question-label {
    grid-row: 4;
  }

  .tarot-choice-shell > .tarot-memory-personalization {
    grid-row: 5;
  }

  .tarot-choice-shell > .tarot-choice-actions {
    grid-row: 6;
  }

  .tarot-choice-shell > .tarot-safety-note,
  .tarot-choice-shell > .tarot-inline-status {
    grid-row: 7;
  }

  .tarot-server-shell > h1 {
    font-size: clamp(27px, 5vw, 38px);
  }

  .tarot-spread-option {
    min-height: 138px;
  }

  .tarot-question-label textarea {
    min-height: 74px;
  }

  .tarot-ritual-shell {
    min-height: 520px;
  }

  .tarot-server-deck {
    height: 198px;
  }

  .tarot-focus-sheet {
    width: min(500px, 72vw);
    max-height: calc(100dvh - 14px);
    border-radius: 24px 24px 0 0;
  }

  .tarot-focus-image {
    width: 106px;
  }

  .tarot-server-result-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-primary-action.loading::before,
  .tarot-history-loading i,
  .tarot-interpret-loader i {
    animation: none;
  }

  .tarot-server-focus,
  .tarot-focus-sheet,
  .tarot-server-back {
    transition: none;
  }
}

/* Journey: relationship continuity without streaks, guilt, or hidden notification rules. */
.journey-stage-card {
  position: relative;
  min-height: 190px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  overflow: hidden;
  padding: 20px 18px;
  border: 1px solid rgba(74, 112, 101, .14);
  border-radius: 26px;
  background:
    radial-gradient(circle at 11% 8%, rgba(245, 211, 142, .4), transparent 31%),
    radial-gradient(circle at 91% 95%, rgba(119, 210, 194, .33), transparent 40%),
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(229, 238, 231, .88));
  box-shadow: 0 18px 42px rgba(37, 67, 58, .09);
}

.journey-stage-orbit {
  position: relative;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(74, 122, 106, .22);
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d7 0 7%, #95d9c5 24%, #7c70a8 57%, transparent 59%);
  box-shadow: 0 0 35px rgba(105, 185, 164, .22);
}

.journey-stage-orbit::before,
.journey-stage-orbit::after {
  content: "";
  position: absolute;
  inset: -8px 6px;
  border: 1px solid rgba(70, 107, 97, .18);
  border-radius: 50%;
  transform: rotate(32deg);
}

.journey-stage-orbit::after {
  inset: 6px -8px;
  transform: rotate(-26deg);
}

.journey-stage-orbit i {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: translate(39px, -8px);
  border-radius: 50%;
  background: #f0c778;
  box-shadow: 0 0 10px rgba(225, 174, 79, .7);
}

.journey-stage-orbit span {
  color: #fff8db;
  font-size: 22px;
}

.journey-stage-copy {
  min-width: 0;
}

.journey-stage-copy > small {
  color: #668579;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .15em;
}

.journey-stage-copy h2 {
  margin: 7px 0 5px;
  color: #2f4a44;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 23px;
  font-weight: 500;
}

.journey-stage-copy p {
  margin: 0;
  color: #65766f;
  font-size: 11px;
  line-height: 1.52;
}

.journey-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.journey-counts span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(72, 122, 107, .08);
  color: #61766f;
  font-size: 9px;
  white-space: nowrap;
}

.journey-counts b {
  color: #345e52;
  font-size: 11px;
}

.journey-milestones {
  display: grid;
  gap: 8px;
}

.journey-milestone {
  min-height: 72px;
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(45, 64, 61, .1);
  border-radius: 17px;
  background: rgba(255, 255, 255, .58);
  color: #85918d;
}

.journey-milestone > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(83, 111, 103, .18);
  border-radius: 50%;
  color: #8b9692;
  font-size: 15px;
}

.journey-milestone.achieved {
  border-color: rgba(69, 128, 110, .17);
  background: rgba(237, 248, 242, .82);
}

.journey-milestone.achieved > span {
  border-color: transparent;
  background: #d3eddf;
  color: #3f7968;
}

.journey-milestone b,
.journey-milestone small,
.journey-milestone time {
  display: block;
}

.journey-milestone b {
  color: #435b54;
  font-size: 12px;
}

.journey-milestone small {
  margin-top: 3px;
  color: #75847f;
  font-size: 10px;
  line-height: 1.38;
}

.journey-milestone time {
  margin-top: 4px;
  color: #8e9a95;
  font-size: 9px;
}

.journey-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.journey-section-heading > small {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dcebe4;
  color: #527267;
  font-size: 10px;
  font-weight: 800;
}

.journey-follow-up {
  gap: 8px;
  padding: 17px;
  border-color: rgba(88, 113, 158, .16);
  background:
    radial-gradient(circle at 96% 8%, rgba(180, 166, 221, .22), transparent 34%),
    rgba(255, 255, 255, .84);
}

.journey-follow-up-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.journey-follow-up-head span {
  color: #6d6591;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

.journey-follow-up-head time {
  font-size: 9px;
}

.journey-follow-up h3 {
  margin: 3px 0 0;
  color: #384d65;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 500;
}

.journey-follow-up-actions {
  justify-content: flex-start;
}

.journey-follow-up-actions button:first-child {
  border-color: transparent;
  background: #dceee6;
  color: #356456;
}

.journey-settings-panel {
  display: grid;
  gap: 10px;
}

.journey-settings-panel.disabled {
  opacity: .58;
}

.journey-setting-block {
  padding: 15px;
  border: 1px solid rgba(43, 48, 64, .11);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
}

.journey-setting-block > b,
.journey-setting-block > small {
  display: block;
}

.journey-setting-block > b {
  color: #3f5750;
  font-size: 12px;
}

.journey-setting-block > small {
  margin-top: 4px;
  color: #788680;
  font-size: 10px;
  line-height: 1.42;
}

.journey-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 7px;
  align-items: end;
  margin-top: 12px;
}

.journey-time-row label {
  display: grid;
  gap: 4px;
}

.journey-time-row label span {
  color: #7c8984;
  font-size: 9px;
  font-weight: 750;
}

.journey-time-row input,
.journey-time-row button {
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(50, 79, 69, .15);
  border-radius: 13px;
  background: #fff;
  color: #344b44;
  font: inherit;
  font-size: 12px;
}

.journey-time-row input {
  width: 100%;
  padding: 0 8px;
}

.journey-time-row button {
  padding: 0 14px;
  font-weight: 800;
}

.journey-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 11px;
  padding: 4px;
  border-radius: 15px;
  background: #e7ece8;
}

.journey-segmented button {
  min-width: 0;
  min-height: 48px;
  padding: 6px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #687872;
  font-size: 10px;
  font-weight: 800;
}

.journey-segmented button[aria-pressed="true"] {
  background: #fff;
  color: #324d45;
  box-shadow: 0 4px 12px rgba(44, 67, 60, .12);
}

.journey-category-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.journey-category-list button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(46, 72, 64, .1);
  border-radius: 13px;
  background: rgba(242, 246, 243, .78);
  color: #566a63;
  text-align: left;
  font-size: 11px;
}

.journey-category-list button b {
  color: #7a8782;
  font-size: 9px;
}

.journey-category-list button[aria-pressed="true"] {
  border-color: rgba(64, 128, 108, .16);
  background: #e6f3ed;
}

.journey-category-list button[aria-pressed="true"] b {
  color: #3c7766;
}

.journey-completed {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
}

.journey-completed > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  grid-row: 1 / span 3;
  border-radius: 50%;
  background: #dcefe6;
  color: #3e7767;
  font-size: 11px;
}

.journey-completed p {
  margin-top: 4px;
}

@media (max-width: 360px) {
  .journey-stage-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 14px;
  }

  .journey-stage-orbit {
    width: 68px;
    height: 68px;
  }

  .journey-stage-orbit i {
    transform: translate(30px, -6px);
  }

  .journey-stage-copy h2 {
    font-size: 20px;
  }

  .journey-counts {
    gap: 4px;
  }

  .journey-counts span {
    padding: 4px 6px;
    font-size: 8px;
  }

  .journey-time-row {
    grid-template-columns: 1fr 1fr;
  }

  .journey-time-row button {
    grid-column: 1 / -1;
  }

  .journey-follow-up-actions button {
    flex: 1 1 100%;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .journey-evolved-page .page-shell {
    width: min(100%, 760px);
    max-width: 760px;
  }

  .journey-evolved-page .page-content {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .journey-evolved-page .page-content > h1,
  .journey-evolved-page .page-content > .evolved-kicker,
  .journey-evolved-page .page-content > .evolved-intro {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  .journey-stage-card {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .journey-settings-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .journey-setting-block:last-child {
    grid-column: auto;
  }
}

/* v2.0 Authenticated conversation history */
.journal-evolved-page {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
}

.journal-evolved-page .page-shell {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
}

.journal-evolved-page .page-content {
  width: min(100%, 760px);
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.journal-evolved-page .page-back {
  right: max(18px, calc(50% - 380px + 18px));
}

.history-evolved-shell {
  width: 100%;
}

.history-search-panel {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(42, 70, 62, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 16px 36px rgba(36, 62, 55, .05);
}

.history-search-panel > label {
  color: #385e54;
  font-size: 11px;
  font-weight: 800;
}

.history-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.history-search-row input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid rgba(48, 80, 71, .15);
  border-radius: 999px;
  outline: none;
  background: rgba(246, 249, 246, .95);
  color: #293b37;
  font: inherit;
  font-size: 16px;
}

.history-search-row input:focus {
  border-color: #568b7b;
  box-shadow: 0 0 0 3px rgba(86, 139, 123, .14);
}

.history-search-row button,
.history-clear-button,
.history-filter-strip button,
.history-load-more,
.history-back-button,
.history-related-readings button,
.history-delete-link,
.history-delete-confirmation button {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgba(42, 70, 62, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #35564e;
  font-size: 11px;
  font-weight: 800;
}

.history-search-row button {
  padding: 0 18px;
  border-color: #456f63;
  background: #456f63;
  color: #fff;
}

.history-clear-button {
  justify-self: start;
  padding: 0 14px;
  border-color: transparent;
  background: transparent;
  color: #6d7e78;
}

.history-filter-strip {
  display: flex;
  gap: 7px;
  margin: -4px 0 20px;
  padding: 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.history-filter-strip::-webkit-scrollbar {
  display: none;
}

.history-filter-strip button {
  flex: 0 0 auto;
  padding: 0 14px;
}

.history-filter-strip button[aria-pressed="true"] {
  border-color: rgba(68, 120, 103, .2);
  background: #e2f0ea;
  color: #326b5a;
}

.history-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.history-results-heading h2,
.history-related-readings h2 {
  margin: 0;
  color: #344c46;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 500;
}

.history-results-heading span,
.history-detail-meta {
  color: #83908c;
  font-size: 10px;
}

.history-conversation-list {
  display: grid;
  gap: 11px;
}

.history-conversation-card {
  position: relative;
  padding: 9px;
  border: 1px solid rgba(43, 67, 59, .1);
  border-radius: 22px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 15px 34px rgba(37, 63, 56, .06);
}

.history-conversation-open {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #2e4540;
  text-align: left;
}

.history-conversation-open > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.history-conversation-open strong,
.history-conversation-open small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-conversation-open strong {
  color: #2e4540;
  font-size: 13px;
  white-space: nowrap;
}

.history-conversation-open small {
  color: #6d7a76;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

.history-conversation-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85), transparent 26%),
    linear-gradient(145deg, #b4e4d4, #756da2);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.history-conversation-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  padding: 3px 9px 5px 60px;
  color: #86928e;
  font-size: 9px;
}

.history-reading-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: #edf0f8;
  color: #696989;
  font-weight: 800;
}

.history-delete-link {
  margin-left: 52px;
  padding: 0 13px;
  border-color: transparent;
  background: transparent;
  color: #9a5c5c;
}

.history-delete-confirmation {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 14px;
  border: 1px solid rgba(154, 72, 72, .16);
  border-radius: 17px;
  background: rgba(255, 242, 239, .86);
}

.history-delete-confirmation strong {
  color: #7f3f3f;
  font-size: 12px;
}

.history-delete-confirmation p {
  margin: 0;
  color: #7d6762;
  font-size: 11px;
  line-height: 1.55;
}

.history-delete-confirmation > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-delete-confirmation button {
  flex: 1 1 130px;
  padding: 0 14px;
}

.history-delete-confirmation button.danger,
.history-detail-actions button.danger {
  border-color: rgba(157, 70, 70, .2);
  background: #fff0ed;
  color: #8d3e3e;
}

.history-load-more {
  width: 100%;
  margin-top: 12px;
}

.history-primary-actions {
  margin-top: 18px;
}

.history-state {
  min-height: 92px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(43, 67, 59, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
}

.history-state > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e3f1eb;
  color: #437766;
}

.history-state p {
  margin: 0;
  color: #687873;
  font-size: 12px;
}

.history-state button {
  min-width: 48px;
  min-height: 48px;
}

.history-back-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 15px;
  padding: 0 14px;
}

.history-back-button span {
  font-size: 21px;
}

.history-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  margin: 10px 0 18px;
}

.history-related-readings {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(93, 89, 133, .12);
  border-radius: 20px;
  background: rgba(244, 243, 252, .76);
}

.history-related-readings article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.history-related-readings article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dddcef;
  color: #6a668f;
}

.history-related-readings article > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.history-related-readings b {
  color: #4f4d6f;
  font-size: 11px;
}

.history-related-readings small {
  overflow: hidden;
  color: #7b7894;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-related-readings button {
  padding: 0 12px;
}

.history-message-thread {
  display: grid;
  gap: 9px;
}

.history-message {
  max-width: 88%;
  display: grid;
  gap: 7px;
  padding: 13px 14px;
  border-radius: 19px;
}

.history-message.fari {
  justify-self: start;
  border: 1px solid rgba(48, 76, 68, .1);
  border-bottom-left-radius: 7px;
  background: rgba(255, 255, 255, .82);
}

.history-message.user {
  justify-self: end;
  border-bottom-right-radius: 7px;
  background: #47766a;
  color: #fff;
}

.history-message > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.history-message b {
  font-size: 10px;
}

.history-message > div span {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: 8px;
}

.history-message p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.history-message time {
  justify-self: end;
  color: currentColor;
  font-size: 8px;
  opacity: .62;
}

.history-detail-actions {
  margin-top: 18px;
}

@media (max-width: 360px) {
  .history-search-row {
    grid-template-columns: 1fr;
  }

  .history-search-row button {
    width: 100%;
  }

  .history-conversation-open {
    grid-template-columns: 38px minmax(0, 1fr) 12px;
    gap: 9px;
  }

  .history-conversation-icon {
    width: 38px;
    height: 38px;
  }

  .history-conversation-meta {
    padding-left: 55px;
  }

  .history-delete-link {
    margin-left: 47px;
  }

  .history-related-readings article {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .history-related-readings button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .history-message {
    max-width: 94%;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .journal-evolved-page .page-shell {
    width: 100%;
    max-width: none;
  }

  .journal-evolved-page .page-content {
    width: min(100%, 760px);
    max-width: 760px;
  }

  .history-search-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .history-message {
    max-width: 80%;
  }
}

/* v2.1 Rolling summaries, memory conflicts, compression, and model routing */
.memory-system-panel {
  display: grid;
  gap: 12px;
  margin: 18px 0 24px;
  padding: 14px;
  border: 1px solid rgba(53, 84, 75, .1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 4%, rgba(166, 218, 205, .2), transparent 160px),
    rgba(246, 249, 246, .74);
  box-shadow: 0 18px 42px rgba(42, 67, 60, .06);
}

.memory-system-heading,
.memory-conflict-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.memory-system-heading > div,
.memory-conflict-heading > div {
  display: grid;
  gap: 3px;
}

.memory-system-heading small {
  color: #629083;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .16em;
}

.memory-system-heading h2 {
  margin: 0;
  color: #314b44;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 19px;
  font-weight: 500;
}

.memory-system-heading > span,
.memory-conflict-heading > span {
  min-width: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #dceee7;
  color: #417565;
  font-size: 9px;
  font-weight: 850;
}

.memory-summary-card,
.model-route-card,
.local-worker-card,
.compression-audit-card,
.memory-conflict-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(49, 77, 69, .1);
  border-radius: 19px;
  background: rgba(255, 255, 255, .8);
}

.memory-summary-card > div:first-child,
.model-route-card > div:first-child {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.memory-summary-card > div:first-child > span,
.model-route-card > div:first-child > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #d9eee7, #e7e3f2);
  color: #526d68;
  font-family: Georgia, serif;
  font-size: 14px;
}

.memory-summary-card > div:first-child > div,
.model-route-card > div:first-child > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.memory-summary-card b,
.model-route-card b,
.local-worker-card b,
.compression-audit-card b,
.memory-conflict-heading b {
  color: #345249;
  font-size: 11px;
}

.memory-summary-card small,
.model-route-card small,
.local-worker-card small,
.compression-audit-card small,
.memory-conflict-heading small {
  color: #7a8883;
  font-size: 9px;
  line-height: 1.45;
}

.memory-summary-card p,
.model-route-card p,
.local-worker-card p,
.compression-audit-card p {
  margin: 0;
  color: #5d6f69;
  font-size: 11px;
  line-height: 1.55;
}

.memory-summary-card ul,
.compression-audit-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: #687973;
  font-size: 10px;
  line-height: 1.45;
}

.model-route-boundary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.model-route-boundary span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #edf2f0;
  color: #526b64;
  font-size: 8px;
  font-weight: 800;
}

.memory-conflict-list {
  display: grid;
  gap: 9px;
}

.local-worker-title {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.local-worker-title > span:first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e4eee9;
  color: #466b60;
}

.local-worker-title svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.local-worker-title > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.local-worker-title > strong {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef4f1;
  color: #56746c;
  font-size: 9px;
  font-weight: 850;
}

.local-worker-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.local-worker-counts > span {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 9px 4px;
  border-radius: 13px;
  background: #f2f5f3;
  color: #72817c;
  font-size: 8px;
  font-weight: 750;
  text-align: center;
}

.local-worker-counts b {
  color: #385c51;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.local-worker-counts .has-error {
  background: #fff1ed;
  color: #9a5547;
}

.local-worker-counts .has-error b {
  color: #8b4337;
}

.local-worker-card details {
  min-width: 0;
  color: #65756f;
  font-size: 10px;
}

.local-worker-card summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 800;
}

.local-worker-job-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.local-worker-job-list li {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
  padding: 9px;
  border-radius: 13px;
  background: #f7f8f7;
}

.local-worker-job-list li > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.local-worker-job-list li > div small {
  overflow-wrap: anywhere;
}

.local-worker-job-list li > span:last-child {
  color: #7f8d88;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.job-status {
  padding: 4px 6px;
  border-radius: 999px;
  background: #e6eeeb;
  color: #527169;
  font-size: 7px;
  font-weight: 850;
  white-space: nowrap;
}

.job-status.failed {
  background: #fbe6e0;
  color: #8c4438;
}

.job-status.queued,
.job-status.running {
  background: #f5ead7;
  color: #87643c;
}

.job-status.cancelled {
  background: #ececeb;
  color: #707471;
}

.local-worker-card > button {
  width: 100%;
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid rgba(48, 78, 69, .16);
  border-radius: 999px;
  background: #fff;
  color: #3d6559;
  font-size: 10px;
  font-weight: 800;
}

.memory-conflict-card > small {
  color: #987251;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

.memory-conflict-version {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  padding: 10px;
  border-radius: 14px;
  background: #faf7f1;
}

.memory-conflict-version > span {
  grid-row: 1 / span 2;
  align-self: start;
  padding: 4px 6px;
  border-radius: 999px;
  background: #eee4d6;
  color: #805f43;
  font-size: 8px;
  font-weight: 800;
}

.memory-conflict-version p {
  margin: 0;
  color: #594f48;
  font-size: 11px;
  line-height: 1.45;
}

.memory-conflict-version time {
  color: #94857b;
  font-size: 8px;
}

.memory-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.memory-conflict-actions button,
.compression-audit-card > button {
  min-width: 48px;
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid rgba(48, 78, 69, .13);
  border-radius: 999px;
  background: #fff;
  color: #3d6559;
  font-size: 10px;
  font-weight: 800;
}

.memory-conflict-actions button {
  flex: 1 1 138px;
}

.compression-audit-card details {
  color: #65756f;
  font-size: 10px;
}

.compression-audit-card summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 800;
}

.compression-audit-card > button {
  width: 100%;
  border-color: #47776a;
  background: #47776a;
  color: #fff;
}

.memory-system-boundary {
  padding-top: 2px;
  border-top: 1px dashed rgba(47, 77, 68, .13);
}

.memory-version-note {
  margin: -5px 0 10px;
  color: #7d8985;
  font-size: 10px;
  line-height: 1.5;
}

.memory-archived-list .memory-record {
  opacity: .78;
}

.memory-validity {
  color: #88796f;
  font-size: 9px;
}

@media (max-width: 360px) {
  .memory-system-panel {
    margin-right: -2px;
    margin-left: -2px;
    padding: 11px;
  }

  .memory-system-heading {
    align-items: flex-start;
  }

  .memory-system-heading h2 {
    font-size: 17px;
  }

  .memory-conflict-version {
    grid-template-columns: 1fr;
  }

  .memory-conflict-version > span {
    grid-row: auto;
    justify-self: start;
  }

  .local-worker-job-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .local-worker-job-list .job-status {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .memory-evolved-page .page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: max(22px, calc(env(safe-area-inset-right) + 18px));
    padding-left: max(22px, calc(env(safe-area-inset-left) + 18px));
  }

  .memory-evolved-page .page-content {
    width: min(100%, 760px);
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
  }

  .memory-evolved-page .page-back {
    right: max(18px, calc(50% - 380px + 18px));
  }

  .memory-system-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memory-system-heading,
  .memory-conflict-heading,
  .memory-conflict-list {
    grid-column: 1 / -1;
  }

  .compression-audit-card {
    grid-column: 1 / -1;
  }

  .local-worker-card {
    grid-column: 1 / -1;
  }
}

/* v2.9 Tolan-reference state pass.
   The reference informs hierarchy and interaction rhythm; Fari keeps original assets and copy. */
.phone[data-interaction]:not([data-interaction=""]) .top-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.phone[data-interaction]:not([data-interaction=""]) .task-badge {
  display: none;
}

.task-close,
.page-screen .page-back,
.page-screen .quick-back,
#menuDrawer .drawer-close {
  width: 48px;
  height: 48px;
}

.task-close {
  top: 0;
  right: 0;
  font-size: 21px;
}

#menuDrawer .drawer-close {
  display: grid;
  place-items: center;
}

.phone.interaction-text .free-actions,
.phone.interaction-voice .free-actions,
.phone.interaction-call .free-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.phone.interaction-text .angel {
  left: 23%;
  top: max(220px, 27dvh);
}

.phone.interaction-text .angel .sprite {
  animation: none !important;
  transform: translateX(-50%) scale(1.5);
}

.phone.interaction-text .angel-glow {
  opacity: .82;
}

.phone.interaction-text .chat-overlay {
  background: linear-gradient(180deg, rgba(4, 17, 50, .03), rgba(8, 22, 54, .15) 64%, rgba(14, 24, 54, .4));
}

.phone.interaction-text .chat-panel {
  top: max(90px, calc(env(safe-area-inset-top) + 72px));
  right: 0;
  bottom: max(68px, calc(env(safe-area-inset-bottom) + 54px));
  left: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  padding: 16px 18px 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.phone.interaction-text .chat-panel-head {
  min-height: 40px;
  padding-right: 52px;
  text-align: right;
}

.phone.interaction-text .chat-panel-head span {
  color: rgba(255, 255, 255, .95);
}

.phone.interaction-text .chat-panel-head small {
  color: rgba(255, 255, 255, .66);
}

.phone.interaction-text .chat-close,
.phone.interaction-call .chat-close,
.phone.interaction-voice .chat-close {
  position: fixed;
  top: max(18px, calc(env(safe-area-inset-top) + 12px));
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  z-index: 4;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .17);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.phone.interaction-text .chat-thread {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin: 8px 0 12px;
  padding: 58px 2px 10px;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-padding-bottom: 18px;
}

.phone.interaction-text .chat-bubble {
  max-width: min(82%, 560px);
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 20px;
  font-size: clamp(13px, 3.65vw, 15px);
  line-height: 1.48;
  box-shadow: 0 10px 28px rgba(6, 18, 48, .14);
}

.phone.interaction-text .chat-bubble.fari {
  margin-left: min(14%, 76px);
  border-bottom-left-radius: 5px;
  background: rgba(252, 250, 244, .96);
  color: #2f3648;
}

.phone.interaction-text .chat-bubble.user {
  border-bottom-right-radius: 5px;
  background: rgba(220, 239, 248, .96);
  color: #354354;
}

.phone.interaction-text .chat-composer {
  flex: none;
  min-height: 58px;
  padding: 5px 6px 5px 17px;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 36px rgba(6, 18, 48, .22);
}

.phone.interaction-text .chat-composer input {
  min-height: 48px;
  padding: 0;
  font-size: 16px;
}

.phone.interaction-text .chat-composer button {
  flex: none;
  width: 48px;
  height: 48px;
}

.chat-voice-shortcut {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent !important;
  color: #29354b !important;
}

.chat-voice-shortcut svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phone.interaction-call .chat-overlay,
.phone.interaction-voice .chat-overlay {
  background: radial-gradient(circle at 50% 43%, rgba(91, 189, 187, .12), transparent 31%), linear-gradient(180deg, rgba(3, 18, 54, .01), rgba(4, 18, 48, .2));
}

.phone.interaction-text .angel-bubble,
.phone.interaction-call .angel-bubble,
.phone.interaction-voice .angel-bubble {
  display: none;
}

.phone.interaction-call .chat-panel,
.phone.interaction-voice .chat-panel {
  inset: 0;
  display: block;
  width: 100%;
  min-height: 100%;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.phone.interaction-call .chat-panel-head,
.phone.interaction-voice .chat-panel-head {
  position: absolute;
  z-index: 2;
  top: max(82px, calc(env(safe-area-inset-top) + 70px));
  left: 50%;
  width: min(72%, 340px);
  transform: translateX(-50%);
}

.phone.interaction-call .chat-panel-head {
  display: none;
}

.phone.interaction-call .angel,
.phone.interaction-voice .angel {
  top: max(275px, 34dvh);
}

.phone.interaction-call .angel .sprite,
.phone.interaction-voice .angel .sprite {
  animation: none !important;
  transform: translateX(-50%) scale(2.5);
}

.phone.interaction-call .angel-glow,
.phone.interaction-voice .angel-glow {
  width: 250px;
  height: 250px;
  opacity: 1;
}

.phone.interaction-call .angel-particles,
.phone.interaction-voice .angel-particles {
  inset: -120px -145px;
}

.phone.interaction-call .call-controls {
  position: absolute;
  inset: 0;
  display: flex;
  min-height: 100%;
  max-height: none;
  justify-content: flex-end;
  padding: min(53dvh, 450px) max(18px, env(safe-area-inset-right)) max(16px, calc(env(safe-area-inset-bottom) + 10px)) max(18px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
}

.phone.interaction-call .call-orb {
  display: none;
}

.phone.interaction-call .call-controls > strong {
  font-size: 22px;
  text-shadow: 0 2px 14px rgba(3, 18, 54, .38);
}

.phone.interaction-call .call-status {
  min-height: 24px;
  margin-top: 4px;
  color: rgba(255, 255, 255, .86);
  font-size: 11px;
}

.phone.interaction-call .call-live-transcript {
  min-height: 68px;
  max-height: 118px;
  margin-top: 10px;
  overflow-y: auto;
  background: rgba(13, 31, 66, .42);
  backdrop-filter: blur(12px);
}

.phone.interaction-call .call-context-note {
  flex: none;
  min-height: 28px;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(13, 31, 66, .28);
  color: rgba(255, 255, 255, .72);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone.interaction-call .call-actions {
  gap: 8px;
  margin-top: 10px;
}

.phone.interaction-call .call-actions button {
  min-width: 0;
  min-height: 52px;
  font-size: 11px;
  backdrop-filter: blur(10px);
}

.phone.interaction-call .call-actions .call-start {
  box-shadow: 0 8px 24px rgba(3, 18, 54, .2);
}

.phone.interaction-call .call-session-actions {
  margin-top: 8px;
}

.phone.interaction-call .call-session-actions button {
  min-height: 48px;
  backdrop-filter: blur(10px);
}

.phone.interaction-call .call-prototype-boundary {
  margin-top: 6px;
  color: rgba(255, 255, 255, .52);
}

.phone.interaction-voice .voice-controls {
  position: absolute;
  right: 18px;
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 68px));
  left: 18px;
  min-height: 160px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  background: rgba(13, 31, 66, .38);
  backdrop-filter: blur(12px);
}

#menuDrawer .drawer.left {
  width: min(87%, 430px);
  padding: max(76px, calc(env(safe-area-inset-top) + 62px)) 24px max(26px, calc(env(safe-area-inset-bottom) + 20px));
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0 48px 48px 0;
  background: #fbfaf5;
}

#menuDrawer .drawer h2 {
  margin-bottom: 8px;
  font-size: 30px;
}

#menuDrawer .drawer-intro {
  margin-bottom: 28px;
}

#menuDrawer .drawer-link {
  min-height: 58px;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 0;
  font-size: 15px;
}

#menuDrawer .drawer-link::before {
  width: 28px;
  height: 28px;
  flex: none;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#menuDrawer .drawer-link > span:first-child {
  min-width: 0;
  flex: 1;
}

#menuDrawer .drawer-link > span:last-child {
  flex: none;
}

#menuDrawer [data-companion-home]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2e45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 11 8-7 8 7v9H4z'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
}

#menuDrawer [data-evolved-page="memory"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2e45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v17l-6-4-6 4z'/%3E%3Cpath d='M9 8h6M9 11h4'/%3E%3C/svg%3E");
}

#menuDrawer [data-evolved-page="journey"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2e45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-2 5-5 2 2-5z'/%3E%3C/svg%3E");
}

#menuDrawer [data-page="settings"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2e45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 21c.5-5 2.8-7.5 7-7.5S18.5 16 19 21'/%3E%3C/svg%3E");
}

#menuDrawer [data-page="journal"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2e45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v12H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E");
}

#menuDrawer [data-evolved-page="widgets"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2e45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E");
}

#menuDrawer [data-sidebar-settings]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2e45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.86 2.86-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21H9.55v-.1A1.7 1.7 0 0 0 8.5 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.86-2.86.06-.06A1.7 1.7 0 0 0 4.1 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H2.3V9.55h.1A1.7 1.7 0 0 0 4.1 8.5a1.7 1.7 0 0 0-.34-1.88l-.06-.06L6.56 3.7l.06.06A1.7 1.7 0 0 0 8.5 4.1a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V2.3h4.05v.1A1.7 1.7 0 0 0 15 4.1a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.86 2.86-.06.06A1.7 1.7 0 0 0 19.4 8.5a1.7 1.7 0 0 0 .6 1 1.7 1.7 0 0 0 1.1.4h.1v4.05h-.1A1.7 1.7 0 0 0 19.4 15Z'/%3E%3C/svg%3E");
}

#menuDrawer .drawer-secondary,
#menuDrawer .drawer-preferences {
  margin-top: 14px;
  padding-top: 15px;
  border-top: 1px solid rgba(43, 48, 64, .1);
}

#menuDrawer .drawer-preferences > small {
  display: block;
  margin-bottom: 3px;
  color: #82908b;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .17em;
}

#menuDrawer .drawer-preferences .drawer-link {
  min-height: 52px;
  font-size: 13px;
}

.drawer-language-setting {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawer-language-setting > span {
  color: #56645f;
  font-size: 12px;
  font-weight: 720;
}

.drawer-language-setting .language-options {
  flex: none;
}

.drawer-language-setting .language-options button {
  min-width: 62px;
  min-height: 44px;
  touch-action: manipulation;
}

.drawer-language-setting .language-options button:focus-visible,
#menuDrawer [data-sidebar-settings]:focus-visible {
  outline: 3px solid rgba(52, 131, 157, .42);
  outline-offset: 2px;
}

#menuDrawer .drawer-note {
  position: static;
  margin-top: 22px;
  padding-top: 18px;
}

@media (max-width: 360px) {
  .drawer-language-setting {
    align-items: stretch;
    flex-direction: column;
    padding: 8px 0;
  }

  .drawer-language-setting .language-options {
    width: 100%;
  }

  .drawer-language-setting .language-options button {
    flex: 1;
  }
}

@media (max-width: 360px) {
  .phone.interaction-text .chat-panel {
    padding-right: 12px;
    padding-left: 12px;
  }

  .phone.interaction-text .chat-thread {
    padding-top: 32px;
  }

  .phone.interaction-text .chat-bubble {
    max-width: 88%;
  }

  .phone.interaction-text .chat-bubble.fari {
    margin-left: 8%;
  }

  .phone.interaction-call .call-controls {
    padding-right: 12px;
    padding-left: 12px;
  }

  .phone.interaction-call .call-actions {
    gap: 6px;
  }

}

@media (max-height: 700px) and (orientation: portrait) {
  .phone.interaction-text .angel {
    top: 24dvh;
  }

  .phone.interaction-text .angel .sprite {
    transform: translateX(-50%) scale(1.25);
  }

  .phone.interaction-text .chat-thread {
    padding-top: 18px;
  }

  .phone.interaction-call .angel,
  .phone.interaction-voice .angel {
    top: max(180px, 31dvh);
  }

  .phone.interaction-call .angel .sprite,
  .phone.interaction-voice .angel .sprite {
    transform: translateX(-50%) scale(1.85);
  }

  .phone.interaction-call .call-controls {
    padding-top: 60dvh;
  }

  .phone.interaction-call .call-context-note {
    display: block;
    margin-top: 6px;
  }

  .phone.interaction-call .call-prototype-boundary {
    display: none;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .phone.interaction-text .angel,
  .phone.interaction-call .angel,
  .phone.interaction-voice .angel {
    left: 24%;
    top: 25%;
  }

  .phone.interaction-text .angel .sprite,
  .phone.interaction-call .angel .sprite,
  .phone.interaction-voice .angel .sprite {
    transform: translateX(-50%) scale(1.55);
  }

  .phone.interaction-text .chat-panel {
    top: max(10px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 42%;
    padding-top: 8px;
  }

  .phone.interaction-text .chat-panel-head {
    min-height: 26px;
  }

  .phone.interaction-text .chat-thread {
    padding-top: 0;
  }

  .phone.interaction-text .chat-bubble.fari {
    margin-left: 0;
  }

  .phone.interaction-call .call-controls {
    right: max(12px, env(safe-area-inset-right));
    left: 45%;
    min-height: 100%;
    padding: max(52px, calc(env(safe-area-inset-top) + 42px)) 0 max(8px, env(safe-area-inset-bottom));
  }

  .phone.interaction-call .call-live-transcript {
    min-height: 54px;
    margin-top: 5px;
  }

  .phone.interaction-call .call-actions,
  .phone.interaction-call .call-session-actions {
    margin-top: 5px;
  }

  #menuDrawer .drawer.left {
    border-radius: 0 36px 36px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone[data-interaction]:not([data-interaction=""]) .angel .sprite {
    animation: none !important;
  }

}

/* Cross-device touch floor for top-level actions on iOS and Android. */
.top-actions .icon-btn {
  min-width: 48px;
  min-height: 48px;
}

.task-card .play {
  min-width: 48px;
  min-height: 48px;
}

.pages {
  gap: 0;
}

.pages button,
.pages button.active {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 -2px;
  border: 0;
  background: transparent;
  transition: none;
}

.pages button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 99px;
  background: transparent;
  transition: width 0.3s, background 0.3s;
}

.pages button.active::after {
  width: 22px;
  background: #fff;
}

/* Maintained, region-selected crisis resource directory. */
.safety-resource-directory {
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid rgba(46, 70, 66, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 26px rgba(35, 49, 67, 0.06);
}

.safety-resource-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.safety-resource-heading b,
.safety-resource-heading small {
  display: block;
}

.safety-resource-heading b {
  color: #26364c;
  font-size: 14px;
}

.safety-resource-heading small {
  margin-top: 5px;
  color: #6d7c76;
  font-size: 11px;
  line-height: 1.5;
}

.safety-resource-heading > span {
  min-width: 44px;
  padding: 7px 8px;
  border-radius: 12px;
  background: #f8dedb;
  color: #9b4d4d;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.safety-region-picker {
  display: grid;
  gap: 7px;
  margin-top: 15px;
}

.safety-region-picker > span {
  color: #53655f;
  font-size: 11px;
  font-weight: 750;
}

.safety-region-picker select {
  width: 100%;
  min-height: 48px;
  padding: 0 42px 0 13px;
  border: 1px solid rgba(47, 70, 65, 0.17);
  border-radius: 13px;
  background: #f9fbf8;
  color: #27384d;
  font: inherit;
  font-size: 13px;
}

.safety-resource-state {
  min-height: 52px;
  margin-top: 13px;
  padding: 14px;
  border-radius: 13px;
  background: #edf3ef;
  color: #5c6f67;
  font-size: 12px;
  line-height: 1.5;
}

.safety-resource-state.error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fae8e5;
  color: #864847;
}

.safety-resource-state button {
  min-width: 72px;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #7d4848;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}

.safety-resource-card {
  margin-top: 13px;
  padding: 15px;
  border: 1px solid rgba(62, 100, 86, 0.16);
  border-radius: 15px;
  background: linear-gradient(155deg, #f4faf6, #fffaf4);
}

.safety-resource-card b,
.safety-resource-card small,
.safety-resource-card p {
  display: block;
}

.safety-resource-card b {
  color: #28443d;
  font-size: 14px;
}

.safety-resource-card small {
  margin-top: 4px;
  color: #4e7b6e;
  font-size: 10px;
  font-weight: 750;
}

.safety-resource-card p {
  margin: 8px 0 0;
  color: #64746e;
  font-size: 11px;
  line-height: 1.5;
}

.safety-resource-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.safety-resource-actions a {
  min-height: 48px;
  padding: 8px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #335f56;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.safety-resource-actions a:nth-child(n + 2) {
  background: #e6efea;
  color: #335f56;
}

.safety-resource-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(62, 100, 86, 0.12);
  color: #7b8883;
  font-size: 9px;
}

.safety-resource-card footer a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  color: #496f65;
  font-weight: 750;
}

.safety-resource-fallback {
  margin-top: 13px;
  padding: 14px;
  border-radius: 14px;
  background: #f8efdf;
  color: #6f5838;
}

.safety-resource-fallback.review_required,
.safety-resource-fallback.unsupported_region {
  background: #fae8e5;
  color: #774b49;
}

.safety-resource-fallback b,
.safety-resource-fallback strong {
  display: block;
  font-size: 12px;
}

.safety-resource-fallback p {
  margin: 7px 0;
  font-size: 11px;
  line-height: 1.5;
}

.safety-resource-fallback strong {
  line-height: 1.5;
}

.safety-resource-boundary {
  display: block;
  margin-top: 10px;
  color: #84908b;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 360px) {
  .safety-resource-actions {
    grid-template-columns: 1fr;
  }
}

/* v2.11 Launch / Update and Companion continuity */
.launch-experience {
  position: absolute;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding:
    max(28px, calc(env(safe-area-inset-top) + 20px))
    24px
    max(28px, calc(env(safe-area-inset-bottom) + 20px));
  background:
    radial-gradient(circle at 50% 42%, rgba(123, 218, 207, 0.18), transparent 24%),
    radial-gradient(circle at 18% 22%, rgba(118, 143, 225, 0.22), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(218, 144, 198, 0.16), transparent 31%),
    linear-gradient(180deg, #06183f 0%, #0a376b 52%, #574f72 100%);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.launch-experience.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.launch-experience.leaving {
  opacity: 0;
}

.launch-atmosphere,
.launch-atmosphere i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.launch-atmosphere::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(86vw, 340px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(211, 238, 231, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgba(145, 203, 202, 0.035),
    0 0 0 88px rgba(158, 149, 205, 0.025);
}

.launch-atmosphere i {
  background-image:
    radial-gradient(circle at 12% 17%, rgba(255, 255, 255, 0.82) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 31%, rgba(247, 216, 147, 0.78) 0 1px, transparent 1.6px),
    radial-gradient(circle at 41% 72%, rgba(132, 224, 216, 0.75) 0 1px, transparent 1.6px);
  background-size: 121px 139px, 173px 157px, 147px 181px;
  opacity: 0.42;
  animation: launch-stars 12s linear infinite;
}

.launch-atmosphere i:nth-child(2) {
  transform: scale(1.25) rotate(12deg);
  opacity: 0.2;
  animation-duration: 18s;
}

.launch-atmosphere i:nth-child(3) {
  transform: scale(0.78) rotate(-8deg);
  opacity: 0.28;
  animation-duration: 9s;
}

.launch-content {
  position: relative;
  width: min(100%, 330px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.launch-mark {
  position: relative;
  width: 92px;
  height: 92px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06));
  box-shadow:
    0 24px 54px rgba(2, 16, 51, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.launch-mark::before,
.launch-mark::after,
.launch-mark span {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.launch-mark::before {
  width: 48px;
  height: 54px;
  background:
    radial-gradient(circle at 38% 30%, #dcf8ef 0 4%, #89cfb9 34%, #3e8f77 72%);
  box-shadow: 0 0 26px rgba(135, 224, 204, 0.46);
}

.launch-mark::after {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, #fffbd8 0 18%, #efc86e 45%, transparent 68%);
  box-shadow: 0 0 17px rgba(244, 210, 123, 0.72);
}

.launch-mark span {
  width: 70px;
  height: 70px;
  border: 1px solid rgba(242, 211, 141, 0.32);
  animation: launch-orbit 2.8s ease-in-out infinite;
}

.launch-kicker {
  margin: 0;
  color: #aee2d5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.19em;
}

.launch-content h1 {
  margin: 14px 0 10px;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(25px, 7.4vw, 32px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.launch-content > p:not(.launch-kicker, .launch-detail) {
  max-width: 290px;
  margin: 0;
  color: rgba(242, 247, 246, 0.78);
  font-size: 14px;
  line-height: 1.55;
}

.launch-progress {
  width: min(100%, 276px);
  height: 8px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 2px rgba(1, 13, 39, 0.25);
}

.launch-progress i {
  display: block;
  width: var(--launch-progress, 8%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7dd8cc, #f0cf7f);
  box-shadow: 0 0 14px rgba(125, 216, 204, 0.48);
  transition: width 260ms ease;
}

.launch-detail {
  min-height: 36px;
  margin: 12px 0 0;
  color: rgba(225, 237, 235, 0.67);
  font-size: 11px;
  line-height: 1.5;
}

.launch-actions {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.launch-actions[hidden] {
  display: none;
}

.launch-actions button {
  min-height: 52px;
  padding: 12px 18px;
  border: 0;
  border-radius: 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}

.launch-primary {
  background: #fff;
  color: #26314a;
  box-shadow: 0 12px 30px rgba(4, 16, 48, 0.2);
}

.launch-secondary {
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.launch-boundary {
  margin-top: 22px;
  color: rgba(221, 234, 232, 0.5);
  font-size: 9px;
  line-height: 1.45;
}

.launch-experience[data-mode="offline"],
.launch-experience[data-mode="maintenance"] {
  background:
    radial-gradient(circle at 50% 40%, rgba(132, 183, 182, 0.12), transparent 27%),
    linear-gradient(180deg, #111c39 0%, #26344f 58%, #4f4d62 100%);
}

.launch-experience[data-mode="update_required"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(243, 201, 121, 0.16), transparent 28%),
    linear-gradient(180deg, #151b3a 0%, #3e385d 60%, #6a536b 100%);
}

.task-card.task-proactive {
  border-style: dashed;
  color: #292a42;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.95), transparent 30%),
    radial-gradient(circle at 76% 70%, rgba(221, 218, 202, 0.35), transparent 29%),
    #f8f6ed;
}

.task-card.task-recent {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 215, 151, 0.65), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(112, 197, 184, 0.55), transparent 36%),
    linear-gradient(145deg, #385d68, #9f8b80 55%, #e2b57e);
}

/* v2.14: one-card and three-card readings are separate home cards and routes. */
.task-badge::before {
  content: none;
}

.task-badge {
  font-size: 13px;
}

.task-card.task-tarot-single {
  color: #fff;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 232, 164, 0.62), transparent 28%),
    radial-gradient(circle at 82% 80%, rgba(126, 218, 196, 0.38), transparent 34%),
    linear-gradient(145deg, #526a82, #a9799f 56%, #e4ad80);
}

.task-card.task-tarot-three {
  color: #fff;
  background:
    radial-gradient(circle at 74% 20%, rgba(249, 216, 147, 0.42), transparent 24%),
    radial-gradient(circle at 16% 76%, rgba(126, 108, 207, 0.52), transparent 34%),
    linear-gradient(145deg, #22234f, #665189 56%, #b97994);
}

.tarot-home-spread-mark {
  position: absolute;
  left: 17px;
  top: 14px;
  width: 40px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tarot-home-spread-mark i {
  width: 15px;
  height: 24px;
  display: block;
  border: 0;
  border-radius: 4px;
  background: url("./assets/tarot/card_back.png") center / cover no-repeat;
  box-shadow: 0 4px 10px rgba(14, 18, 48, 0.2);
}

.tarot-home-spread-mark.single {
  left: 18px;
  top: 54px;
  width: 46px;
  height: 79px;
}

.tarot-home-spread-mark.single i {
  width: 46px;
  height: 79px;
  border-radius: 6px;
  box-shadow:
    0 10px 20px rgba(14, 18, 48, 0.3),
    0 0 18px rgba(255, 232, 171, 0.18);
}

.tarot-home-spread-mark.three i:nth-child(1) {
  transform: translateX(5px) rotate(-10deg);
}

.tarot-home-spread-mark.three i:nth-child(2) {
  z-index: 2;
}

.tarot-home-spread-mark.three i:nth-child(3) {
  transform: translateX(-5px) rotate(10deg);
}

.task-tarot-single .play::after {
  content: "Draw one card" !important;
}

.task-tarot-three .play::after {
  content: "Draw three cards" !important;
}

html[lang="zh"] .task-tarot-single .play::after {
  content: "抽一张牌" !important;
}

html[lang="zh"] .task-tarot-three .play::after {
  content: "抽三张牌" !important;
}

.tarot-dedicated-spread {
  min-height: 126px;
  margin: 0 0 20px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(65, 87, 78, 0.13);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(48, 83, 71, 0.1);
  color: #33433e;
}

.tarot-dedicated-spread[data-entry-spread="three_card"] {
  background:
    radial-gradient(circle at 86% 18%, rgba(246, 218, 157, 0.22), transparent 34%),
    rgba(255, 255, 255, 0.78);
}

.tarot-dedicated-spread .tarot-option-art {
  width: 76px;
}

.tarot-dedicated-spread strong,
.tarot-dedicated-spread small {
  display: block;
}

.tarot-skip-ritual {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(65, 87, 78, 0.13);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.58);
  color: #52645e;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.tarot-skip-ritual:active {
  transform: scale(0.98);
}

.tarot-skip-ritual:disabled {
  cursor: default;
  opacity: 0.58;
}

.tarot-dedicated-spread strong {
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.tarot-dedicated-spread small {
  margin-top: 7px;
  color: #6f7d78;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 359px) {
  .pages {
    width: calc(100% - 16px);
    justify-content: center;
  }

  .pages button,
  .pages button.active {
    width: 38px;
    height: 48px;
    margin: 0;
  }

  .tarot-dedicated-spread {
    grid-template-columns: 66px minmax(0, 1fr);
    padding-right: 14px;
    padding-left: 14px;
  }

  .tarot-dedicated-spread .tarot-option-art {
    width: 66px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .tarot-choice-shell > .tarot-dedicated-spread {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-height: 118px;
    margin-bottom: 10px;
  }

  .tarot-ritual-shell .tarot-skip-ritual {
    width: min(100%, 360px);
    margin-right: auto;
    margin-left: auto;
  }
}

.task-card .home-card-meta {
  max-width: 276px;
  max-height: 27px;
  margin: 4px auto 0;
  display: -webkit-box;
  overflow: hidden;
  color: currentColor;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0;
  opacity: 0.72;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-card.has-home-continuity .line {
  margin: 6px auto 8px !important;
}

.task-card.has-home-continuity h1 {
  min-height: 40px;
  font-size: 16px !important;
  line-height: 1.25 !important;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-card.has-home-continuity .play {
  min-height: 48px;
  margin-top: 6px !important;
}

.task-card.has-home-continuity .play::after {
  content: attr(data-home-label) !important;
}

.task-card[data-home-state="loading"] .play {
  cursor: progress;
  opacity: 0.68;
}

.task-card[data-home-state="error"] {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 246, 197, 0.52), transparent 38%),
    radial-gradient(circle at 84% 78%, rgba(112, 203, 206, 0.33), transparent 42%),
    linear-gradient(145deg, #575181, #957aa0 58%, #c6958f);
}

.task-card[data-home-state="error"] .play {
  box-shadow:
    0 0 0 9px rgba(255, 255, 255, 0.1),
    0 12px 26px rgba(35, 28, 64, 0.2);
}

@keyframes launch-stars {
  to {
    background-position: 14px -139px, -18px -157px, 11px -181px;
  }
}

@keyframes launch-orbit {
  50% {
    transform: translate(-50%, -50%) scale(1.09) rotate(10deg);
    opacity: 0.62;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .task-card.has-home-continuity {
    padding: 10px 12px 8px !important;
  }

  .task-card.has-home-continuity > span {
    line-height: 1.2;
  }

  .task-card.has-home-continuity .line {
    margin: 3px auto 5px !important;
  }

  .task-card.has-home-continuity h1 {
    min-height: 32px;
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  .task-card.has-home-continuity .home-card-meta {
    max-height: 20px;
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.2;
  }

  .task-card.has-home-continuity .play {
    width: 132px !important;
    height: 50px !important;
    min-height: 50px;
    margin-top: 4px !important;
  }

  .pages {
    left: max(58px, calc(env(safe-area-inset-left) + 52px));
    width: min(52vw, 340px);
    padding: 0;
    justify-content: flex-start;
    transform: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .pages::-webkit-scrollbar {
    display: none;
  }

  .free-actions {
    left: max(64vw, calc(env(safe-area-inset-left) + 310px));
    right: max(12px, calc(env(safe-area-inset-right) + 8px));
  }

  .launch-experience {
    padding: 18px max(22px, env(safe-area-inset-right)) 18px max(22px, env(safe-area-inset-left));
  }

  .launch-content {
    width: min(86vw, 640px);
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr);
    grid-template-areas:
      "mark kicker"
      "mark title"
      "mark description"
      "mark progress"
      "mark detail"
      "mark actions"
      "boundary boundary";
    column-gap: 24px;
    text-align: left;
  }

  .launch-mark {
    grid-area: mark;
    margin: 0;
  }

  .launch-kicker {
    grid-area: kicker;
  }

  .launch-content h1 {
    grid-area: title;
    margin: 5px 0 3px;
    font-size: 24px;
  }

  .launch-content > p:not(.launch-kicker, .launch-detail) {
    grid-area: description;
    max-width: none;
    font-size: 12px;
  }

  .launch-progress {
    grid-area: progress;
    width: 100%;
    margin-top: 12px;
  }

  .launch-detail {
    grid-area: detail;
    min-height: 0;
    margin-top: 7px;
  }

  .launch-actions {
    grid-area: actions;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
  }

  .launch-boundary {
    grid-area: boundary;
    margin-top: 12px;
    text-align: center;
  }
}

@media (max-width: 340px) {
  .launch-experience {
    padding-right: 18px;
    padding-left: 18px;
  }

  .launch-mark {
    width: 78px;
    height: 78px;
    margin-bottom: 22px;
    border-radius: 28px;
  }

  .launch-content h1 {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .launch-atmosphere i,
  .launch-mark span {
    animation: none !important;
  }

  .launch-experience,
  .launch-progress i {
    transition-duration: 1ms !important;
  }
}

/* v2.18 — immersive, server-fixed tarot ritual */
.tarot-server-page.tarot-ritual-page {
  background:
    radial-gradient(circle at 50% 34%, rgba(115, 179, 159, 0.2), transparent 29%),
    radial-gradient(circle at 12% 8%, rgba(111, 119, 221, 0.25), transparent 31%),
    radial-gradient(circle at 88% 4%, rgba(224, 151, 178, 0.2), transparent 28%),
    linear-gradient(160deg, #081027 0%, #111a39 48%, #132f38 100%);
}

.tarot-ritual-page #pageContent {
  overflow-y: auto;
  scrollbar-color: rgba(246, 225, 168, 0.3) transparent;
}

.tarot-ritual-page .tarot-server-back-button {
  position: fixed;
  border: 1px solid rgba(255, 247, 223, 0.16);
  background: rgba(14, 23, 50, 0.62);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  color: #fff7df;
  backdrop-filter: blur(16px);
}

.tarot-ritual-shell {
  position: relative;
  isolation: isolate;
  width: min(100%, 820px);
  min-height: 100%;
  padding-top: max(62px, calc(env(safe-area-inset-top) + 52px));
  padding-right: max(14px, env(safe-area-inset-right));
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  padding-left: max(14px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff8e5;
  text-align: center;
}

.tarot-ritual-atmosphere,
.tarot-ritual-atmosphere::before,
.tarot-ritual-atmosphere::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tarot-ritual-atmosphere {
  z-index: -2;
  overflow: hidden;
}

.tarot-ritual-atmosphere::before {
  content: "";
  inset: 15% 8% auto;
  height: min(52vw, 390px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 148, 0.16), rgba(108, 194, 176, 0.06) 42%, transparent 68%);
  filter: blur(6px);
  animation: tarot-ritual-breathe 5.8s ease-in-out infinite alternate;
}

.tarot-ritual-atmosphere::after {
  content: "";
  background-image:
    radial-gradient(circle, rgba(255, 244, 207, 0.84) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(162, 221, 213, 0.62) 0 1px, transparent 1.5px);
  background-position: 8% 12%, 89% 23%;
  background-size: 79px 97px, 113px 131px;
  opacity: 0.36;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.tarot-ritual-atmosphere i {
  position: absolute;
  border: 1px solid rgba(230, 245, 225, 0.11);
  border-radius: 50%;
}

.tarot-ritual-atmosphere i:nth-child(1) {
  width: 320px;
  height: 320px;
  left: calc(50% - 160px);
  top: 19%;
}

.tarot-ritual-atmosphere i:nth-child(2) {
  width: 238px;
  height: 238px;
  left: calc(50% - 119px);
  top: calc(19% + 41px);
}

.tarot-ritual-atmosphere i:nth-child(3) {
  width: 9px;
  height: 9px;
  left: calc(50% - 4px);
  top: calc(19% + 155px);
  border: 0;
  background: #f5dda2;
  box-shadow: 0 0 12px #f5dda2, 0 0 34px rgba(245, 221, 162, 0.7);
}

.tarot-ritual-header {
  position: relative;
  z-index: 3;
  width: min(100%, 650px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  text-align: left;
}

.tarot-ritual-shell .tarot-server-kicker {
  margin: 0 0 8px;
  color: rgba(216, 239, 222, 0.72);
}

.tarot-ritual-shell .tarot-ritual-prompt {
  max-width: 520px;
  margin: 0;
  color: #fff8e5;
  font-size: clamp(25px, 6.8vw, 40px);
  text-wrap: balance;
  text-shadow: 0 8px 30px rgba(2, 8, 24, 0.34);
}

.tarot-sensory-panel {
  max-width: 188px;
  display: grid;
  gap: 5px;
  justify-items: end;
}

.tarot-sensory-controls {
  display: flex;
  gap: 6px;
}

.tarot-sensory-toggle {
  min-width: 48px;
  min-height: 48px;
  padding: 6px 9px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 1px solid rgba(255, 247, 223, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 247, 223, 0.82);
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.tarot-sensory-toggle span {
  font-size: 17px;
  line-height: 1;
}

.tarot-sensory-toggle b {
  font-size: 8px;
  font-weight: 760;
  white-space: nowrap;
}

.tarot-sensory-toggle[aria-pressed="true"] {
  border-color: rgba(247, 220, 151, 0.44);
  background: rgba(247, 220, 151, 0.13);
  color: #ffe5a8;
}

.tarot-sensory-toggle[aria-disabled="true"] {
  border-style: dashed;
  cursor: help;
  opacity: 0.7;
}

.tarot-sensory-status {
  max-width: 188px;
  margin: 0;
  color: rgba(228, 240, 232, 0.62);
  font-size: 8px;
  line-height: 1.25;
  text-align: right;
  text-wrap: balance;
}

.tarot-ritual-shell > .tarot-question-echo {
  position: relative;
  z-index: 2;
  margin-top: 9px;
  margin-bottom: 0;
  color: rgba(228, 240, 232, 0.62);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tarot-ritual-stage {
  position: relative;
  left: 50%;
  z-index: 1;
  flex: 1 0 390px;
  width: min(calc(100% + 28px), 760px);
  min-height: 390px;
  max-height: 480px;
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 0;
}

.tarot-ritual-orbit {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(84vw, 510px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scaleY(0.38);
  border: 1px solid rgba(230, 245, 225, 0.15);
  border-radius: 50%;
  box-shadow:
    0 0 40px rgba(117, 217, 213, 0.08),
    inset 0 0 32px rgba(247, 220, 151, 0.06);
}

.tarot-shuffle-stack {
  position: absolute;
  z-index: 80;
  inset: 22px 0 auto;
  height: 214px;
  pointer-events: none;
}

.tarot-shuffle-card {
  position: absolute;
  left: 50%;
  top: 22px;
  width: clamp(88px, 25vw, 112px);
  aspect-ratio: 104 / 177;
  overflow: hidden;
  transform:
    translateX(calc(-50% + var(--stack-x)))
    translateY(var(--stack-y))
    rotate(var(--stack-r));
  border-radius: 11px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  opacity: 1;
  transition:
    transform 780ms cubic-bezier(0.65, 0, 0.35, 1) var(--scatter-delay),
    opacity 180ms ease;
}

.tarot-shuffle-card img,
.tarot-fan-card img,
.tarot-flight-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tarot-ritual-shell[data-ritual-phase="scattering"] .tarot-shuffle-card {
  transform:
    translateX(calc(-50% + var(--stack-x) + var(--scatter-x)))
    translateY(calc(var(--stack-y) + var(--scatter-y)))
    rotate(var(--scatter-r));
}

.tarot-ritual-shell[data-ritual-phase="gathering"] .tarot-shuffle-card {
  transform:
    translateX(calc(-50% + var(--stack-x)))
    translateY(var(--stack-y))
    rotate(var(--stack-r));
  transition-duration: 420ms;
  transition-delay: 0ms;
  transition-timing-function: cubic-bezier(0.2, 1.35, 0.45, 1);
}

.tarot-ritual-shell[data-ritual-phase="fanning"] .tarot-shuffle-card,
.tarot-ritual-shell[data-ritual-phase="interactive"] .tarot-shuffle-card,
.tarot-ritual-shell[data-ritual-phase="selecting"] .tarot-shuffle-card {
  opacity: 0;
}

.tarot-fan-viewport {
  --fan-card-top: 7px;
  --fan-pivot-y: 286px;
  position: absolute;
  z-index: 90;
  inset: 0 0 58px;
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.tarot-fan-viewport.dragging {
  cursor: grabbing;
}

.tarot-fan-cards {
  position: absolute;
  inset: 0;
}

.tarot-fan-instruction {
  position: absolute;
  z-index: 720;
  right: 50%;
  bottom: 12px;
  min-width: 210px;
  min-height: 52px;
  padding: 8px 16px 8px 44px;
  display: grid;
  align-content: center;
  gap: 1px;
  transform: translateX(50%);
  border: 1px solid rgba(255, 232, 176, 0.4);
  border-radius: 18px;
  background: rgba(5, 13, 31, 0.82);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(248, 222, 157, 0.09);
  color: #fff2cf;
  text-align: left;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.tarot-fan-instruction > span {
  position: absolute;
  left: 17px;
  top: 50%;
  width: 17px;
  height: 22px;
  transform: translateY(-50%);
  border: 2px solid #ffe2a0;
  border-radius: 5px;
  box-shadow: 5px -4px 0 -3px rgba(255, 226, 160, 0.82);
}

.tarot-fan-instruction > span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 3px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffe2a0;
}

.tarot-fan-instruction strong {
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 13px;
  line-height: 1.15;
}

.tarot-fan-instruction small {
  color: rgba(226, 239, 230, 0.7);
  font-size: 9px;
  line-height: 1.2;
}

.tarot-fan-card {
  position: absolute;
  left: 50%;
  top: var(--fan-card-top);
  width: clamp(108px, 30%, 120px);
  aspect-ratio: 104 / 177;
  padding: 0;
  overflow: hidden;
  transform:
    translate3d(calc(-50% + var(--fan-x)), var(--fan-y), 0)
    rotate(var(--fan-rotation))
    scale(var(--fan-scale, 1));
  transform-origin: 50% 50%;
  border: 0;
  border-radius: 11px;
  background: #26485b;
  box-shadow:
    0 20px 34px rgba(0, 0, 0, 0.42),
    0 7px 12px rgba(1, 5, 18, 0.28),
    0 0 0 1px rgba(255, 243, 209, 0.14);
  opacity: 0;
  cursor: pointer;
  will-change: transform;
  transition:
    transform 360ms cubic-bezier(0.22, 0.74, 0.24, 1) var(--fan-delay),
    opacity 260ms ease var(--fan-delay),
    filter 220ms ease;
}

.tarot-ritual-shell[data-ritual-phase="fanning"] .tarot-fan-card,
.tarot-ritual-shell[data-ritual-phase="interactive"] .tarot-fan-card,
.tarot-ritual-shell[data-ritual-phase="selecting"] .tarot-fan-card {
  opacity: 1;
}

.tarot-ritual-shell[data-ritual-phase="interactive"] .tarot-fan-card {
  transition: filter 180ms ease, opacity 180ms ease;
}

.tarot-ritual-shell:not([data-ritual-phase="interactive"]) .tarot-fan-instruction {
  opacity: 0;
}

.tarot-fan-card.outside,
.tarot-fan-card.chosen {
  opacity: 0 !important;
  pointer-events: none;
}

.tarot-fan-card:focus-visible {
  outline: 3px solid #f9dda1;
  outline-offset: 4px;
}

.tarot-fan-card:active:not(:disabled) {
  filter: brightness(1.14) drop-shadow(0 0 15px rgba(247, 220, 151, 0.52));
}

.tarot-ritual-shell[data-ritual-phase="selecting"] .tarot-fan-card:not(.chosen) {
  filter: brightness(0.64) saturate(0.8);
  opacity: 0.38;
}

.tarot-fan-center {
  position: absolute;
  z-index: 280;
  left: 50%;
  top: calc(var(--fan-pivot-y) - 13px);
  width: 74px;
  height: 26px;
  transform: translateX(-50%);
  pointer-events: none;
}

.tarot-fan-center::before,
.tarot-fan-center::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.tarot-fan-center::before {
  bottom: 0;
  width: 74px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(247, 220, 151, 0.28), transparent 69%);
  filter: blur(3px);
}

.tarot-fan-center::after {
  bottom: 5px;
  width: 5px;
  height: 5px;
  background: #ffe4a3;
  box-shadow: 0 0 10px #ffe4a3, 0 0 24px rgba(255, 228, 163, 0.7);
}

.tarot-fan-center i {
  position: absolute;
  left: calc(50% - 18px);
  bottom: 6px;
  width: 36px;
  height: 8px;
  border-top: 1px solid rgba(255, 229, 169, 0.54);
  border-radius: 50%;
}

.tarot-selected-flight {
  position: absolute;
  z-index: 420;
  inset: 0;
  pointer-events: none;
  perspective: 1000px;
}

.tarot-flight-card {
  position: absolute;
  left: var(--flight-x);
  top: var(--flight-y);
  width: clamp(96px, 28vw, 132px);
  aspect-ratio: 104 / 177;
  transform: translate(-50%, -50%) scale(1);
  transform-style: preserve-3d;
  transition:
    left 520ms cubic-bezier(0.22, 0.72, 0.25, 1),
    top 520ms cubic-bezier(0.22, 0.72, 0.25, 1),
    transform 520ms cubic-bezier(0.22, 0.72, 0.25, 1);
}

.tarot-selected-flight.active .tarot-flight-card {
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%) scale(1.2);
}

.tarot-flight-back,
.tarot-flight-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
  backface-visibility: hidden;
  transition: transform 520ms cubic-bezier(0.22, 0.72, 0.25, 1);
}

.tarot-flight-face {
  transform: rotateY(180deg);
}

.tarot-selected-flight.flipped .tarot-flight-back {
  transform: rotateY(180deg);
}

.tarot-selected-flight.flipped .tarot-flight-face {
  transform: rotateY(360deg);
}

.tarot-flight-face-image.reversed {
  transform: rotate(180deg);
}

.tarot-ritual-cue {
  position: absolute;
  z-index: 310;
  right: 12px;
  bottom: 0;
  left: 12px;
  display: grid;
  gap: 3px;
  pointer-events: none;
}

.tarot-ritual-cue span {
  color: #fff3d5;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 16px;
  font-weight: 700;
}

.tarot-ritual-cue small {
  color: rgba(216, 239, 222, 0.72);
  font-size: 11px;
}

.tarot-ritual-footer {
  position: relative;
  z-index: 4;
  width: min(100%, 560px);
  margin: 0 auto;
}

.tarot-ritual-shell .tarot-server-revealed {
  min-height: 0;
  margin: 0 auto 5px;
}

.tarot-ritual-shell .tarot-server-revealed:not(:empty) {
  min-height: 48px;
}

.tarot-ritual-shell .tarot-server-revealed article {
  border-color: rgba(255, 247, 223, 0.13);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 248, 229, 0.86);
}

.tarot-ritual-progress {
  display: grid;
  grid-template-columns: auto minmax(80px, 180px);
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: rgba(255, 248, 229, 0.7);
  font-size: 11px;
}

.tarot-ritual-progress span b {
  color: #ffe4a3;
  font-size: 14px;
}

.tarot-ritual-progress > i {
  position: relative;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.13);
}

.tarot-ritual-progress > i em {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--progress));
  transform-origin: left;
  border-radius: inherit;
  background: linear-gradient(90deg, #80c5b1, #ffe2a0);
  transition: transform 320ms ease;
}

.tarot-ritual-shell .tarot-fixed-note {
  max-width: 480px;
  margin-top: 7px;
  color: rgba(216, 239, 222, 0.5);
}

.tarot-ritual-actions {
  margin-top: 7px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.tarot-ritual-actions .tarot-skip-ritual,
.tarot-reshuffle {
  width: auto;
  min-width: 118px;
  min-height: 48px;
  margin: 0;
  padding: 9px 13px;
  border: 1px solid rgba(255, 247, 223, 0.14);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 248, 229, 0.76);
  font: inherit;
  font-size: 11px;
  font-weight: 720;
  cursor: pointer;
}

.tarot-reshuffle {
  border-color: rgba(247, 220, 151, 0.28);
  color: #f6dda5;
}

.tarot-ritual-actions button[hidden] {
  display: none;
}

.tarot-ritual-page .tarot-server-focus {
  background: rgba(2, 7, 20, 0.3);
}

.tarot-ritual-page .tarot-focus-scrim {
  background: rgba(2, 7, 20, 0.72);
  backdrop-filter: blur(12px);
}

.tarot-ritual-page .tarot-focus-sheet {
  border: 1px solid rgba(255, 247, 223, 0.15);
  background:
    radial-gradient(circle at 50% 12%, rgba(129, 196, 175, 0.2), transparent 34%),
    linear-gradient(165deg, #16223f, #132e37);
  color: #fff8e5;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.tarot-ritual-page .tarot-focus-sheet > p,
.tarot-ritual-page .tarot-focus-sheet > span,
.tarot-ritual-page .tarot-focus-sheet > small {
  color: rgba(225, 239, 229, 0.7);
}

.tarot-ritual-page .tarot-focus-sheet button {
  background: #e9e2c9;
  color: #183138;
}

@keyframes tarot-ritual-breathe {
  from { transform: scale(0.94); opacity: 0.72; }
  to { transform: scale(1.08); opacity: 1; }
}

@media (max-width: 359px) {
  .tarot-ritual-shell {
    padding-right: 10px;
    padding-left: 10px;
  }

  .tarot-ritual-shell .tarot-ritual-prompt {
    font-size: 24px;
  }

  .tarot-ritual-stage {
    min-height: 356px;
    flex-basis: 356px;
  }

  .tarot-fan-card {
    width: clamp(102px, 30%, 112px);
  }

  .tarot-ritual-actions .tarot-skip-ritual,
  .tarot-reshuffle {
    min-width: 108px;
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (max-height: 720px) and (orientation: portrait) {
  .tarot-ritual-shell {
    padding-top: max(58px, calc(env(safe-area-inset-top) + 48px));
  }

  .tarot-ritual-shell .tarot-ritual-prompt {
    font-size: clamp(23px, 6.4vw, 31px);
  }

  .tarot-ritual-stage {
    flex-basis: 338px;
    min-height: 338px;
  }

  .tarot-fan-viewport {
    bottom: 52px;
  }

  .tarot-fan-card {
    width: clamp(100px, 30%, 110px);
  }

  .tarot-ritual-shell .tarot-fixed-note {
    margin-top: 4px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .tarot-ritual-shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    padding:
      max(14px, env(safe-area-inset-top))
      max(18px, calc(env(safe-area-inset-right) + 12px))
      max(12px, env(safe-area-inset-bottom))
      max(66px, calc(env(safe-area-inset-left) + 60px));
    display: grid;
    grid-template-columns: minmax(170px, 0.72fr) minmax(310px, 1.38fr) minmax(172px, 0.78fr);
    grid-template-rows: 1fr auto;
    gap: 8px 12px;
    align-items: center;
  }

  .tarot-ritual-header {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 24px;
  }

  .tarot-ritual-shell .tarot-ritual-prompt {
    font-size: clamp(22px, 3.2vw, 31px);
  }

  .tarot-sensory-toggle b,
  .tarot-sensory-status {
    display: none;
  }

  .tarot-sensory-panel {
    max-width: none;
  }

  .tarot-ritual-shell > .tarot-question-echo {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .tarot-ritual-stage {
    grid-column: 2;
    grid-row: 1 / span 2;
    left: auto;
    width: 100%;
    min-height: min(92dvh, 372px);
    max-height: min(92dvh, 372px);
    margin: 0;
    transform: none;
  }

  .tarot-ritual-footer {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 100%;
  }

  .tarot-ritual-actions {
    flex-direction: column;
  }

  .tarot-ritual-actions .tarot-skip-ritual,
  .tarot-reshuffle {
    width: 100%;
  }

  .tarot-fan-card {
    width: clamp(132px, 18vw, 176px);
  }

  .tarot-ritual-shell .tarot-server-revealed {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-ritual-atmosphere::before {
    animation: none;
  }

  .tarot-shuffle-card,
  .tarot-fan-card,
  .tarot-flight-card,
  .tarot-flight-back,
  .tarot-flight-face,
  .tarot-ritual-progress > i em {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

.evolved-reduced-motion .tarot-ritual-atmosphere::before {
  animation: none;
}

.evolved-reduced-motion .tarot-shuffle-card,
.evolved-reduced-motion .tarot-fan-card,
.evolved-reduced-motion .tarot-flight-card,
.evolved-reduced-motion .tarot-flight-back,
.evolved-reduced-motion .tarot-flight-face {
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
}

/* v2.19 — one visual story from reveal to reflection, history, and sharing */
.tarot-server-page.tarot-result-page {
  background:
    radial-gradient(circle at 86% 12%, rgba(231, 172, 203, 0.16), transparent 28%),
    linear-gradient(180deg, #101936 0 34%, #edf2ec 34% 100%);
}

.tarot-result-shell {
  width: min(100%, 760px);
  padding: 0 0 max(34px, calc(env(safe-area-inset-bottom) + 24px));
  color: #293b38;
}

.tarot-result-page .tarot-server-back-button {
  position: fixed;
  border: 1px solid rgba(255, 247, 223, 0.16);
  background: rgba(10, 18, 42, 0.58);
  color: #fff7df;
  backdrop-filter: blur(15px);
}

.tarot-result-hero {
  position: relative;
  isolation: isolate;
  min-height: 465px;
  padding:
    max(76px, calc(env(safe-area-inset-top) + 64px))
    clamp(18px, 6vw, 38px)
    28px;
  overflow: hidden;
  color: #fff8e8;
  text-align: center;
  background:
    radial-gradient(circle at 50% 59%, rgba(113, 196, 175, 0.2), transparent 25%),
    radial-gradient(circle at 15% 9%, rgba(109, 116, 216, 0.23), transparent 31%),
    radial-gradient(circle at 88% 12%, rgba(230, 157, 187, 0.2), transparent 29%),
    linear-gradient(160deg, #091128 0%, #131c3d 52%, #15343b 100%);
}

.tarot-result-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -160px;
  width: min(126vw, 680px);
  aspect-ratio: 1;
  transform: translateX(-50%) scaleY(0.42);
  border: 1px solid rgba(226, 243, 226, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 52px rgba(226, 243, 226, 0.035),
    0 0 60px rgba(113, 196, 175, 0.1);
}

.tarot-result-stars {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 244, 207, 0.78) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(164, 222, 213, 0.56) 0 1px, transparent 1.4px);
  background-position: 9% 13%, 87% 21%;
  background-size: 83px 101px, 119px 137px;
  opacity: 0.38;
  mask-image: linear-gradient(#000, transparent 92%);
}

.tarot-result-hero > .tarot-server-kicker {
  margin: 0 0 9px;
  color: rgba(216, 239, 222, 0.7);
}

.tarot-result-hero > h1 {
  max-width: 540px;
  margin: 0 auto;
  color: #fff8e8;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(28px, 7.6vw, 43px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.tarot-result-hero .tarot-question-echo {
  max-width: 480px;
  margin-top: 11px;
  color: rgba(226, 239, 230, 0.62);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tarot-result-constellation {
  position: relative;
  min-height: 210px;
  margin: 20px auto 2px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(7px, 2.7vw, 15px);
  perspective: 1000px;
}

.tarot-result-hero-card {
  width: clamp(82px, 25vw, 126px);
  margin: 0;
  transform:
    translateY(calc(abs(var(--hero-index) - (var(--hero-count) - 1) / 2) * 5px))
    rotate(calc((var(--hero-index) - (var(--hero-count) - 1) / 2) * 2.8deg));
  transform-origin: 50% 92%;
  animation: tarot-result-card-arrive 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--hero-index) * 90ms);
}

.tarot-result-constellation[data-card-count="1"] .tarot-result-hero-card {
  width: clamp(126px, 38vw, 158px);
  transform: none;
}

.tarot-result-hero-image {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 239, 199, 0.25),
    0 0 24px rgba(241, 214, 151, 0.1);
}

.tarot-result-hero-card figcaption {
  margin-top: 8px;
  display: grid;
  gap: 2px;
}

.tarot-result-hero-card figcaption span {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.88);
  font-size: 9px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-result-hero-card figcaption small {
  color: rgba(216, 239, 222, 0.55);
  font-size: 8px;
  text-transform: uppercase;
}

.tarot-result-verified {
  margin: 8px 0 0;
  color: rgba(216, 239, 222, 0.55);
  font-size: 9px;
  line-height: 1.4;
}

.tarot-result-verified span {
  margin-right: 5px;
  color: #f7d99a;
}

.tarot-result-body {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 22px clamp(16px, 5vw, 28px) 0;
}

.tarot-result-opening {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid rgba(61, 91, 80, 0.11);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px rgba(39, 67, 59, 0.06);
}

.tarot-result-opening > small {
  color: #6d8179;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.tarot-result-opening .tarot-question-ack {
  margin-top: 8px;
  padding-left: 0;
  border-left: 0;
  color: #40544d;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 14px;
}

.tarot-result-reading {
  margin-top: 20px;
}

.tarot-result-section-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin-bottom: 12px;
}

.tarot-result-section-heading > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(72, 103, 91, 0.15);
  border-radius: 50%;
  color: #70827b;
  font-size: 9px;
}

.tarot-result-section-heading small {
  color: #71837c;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.tarot-result-section-heading h2 {
  margin: 3px 0 0;
  color: #304640;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
}

.tarot-result-body .tarot-server-result-list {
  margin-top: 0;
}

.tarot-result-body .tarot-server-result-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(223, 188, 214, 0.15), transparent 34%),
    rgba(255, 255, 255, 0.76);
}

.tarot-result-body .tarot-server-result-card::after {
  content: "";
  position: absolute;
  right: -23px;
  bottom: -26px;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(73, 105, 93, 0.07);
  border-radius: 50%;
}

.tarot-result-body .tarot-server-integration {
  padding: 18px;
  border-color: rgba(247, 220, 151, 0.16);
  background:
    radial-gradient(circle at 95% 8%, rgba(247, 220, 151, 0.13), transparent 31%),
    linear-gradient(145deg, #18313a, #1b3f42);
  box-shadow: 0 18px 36px rgba(24, 54, 56, 0.14);
}

.tarot-result-body .tarot-server-integration .tarot-result-section-heading > span {
  border-color: rgba(255, 239, 197, 0.18);
  color: rgba(255, 239, 197, 0.72);
}

.tarot-result-body .tarot-server-integration .tarot-result-section-heading small {
  color: rgba(247, 220, 151, 0.72);
}

.tarot-result-body .tarot-server-integration .tarot-result-section-heading h2 {
  color: #fff5dc;
}

.tarot-result-body .tarot-server-integration > p {
  color: rgba(230, 242, 232, 0.8);
}

.tarot-result-body .tarot-server-integration .tarot-commitment {
  color: rgba(216, 239, 222, 0.45);
}

.tarot-result-body .tarot-gentle-action {
  position: relative;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(230, 166, 201, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(230, 242, 235, 0.96), rgba(242, 235, 245, 0.93));
}

.tarot-action-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #335d53;
  color: #fff9e8;
  font-size: 20px;
  box-shadow: 0 10px 22px rgba(43, 83, 72, 0.18);
}

.tarot-result-body .tarot-result-actions {
  margin-top: 18px;
}

.tarot-result-body .tarot-result-actions .tarot-primary-action {
  box-shadow: 0 12px 26px rgba(43, 83, 72, 0.16);
}

@keyframes tarot-result-card-arrive {
  from {
    opacity: 0;
    transform: translateY(28px) rotateY(18deg) scale(0.94);
  }
}

.tarot-server-page.tarot-history-page {
  background:
    radial-gradient(circle at 12% 5%, rgba(112, 128, 218, 0.2), transparent 27%),
    linear-gradient(180deg, #101936 0 275px, #eef2ec 275px 100%);
}

.tarot-history-shell {
  width: min(100%, 680px);
  padding-top: max(68px, calc(env(safe-area-inset-top) + 56px));
}

.tarot-history-page .tarot-server-back-button {
  position: fixed;
  border: 1px solid rgba(255, 247, 223, 0.16);
  background: rgba(10, 18, 42, 0.58);
  color: #fff7df;
  backdrop-filter: blur(15px);
}

.tarot-history-hero {
  position: relative;
  min-height: 165px;
  color: #fff8e8;
  text-align: center;
}

.tarot-history-mark {
  width: 42px;
  height: 42px;
  margin: 0 auto 11px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 220, 151, 0.28);
  border-radius: 50%;
  background: rgba(247, 220, 151, 0.08);
  color: #f6d995;
  box-shadow: 0 0 28px rgba(247, 220, 151, 0.13);
}

.tarot-history-hero .tarot-server-kicker {
  margin-bottom: 7px;
  color: rgba(216, 239, 222, 0.65);
}

.tarot-history-hero h1 {
  max-width: 520px;
  margin: 0 auto;
  color: #fff8e8;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(28px, 7.4vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

.tarot-history-hero > p:last-child {
  max-width: 480px;
  margin: 11px auto 0;
  color: rgba(225, 239, 230, 0.58);
  font-size: 11px;
  line-height: 1.5;
}

.tarot-history-list {
  margin-top: 23px;
}

.tarot-history-overview {
  padding: 15px;
  border: 1px solid rgba(61, 89, 79, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(42, 70, 61, 0.06);
}

.tarot-history-overview > p {
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #6e7f78;
}

.tarot-history-overview > p b {
  color: #314840;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 25px;
  font-weight: 500;
}

.tarot-history-overview > p span {
  font-size: 10px;
}

.tarot-history-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.tarot-history-filters button {
  min-width: 0;
  min-height: 48px;
  padding: 8px 5px;
  border: 1px solid rgba(63, 91, 80, 0.11);
  border-radius: 14px;
  background: rgba(236, 242, 237, 0.8);
  color: #61736c;
  font-size: 10px;
  font-weight: 720;
  cursor: pointer;
}

.tarot-history-filters button span {
  min-width: 19px;
  margin-left: 4px;
  padding: 2px 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 99px;
  background: rgba(55, 84, 74, 0.08);
  font-size: 8px;
}

.tarot-history-filters button[aria-pressed="true"] {
  border-color: #416c5f;
  background: #315c50;
  color: #fff8e8;
  box-shadow: 0 8px 18px rgba(49, 92, 80, 0.15);
}

.tarot-history-filters button[aria-pressed="true"] span {
  background: rgba(255, 255, 255, 0.14);
}

.tarot-history-items {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.tarot-history-item {
  grid-template-columns: 76px minmax(0, 1fr) 18px;
  min-height: 116px;
  padding: 12px 13px 12px 10px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(226, 183, 211, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 25px rgba(41, 68, 59, 0.05);
}

.tarot-history-art {
  position: relative;
  width: 76px;
  height: 89px;
  display: block;
}

.tarot-history-art .tarot-history-thumb {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 49px;
  transform: translateX(-50%);
  border-radius: 5px;
  box-shadow: 0 8px 17px rgba(35, 50, 58, 0.18);
}

.tarot-history-art[data-card-count="3"] .tarot-history-thumb:nth-child(1) {
  transform: translateX(calc(-50% - 13px)) rotate(-7deg);
}

.tarot-history-art[data-card-count="3"] .tarot-history-thumb:nth-child(2) {
  z-index: 2;
}

.tarot-history-art[data-card-count="3"] .tarot-history-thumb:nth-child(3) {
  transform: translateX(calc(-50% + 13px)) rotate(7deg);
}

.tarot-history-item strong {
  margin: 5px 0;
  font-size: 15px;
}

.tarot-history-filter-empty {
  padding: 25px 18px;
  border: 1px dashed rgba(64, 89, 79, 0.16);
  border-radius: 20px;
  color: #66776f;
  text-align: center;
}

.tarot-history-filter-empty strong {
  display: block;
  color: #3f534b;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 500;
}

.tarot-history-filter-empty p {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.tarot-history-empty > span {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5eee8;
  color: #4f7568;
}

.tarot-history-page-status {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid rgba(61, 89, 79, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.62);
}

.tarot-history-page-status > p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #6a7d75;
  font-size: 10px;
}

.tarot-history-page-status > p b {
  color: #40584f;
  font-weight: 760;
  text-align: right;
}

.tarot-history-page-status > i {
  height: 3px;
  margin: 10px 0 13px;
  display: block;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(56, 89, 77, 0.1);
}

.tarot-history-page-status > i em {
  width: var(--history-progress);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #5b8d7b, #d3ab72);
  transition: width 260ms ease-out;
}

.tarot-history-page-status > .tarot-secondary-action {
  min-height: 48px;
  border-color: rgba(54, 88, 76, 0.14);
  background: rgba(231, 239, 233, 0.86);
  color: #3f6256;
}

.tarot-history-page-status > small {
  display: block;
  color: #82918b;
  font-size: 9px;
  text-align: center;
}

.tarot-history-page-error {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: #8a5050;
  font-size: 10px;
}

.tarot-history-page-error button {
  min-width: 68px;
  min-height: 48px;
  border: 1px solid rgba(138, 80, 80, 0.17);
  border-radius: 13px;
  background: rgba(138, 80, 80, 0.08);
  color: #7d4646;
  font-weight: 750;
}

.tarot-history-filters button:disabled,
.tarot-history-page-status button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.tarot-share-sheet {
  border-color: rgba(255, 247, 223, 0.15);
  background:
    radial-gradient(circle at 88% 8%, rgba(231, 166, 201, 0.16), transparent 29%),
    linear-gradient(160deg, #101a38, #15323a);
  color: #fff8e8;
}

.tarot-share-head small {
  color: rgba(247, 220, 151, 0.72);
}

.tarot-share-head h2 {
  color: #fff8e8;
}

.tarot-share-head > button {
  border: 1px solid rgba(255, 247, 223, 0.13);
  background: rgba(255, 255, 255, 0.07);
  color: #fff8e8;
}

.tarot-share-preview {
  border: 1px solid rgba(255, 247, 223, 0.12);
  background:
    radial-gradient(circle at 50% 48%, rgba(116, 201, 178, 0.16), transparent 27%),
    radial-gradient(circle at 12% 8%, rgba(116, 126, 218, 0.18), transparent 30%),
    linear-gradient(145deg, #09132e, #263f55 60%, #61526d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 34px rgba(0, 0, 0, 0.18);
}

.tarot-share-privacy {
  color: rgba(224, 239, 229, 0.66);
}

.tarot-share-exclusions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.tarot-share-exclusions li {
  min-width: 0;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 247, 223, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(231, 241, 233, 0.72);
  font-size: 9px;
}

.tarot-share-exclusions li span {
  width: 18px;
  height: 18px;
  display: grid;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: rgba(124, 204, 181, 0.16);
  color: #9fd6c5;
  font-size: 9px;
}

.tarot-share-actions .tarot-primary-action {
  background: #f0e7ce;
  color: #193238;
}

.tarot-share-actions .tarot-secondary-action {
  border-color: rgba(255, 247, 223, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: #fff8e8;
}

.tarot-share-status {
  color: rgba(224, 239, 229, 0.66);
}

@media (max-width: 350px) {
  .tarot-result-hero {
    min-height: 435px;
  }

  .tarot-result-hero-card {
    width: 78px;
  }

  .tarot-result-constellation {
    gap: 5px;
  }

  .tarot-result-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .tarot-result-body .tarot-server-result-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 11px;
  }

  .tarot-result-body .tarot-result-image {
    width: 72px;
  }

  .tarot-history-shell {
    padding-right: 12px;
    padding-left: 12px;
  }

  .tarot-history-item {
    grid-template-columns: 68px minmax(0, 1fr) 12px;
    gap: 8px;
  }

  .tarot-history-art {
    width: 68px;
  }

  .tarot-share-exclusions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 700px) and (max-height: 620px) and (orientation: landscape) {
  .tarot-result-shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(310px, 0.82fr) minmax(390px, 1.18fr);
    align-items: start;
  }

  .tarot-result-hero {
    position: sticky;
    top: 0;
    min-height: 100dvh;
    max-height: 100dvh;
    padding-top: max(48px, calc(env(safe-area-inset-top) + 42px));
  }

  .tarot-result-hero > h1 {
    font-size: clamp(25px, 3.6vw, 34px);
  }

  .tarot-result-constellation {
    min-height: 170px;
    margin-top: 14px;
  }

  .tarot-result-hero-card {
    width: clamp(72px, 10vw, 96px);
  }

  .tarot-result-constellation[data-card-count="1"] .tarot-result-hero-card {
    width: 118px;
  }

  .tarot-result-body {
    width: 100%;
    padding-top: max(20px, env(safe-area-inset-top));
    padding-right: max(22px, calc(env(safe-area-inset-right) + 16px));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .tarot-history-shell {
    width: min(100%, 880px);
  }

  .tarot-history-hero {
    min-height: 120px;
  }

  .tarot-history-hero .tarot-history-mark {
    position: absolute;
    left: 0;
    top: 2px;
  }

  .tarot-history-items {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 540px) and (max-width: 699px) and (max-height: 620px) and (orientation: landscape) {
  .tarot-result-shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(320px, 1.22fr);
    align-items: start;
  }

  .tarot-result-hero {
    position: sticky;
    top: 0;
    min-height: 100dvh;
    max-height: 100dvh;
    padding:
      max(44px, calc(env(safe-area-inset-top) + 38px))
      12px
      max(12px, env(safe-area-inset-bottom));
  }

  .tarot-result-hero > h1 {
    font-size: 22px;
  }

  .tarot-result-hero .tarot-question-echo {
    margin-top: 6px;
    font-size: 9px;
  }

  .tarot-result-constellation {
    min-height: 150px;
    margin-top: 10px;
    gap: 5px;
  }

  .tarot-result-hero-card {
    width: 60px;
  }

  .tarot-result-constellation[data-card-count="1"] .tarot-result-hero-card {
    width: 98px;
  }

  .tarot-result-hero-card figcaption {
    margin-top: 4px;
  }

  .tarot-result-verified {
    margin-top: 3px;
    font-size: 7px;
  }

  .tarot-result-body {
    width: 100%;
    padding:
      max(16px, env(safe-area-inset-top))
      max(14px, calc(env(safe-area-inset-right) + 10px))
      max(20px, env(safe-area-inset-bottom))
      14px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .tarot-history-shell {
    padding-top: max(24px, calc(env(safe-area-inset-top) + 18px));
    padding-right: max(18px, calc(env(safe-area-inset-right) + 12px));
    padding-left: max(66px, calc(env(safe-area-inset-left) + 60px));
  }

  .tarot-history-hero h1 {
    font-size: clamp(24px, 4.6vw, 34px);
  }

  .tarot-history-list {
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-result-hero-card,
  .tarot-history-page-status > i em {
    animation: none;
    transition: none;
  }
}

.evolved-reduced-motion .tarot-result-hero-card,
.evolved-reduced-motion .tarot-history-page-status > i em {
  animation: none;
  transition: none;
}

/* v2.29 Companion chat rail: Fari owns the left stage; conversation owns the right rail. */
.phone.interaction-text {
  --companion-stage-width: clamp(108px, 34%, 144px);
}

.phone.interaction-text .chat-overlay {
  background:
    radial-gradient(circle at 18% 54%, rgba(88, 222, 213, .18), transparent 24%),
    linear-gradient(180deg, rgba(4, 17, 50, .02), rgba(8, 22, 54, .13) 64%, rgba(14, 24, 54, .4));
}

.phone.interaction-text .task-zone,
.phone.interaction-text .pages {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.phone.interaction-text .angel {
  left: 18%;
  top: max(220px, 29dvh);
}

.phone.interaction-text .angel .sprite {
  transform: translateX(-50%) scale(1.48);
}

.phone.interaction-text .chat-panel-head,
.phone.interaction-text .chat-reading-context,
.phone.interaction-text .chat-runtime-status {
  margin-right: 0;
  margin-left: var(--companion-stage-width);
}

.phone.interaction-text .chat-panel-head {
  min-height: 38px;
  padding-right: 0;
  text-align: left;
}

.phone.interaction-text .chat-close {
  top: -60px;
}

.phone.interaction-text .chat-panel-head span {
  font-size: 10px;
  letter-spacing: .16em;
}

.phone.interaction-text .chat-panel-head small {
  margin-top: 4px;
  font-size: 10px;
}

.phone.interaction-text .chat-reading-context {
  grid-template-columns: 30px minmax(0, 1fr) 48px;
  min-height: 60px;
  margin-top: 8px;
  padding: 6px 6px 6px 9px;
  gap: 7px;
  border-color: rgba(255, 255, 255, .36);
  background: rgba(14, 35, 74, .54);
}

.phone.interaction-text .chat-reading-context svg {
  width: 28px;
  height: 36px;
}

.phone.interaction-text .chat-reading-context strong {
  font-size: 10px;
}

.phone.interaction-text .chat-reading-context button {
  width: 48px;
  min-width: 48px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
}

.phone.interaction-text .chat-reading-context button::before {
  content: "×";
  font-size: 20px;
  font-weight: 500;
}

.phone.interaction-text .chat-thread {
  margin-top: 6px;
  padding: 10px 0 12px var(--companion-stage-width);
  scroll-padding-top: 10px;
}

.phone.interaction-text .chat-thread > .chat-bubble,
.phone.interaction-text .chat-thread > .chat-response,
.phone.interaction-text .chat-thread > .chat-turn-state,
.phone.interaction-text .chat-thread > .chat-safety-card,
.phone.interaction-text .chat-thread > .memory-proposal {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
}

.phone.interaction-text .chat-thread > .chat-response,
.phone.interaction-text .chat-thread > .chat-turn-state,
.phone.interaction-text .chat-thread > .chat-safety-card {
  width: 100%;
}

.phone.interaction-text .chat-bubble {
  font-size: clamp(14px, 3.65vw, 16px);
  line-height: 1.48;
}

.phone.interaction-text .chat-bubble.fari {
  margin-left: 0;
}

.phone.interaction-text .chat-bubble:has(> .chat-image) {
  width: min(100%, 184px);
  padding: 8px;
}

.phone.interaction-text .chat-image {
  width: 100%;
  max-height: 220px;
  border-radius: 14px;
}

.phone.interaction-text .chat-response-actions {
  padding-left: 0;
}

.phone.interaction-text .chat-response-actions button {
  padding-right: 10px;
  padding-left: 10px;
}

.phone.interaction-text .chat-composer {
  width: 100%;
  margin: 0;
}

@media (max-width: 350px) and (orientation: portrait) {
  .phone.interaction-text {
    --companion-stage-width: 98px;
  }

  .phone.interaction-text .angel {
    left: 17%;
  }

  .phone.interaction-text .angel .sprite {
    transform: translateX(-50%) scale(1.32);
  }

  .phone.interaction-text .chat-panel {
    padding-right: 11px;
    padding-left: 11px;
  }

  .phone.interaction-text .chat-reading-context {
    grid-template-columns: 25px minmax(0, 1fr) 48px;
    gap: 5px;
  }

  .phone.interaction-text .chat-reading-context svg {
    width: 24px;
  }
}

@media (max-height: 700px) and (orientation: portrait) {
  .phone.interaction-text .angel {
    top: 27dvh;
  }

  .phone.interaction-text .angel .sprite {
    transform: translateX(-50%) scale(1.28);
  }

  .phone.interaction-text .chat-thread {
    padding-top: 8px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .phone.interaction-text {
    --companion-stage-width: 0px;
  }

  .phone.interaction-text .angel {
    left: 22%;
    top: 27%;
  }

  .phone.interaction-text .chat-panel-head,
  .phone.interaction-text .chat-reading-context,
  .phone.interaction-text .chat-runtime-status {
    margin-left: 0;
  }

  .phone.interaction-text .chat-panel-head {
    padding-right: 52px;
  }

  .phone.interaction-text .chat-close {
    top: 0;
  }

  .phone.interaction-text .chat-thread {
    padding-left: 0;
  }
}

/* v2.31 Declutter: no per-message rating row; compact global toggle with a full touch target. */
.phone.interaction-text .chat-response-actions {
  display: none !important;
}

.card-toggle {
  width: 48px;
  height: 48px;
  background: transparent;
  box-shadow: none;
}

.card-toggle::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow:
    0 5px 14px rgba(3, 19, 53, .16),
    inset 0 0 0 1px rgba(18, 40, 72, .06);
}

.card-toggle svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.card-toggle .task-badge {
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-width: 2px;
  font-size: 10px;
}

/* v3.2 Tolan-inspired Journal: illustrated archive cards and editorial entry detail. */
.journal-evolved-page {
  --journal-paper: #f8f6ef;
  --journal-ink: #292735;
  --journal-muted: #827e78;
  --journal-header-top: max(60px, calc(env(safe-area-inset-top) + 42px));
  --journal-back-icon-optical-shift: 0px;
  container-type: inline-size;
  background: var(--journal-paper);
  color: var(--journal-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.journal-evolved-page .page-shell {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: var(--journal-header-top) 14px
    max(72px, calc(env(safe-area-inset-bottom) + 40px));
  background:
    radial-gradient(circle at 12% 8%, rgba(232, 211, 170, .14), transparent 22rem),
    var(--journal-paper);
}

.journal-evolved-page .page-content {
  width: min(100%, 760px);
  max-width: 760px;
  margin: 0 auto;
}

.journal-evolved-page .page-back {
  left: max(14px, calc(50% - 380px + 14px)) !important;
  right: auto !important;
  top: var(--journal-header-top);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--journal-ink);
}

.journal-evolved-page .page-back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  background: currentColor;
  -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 / 28px 28px no-repeat;
  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 / 28px 28px no-repeat;
  transform: translate(-50%, calc(-50% + var(--journal-back-icon-optical-shift)));
}

.journal-index-header {
  position: relative;
  min-height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 40px;
}

.journal-index-header h1 {
  margin: 0;
  font-family: Arial, "Noto Sans SC", sans-serif;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.03em;
}

.journal-tools {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
}

.journal-tools > summary {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  list-style: none;
  border-radius: 50%;
  color: var(--journal-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 180ms ease, box-shadow 180ms ease, opacity 120ms ease;
}

.journal-tools > summary::-webkit-details-marker {
  display: none;
}

.journal-tools > summary svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.journal-tools[open] > summary {
  background: #fff;
  box-shadow: 0 10px 28px rgba(55, 42, 27, .12);
}

.journal-tools-panel {
  position: absolute;
  top: 56px;
  right: 0;
  width: min(330px, calc(100vw - 54px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(66, 51, 37, .1);
  border-radius: 20px;
  background: rgba(255, 253, 248, .98);
  box-shadow: 0 22px 60px rgba(48, 36, 25, .18);
}

.journal-tools-panel > p {
  margin: 0;
  color: #68615b;
  font-size: 13px;
  line-height: 1.55;
}

.journal-tools-panel > p strong {
  display: block;
  margin-bottom: 4px;
  color: #3b3734;
  font-size: 14px;
}

.journal-tools-panel .history-search-panel {
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.journal-tools-panel .history-search-row input {
  min-height: 48px;
  background: #f4f0e8;
  font-size: 16px;
}

.journal-tools-panel .history-search-panel > label {
  color: #514b46;
  font-size: 12px;
}

.journal-tools-panel .history-search-row button {
  font-size: 13px;
}

.journal-tools-panel .history-filter-strip {
  margin: 0;
}

.journal-new-entry,
.journal-evolved-page .history-load-more {
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #2f2d3d;
  color: #fff;
  font-size: 15px;
  font-weight: 760;
  touch-action: manipulation;
  transition: filter 160ms ease, opacity 120ms ease;
}

.history-conversation-list {
  display: grid;
  gap: 22px;
}

.history-conversation-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(75, 59, 42, .09);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(59, 46, 33, .08);
}

.history-conversation-open {
  width: 100%;
  min-height: 0;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--journal-ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 180ms ease, opacity 120ms ease;
}

.journal-cover-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 13%, #f7c469 0 2px, transparent 3px),
    radial-gradient(circle at 61% 24%, #f7d688 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 89% 21%, #f7c469 0 2px, transparent 3px),
    linear-gradient(162deg, transparent 0 48%, rgba(106, 50, 23, .2) 49% 50%, transparent 51%),
    linear-gradient(180deg, #102d30 0 47%, #653018 47% 52%, #7d3b1e 52% 100%);
  isolation: isolate;
}

.journal-cover-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto -8% -26% -8%;
  height: 70%;
  background:
    repeating-linear-gradient(7deg, transparent 0 27px, rgba(39, 17, 9, .12) 28px 30px),
    linear-gradient(165deg, #8d4724, #502313);
  transform: perspective(260px) rotateX(34deg);
  transform-origin: bottom;
}

.journal-cover-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -7%;
  top: -6%;
  width: 49%;
  height: 69%;
  border-bottom-right-radius: 70% 45%;
  background:
    radial-gradient(circle at 55% 50%, rgba(253, 153, 71, .19), transparent 38%),
    linear-gradient(115deg, #4a120d, #7b2115 66%, #39100d);
  box-shadow: 18px 6px 42px rgba(20, 6, 4, .36);
}

.journal-cover-art[data-tone="1"] {
  filter: hue-rotate(-10deg) saturate(.92);
}

.journal-cover-art[data-tone="2"] {
  filter: hue-rotate(13deg) saturate(.86);
}

.journal-stars {
  position: absolute;
  z-index: 2;
  inset: 0 0 48% 42%;
  background-image:
    radial-gradient(circle, #f5cf79 0 1.5px, transparent 2px),
    radial-gradient(circle, #fff0ae 0 1px, transparent 1.8px);
  background-position: 18px 12px, 3px 30px;
  background-size: 57px 44px, 71px 54px;
  opacity: .82;
}

.journal-cloud {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  background: #d8b376;
  opacity: .75;
}

.journal-cloud::before,
.journal-cloud::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: inherit;
}

.journal-cloud-one {
  top: 23%;
  right: -3%;
  width: 34%;
  height: 12%;
}

.journal-cloud-one::before {
  left: 9%;
  width: 40%;
  aspect-ratio: 1;
}

.journal-cloud-one::after {
  right: 5%;
  width: 55%;
  aspect-ratio: 1;
}

.journal-cloud-two {
  top: 34%;
  right: 27%;
  width: 22%;
  height: 8%;
  opacity: .48;
}

.journal-cloud-two::before {
  left: 10%;
  width: 48%;
  aspect-ratio: 1;
}

.journal-cloud-two::after {
  right: 3%;
  width: 58%;
  aspect-ratio: 1;
}

.journal-lantern {
  position: absolute;
  z-index: 5;
  left: 10%;
  top: 18%;
  width: 18%;
  height: 43%;
  border: clamp(4px, 1.2vw, 8px) solid #35170e;
  border-radius: 42% 42% 25% 25%;
  background: radial-gradient(circle at 50% 48%, #fff4ad 0 8%, #f9a53f 55%, #7b2d12 100%);
  box-shadow: 0 0 42px rgba(255, 158, 59, .62);
}

.journal-lantern::before,
.journal-lantern::after {
  content: "";
  position: absolute;
  left: -19%;
  width: 138%;
  height: 13%;
  border-radius: 50%;
  background: #3b190f;
}

.journal-lantern::before {
  top: -10%;
}

.journal-lantern::after {
  bottom: -10%;
}

.journal-lantern i {
  position: absolute;
  left: 44%;
  top: -34%;
  width: 12%;
  height: 28%;
  border: 3px solid #3b190f;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.journal-cup {
  position: absolute;
  z-index: 6;
  bottom: 18%;
  width: 13%;
  height: 14%;
  border-radius: 18% 18% 44% 44%;
  background: linear-gradient(90deg, #c58c52, #efd09b 54%, #9f6235);
  box-shadow: 0 9px 10px rgba(31, 12, 6, .28);
}

.journal-cup::before {
  content: "";
  position: absolute;
  left: 3%;
  top: -8%;
  width: 94%;
  height: 23%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #512318 0 48%, #e3bc7e 51% 100%);
}

.journal-cup-one {
  left: 12%;
}

.journal-cup-two {
  left: 29%;
  bottom: 25%;
  transform: scale(.82);
}

.journal-book {
  position: absolute;
  z-index: 7;
  left: 36%;
  bottom: 9%;
  width: 37%;
  height: 29%;
  border: 3px solid #69301b;
  border-radius: 8% 4% 8% 7%;
  background: linear-gradient(145deg, #efc875, #bd6f34);
  box-shadow: 7px 12px 0 #4b2116, 0 17px 22px rgba(30, 11, 6, .3);
  transform: skewY(-5deg) rotate(3deg);
}

.journal-book::before {
  content: "";
  position: absolute;
  inset: 4% 3% 8%;
  border-radius: inherit;
  border: 1px solid rgba(110, 58, 29, .45);
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(111, 56, 26, .12) 10px 11px),
    linear-gradient(145deg, #f7dc91, #d5974c);
}

.journal-book i {
  position: absolute;
  z-index: 1;
  left: 49%;
  top: 3%;
  width: 1px;
  height: 89%;
  background: rgba(99, 45, 23, .3);
}

.journal-leaves {
  position: absolute;
  z-index: 5;
  right: 3%;
  bottom: 18%;
  width: 25%;
  height: 19%;
  border-radius: 60% 10% 60% 10%;
  background: #254c37;
  box-shadow:
    -17px -8px 0 #376649,
    15px -13px 0 #193d2f,
    -4px 14px 0 #1c3b2c;
  transform: rotate(-18deg);
}

.journal-card-copy {
  display: grid;
  gap: 18px;
  padding: 22px 20px 20px;
}

.journal-card-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #454039;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.52;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow-wrap: anywhere;
}

.journal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #6f6a65;
  font-size: 12px;
}

.journal-card-footer time {
  text-align: right;
}

.journal-end-mark {
  margin: 64px 0 12px;
  color: #aaa59d;
  font-size: 14px;
  font-weight: 780;
  letter-spacing: .05em;
  text-align: center;
}

.journal-evolved-page .history-state,
.journal-evolved-page .evolved-empty {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.journal-evolved-page .history-load-more {
  display: block;
  width: auto;
  margin: 22px auto 0;
}

.journal-detail-mode .page-back {
  display: none;
}

.journal-detail-mode .page-shell {
  padding: 0;
  background: var(--journal-paper);
}

.journal-detail-mode .page-content {
  width: 100%;
  max-width: none;
}

.history-detail-shell {
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--journal-paper);
}

.journal-detail-cover {
  position: relative;
  height: clamp(252px, 68vw, 276px);
}

.journal-detail-cover .journal-cover-art {
  height: 100%;
  aspect-ratio: auto;
}

.journal-floating-action {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 247, .94);
  color: #292735;
  box-shadow: 0 8px 24px rgba(31, 21, 15, .16);
  backdrop-filter: blur(12px);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 180ms ease, box-shadow 180ms ease, opacity 120ms ease;
}

.journal-floating-action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.journal-floating-action:disabled {
  opacity: .55;
}

.journal-detail-back {
  position: absolute;
  z-index: 9;
  left: max(18px, env(safe-area-inset-left));
  top: max(22px, calc(env(safe-area-inset-top) + 12px));
}

.journal-detail-top-actions {
  position: absolute;
  z-index: 9;
  top: max(22px, calc(env(safe-area-inset-top) + 12px));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  gap: 10px;
}

.journal-entry-paper {
  padding: 30px 24px max(76px, calc(env(safe-area-inset-bottom) + 48px));
}

.journal-entry-date {
  display: block;
  margin-bottom: 8px;
  color: #4d4945;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .12em;
}

.journal-entry-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.journal-entry-byline {
  margin: 0 0 28px;
  color: #80786f;
  font-size: 13px;
  font-weight: 560;
}

.journal-entry-body {
  color: #403c38;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: normal;
}

.journal-entry-body > p {
  margin: 0 0 1.35em;
  white-space: pre-wrap;
}

.journal-entry-body > p:last-child {
  margin-bottom: 0;
}

.journal-entry-lead {
  font-size: 19px;
  line-height: 1.68;
}

.journal-entry-quote {
  position: relative;
  margin: 30px 0;
  padding: 22px 20px 20px;
  border: 1px solid rgba(102, 120, 155, .14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 10%, rgba(124, 215, 217, .18), transparent 42%),
    linear-gradient(145deg, rgba(237, 239, 247, .88), rgba(246, 238, 237, .82));
  color: #363746;
}

.journal-entry-quote::before {
  content: "“";
  position: absolute;
  right: 14px;
  top: 1px;
  color: rgba(109, 91, 146, .14);
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
}

.journal-entry-quote > span {
  position: relative;
  display: block;
  margin-bottom: 11px;
  color: #766a8d;
  font-family: Arial, "Noto Sans SC", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.journal-entry-quote > p {
  position: relative;
  margin: 0;
  font-size: 17px;
  line-height: 1.68;
  white-space: pre-wrap;
}

.journal-entry-source {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(72, 62, 53, .1);
  color: #817a73;
  font-size: 12px;
  line-height: 1.5;
}

.journal-entry-source svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: #6c7898;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.journal-reading-archive {
  margin-top: 42px;
}

.journal-reading-archive > summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
  border-top: 1px solid rgba(72, 62, 53, .12);
  border-bottom: 1px solid rgba(72, 62, 53, .12);
  color: #625b54;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
  touch-action: manipulation;
}

.journal-reading-archive > summary::-webkit-details-marker {
  display: none;
}

.journal-reading-archive > summary small {
  min-width: 25px;
  min-height: 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e8e1d7;
  color: #776d63;
  font-size: 11px;
}

.journal-entry-paper .history-related-readings {
  margin: 12px 0 0;
  padding: 18px;
  border: 1px solid rgba(74, 61, 89, .1);
  border-radius: 18px;
  background: #f0ede7;
}

.journal-entry-paper .history-related-readings h2 {
  color: #4d4659;
}

.journal-entry-paper .history-detail-actions {
  margin-top: 42px;
  text-align: center;
}

.journal-entry-paper .history-detail-actions button {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(48, 52, 78, .2);
  border-radius: 999px;
  background: transparent;
  color: #3d4058;
  font-size: 15px;
  font-weight: 780;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 160ms ease, opacity 120ms ease;
}

.journal-entry-paper .history-delete-confirmation {
  margin-top: 32px;
}

.journal-evolved-page :where(
  .history-conversation-open,
  .journal-floating-action,
  .journal-tools > summary,
  .journal-new-entry,
  .history-load-more,
  .history-detail-actions button
):active {
  opacity: .78;
}

.journal-evolved-page :where(
  .history-conversation-open,
  .journal-floating-action,
  .journal-tools > summary,
  .journal-new-entry,
  .history-load-more,
  .history-detail-actions button
):focus-visible {
  outline: 3px solid rgba(71, 151, 174, .58);
  outline-offset: 3px;
}

.journal-entry-paper .history-delete-confirmation strong {
  font-size: 16px;
}

.journal-entry-paper .history-delete-confirmation p {
  font-size: 14px;
  line-height: 1.6;
}

@container (min-width: 680px) {
  .journal-index-header {
    margin-bottom: 52px;
  }

  .history-conversation-card {
    border-radius: 26px;
  }

  .journal-card-copy {
    padding: 30px 32px 26px;
  }

  .journal-card-copy > strong {
    font-size: 20px;
    -webkit-line-clamp: 4;
  }

  .journal-entry-body {
    font-size: 19px;
  }

  .journal-entry-paper {
    max-width: 680px;
    margin: 0 auto;
    padding-right: 54px;
    padding-left: 54px;
  }
}

@container (max-width: 360px) {
  .journal-evolved-page .page-shell {
    padding-right: 14px;
    padding-left: 14px;
  }

  .journal-card-copy {
    gap: 18px;
    padding: 20px 17px 18px;
  }

  .journal-card-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .journal-card-footer time {
    text-align: left;
  }

  .journal-detail-mode .page-shell {
    padding: 0;
  }

  .journal-detail-cover {
    height: clamp(238px, 68vw, 252px);
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .journal-evolved-page {
    --journal-header-top: 68px;
  }

  .journal-detail-mode .page-shell {
    padding: 0;
  }

  .journal-detail-cover {
    height: min(70dvh, 300px);
    min-height: 220px;
  }
}

/* v3.3 Fari Journal: Tolan's editorial rhythm with Fari's own companion world. */
.journal-cover-art {
  background:
    radial-gradient(circle at 20% 14%, rgba(119, 221, 222, .18), transparent 34%),
    linear-gradient(145deg, #111b3d, #392e57 64%, #8a5b63);
  isolation: isolate;
}

.journal-cover-art::before,
.journal-cover-art::after {
  content: none;
}

.journal-cover-art[data-tone="1"],
.journal-cover-art[data-tone="2"] {
  filter: none;
}

.journal-cover-art > img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -2%;
  width: 70%;
  height: 108%;
  object-fit: contain;
  object-position: 50% 50%;
  filter: saturate(.9) drop-shadow(0 14px 26px rgba(5, 9, 31, .38));
  transform: translateX(-50%);
}

.journal-cover-art[data-tone="1"] > img {
  left: 47%;
  filter: saturate(.86) hue-rotate(-8deg) drop-shadow(0 14px 26px rgba(5, 9, 31, .38));
}

.journal-cover-art[data-tone="2"] > img {
  left: 53%;
  filter: saturate(.84) hue-rotate(8deg) drop-shadow(0 14px 26px rgba(5, 9, 31, .38));
}

.journal-cover-vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at 52% 42%, transparent 20%, rgba(7, 14, 38, .12) 62%, rgba(7, 13, 34, .52) 100%),
    linear-gradient(180deg, rgba(8, 18, 49, .05), rgba(8, 16, 41, .48));
}

.journal-cover-orbit {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(112, 220, 224, .44);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(99, 199, 212, .14);
  transform: rotate(-12deg);
}

.journal-cover-orbit-one {
  width: 76%;
  height: 52%;
  left: 28%;
  top: 40%;
}

.journal-cover-orbit-two {
  width: 58%;
  height: 88%;
  left: -18%;
  top: 18%;
  border-color: rgba(243, 194, 115, .38);
  transform: rotate(25deg);
}

.journal-cover-stars {
  position: absolute;
  z-index: 4;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, #8fe9e8 0 1.2px, transparent 2px),
    radial-gradient(circle at 82% 16%, #f2c87f 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 70% 73%, #9fe6e2 0 1px, transparent 1.8px),
    radial-gradient(circle at 23% 78%, #f6d08f 0 1.2px, transparent 2px),
    radial-gradient(circle at 91% 48%, rgba(255,255,255,.9) 0 1px, transparent 1.8px);
  filter: drop-shadow(0 0 5px rgba(139, 221, 223, .62));
}

.journal-cover-signature {
  position: absolute;
  z-index: 5;
  left: 16px;
  bottom: 14px;
  color: rgba(255, 255, 255, .78);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .16em;
  text-shadow: 0 2px 9px rgba(6, 12, 32, .65);
}

.journal-detail-cover .journal-cover-art > img {
  top: -5%;
  width: 64%;
  height: 112%;
}

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

/* v2.32 Guidance-card density: quiet close affordance and progressive disclosure. */
.interface-layer .task-card .task-close {
  width: 48px;
  height: 48px;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .86);
  font-family: Arial, sans-serif;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, opacity 160ms ease;
}

.interface-layer .task-card:nth-child(2) .task-close,
.interface-layer .task-card.task-proactive .task-close {
  color: rgba(41, 42, 66, .74);
}

.interface-layer .task-card .task-close:hover,
.interface-layer .task-card .task-close:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
  opacity: .72;
}

.interface-layer .task-card:nth-child(2) .task-close:hover,
.interface-layer .task-card:nth-child(2) .task-close:active,
.interface-layer .task-card.task-proactive .task-close:hover,
.interface-layer .task-card.task-proactive .task-close:active {
  color: #292a42;
}

.interface-layer .task-card .task-close:focus:not(:focus-visible) {
  outline: 0;
}

.interface-layer .task-card .task-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -12px;
}

.interface-layer .task-card h1 {
  max-width: min(100%, 300px);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.interface-layer .task-card.has-home-continuity {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 18px 14px !important;
}

.interface-layer .task-card.has-home-continuity > span,
.interface-layer .task-card.has-home-continuity .line,
.interface-layer .task-card.has-home-continuity h1,
.interface-layer .task-card.has-home-continuity .home-card-meta,
.interface-layer .task-card.has-home-continuity .play {
  flex: 0 0 auto;
}

.interface-layer .task-card.has-home-continuity > span {
  max-width: calc(100% - 64px);
  min-height: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interface-layer .task-card.has-home-continuity .line {
  margin: 6px auto 7px !important;
}

.interface-layer .task-card.has-home-continuity h1 {
  width: 100%;
  min-height: 0;
  max-height: 40px;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.interface-layer .task-card.has-home-continuity .home-card-meta {
  width: min(100%, 276px);
  max-height: 14px;
  margin: 4px auto 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.interface-layer .task-card.has-home-continuity .play {
  min-height: 48px;
  margin-top: auto !important;
  margin-bottom: 0;
}

@media (max-width: 359px), (max-height: 700px) {
  .interface-layer .task-card.has-home-continuity {
    padding-top: 15px !important;
    padding-bottom: 11px !important;
  }

  .interface-layer .task-card.has-home-continuity .home-card-meta {
    display: none;
  }

  .interface-layer .task-card.has-home-continuity .line {
    margin-top: 5px !important;
    margin-bottom: 6px !important;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .interface-layer .task-card.has-home-continuity {
    padding: 10px 12px 8px !important;
  }

  .interface-layer .task-card.has-home-continuity h1 {
    max-height: 33px;
  }
}

/* Text chat starts with context or messages; keep the AI boundary accessible without a visual header. */
.phone.interaction-text .chat-panel-head {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* v2.34 Text chat voice: a compact autoplay control with explicit, accessible states. */
.chat-speech-toggle {
  display: none;
}

.chat-close svg,
.chat-speech-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phone.interaction-text #cardToggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.phone.interaction-text .chat-close {
  position: absolute;
  top: max(58px, calc(env(safe-area-inset-top) + 52px));
  right: auto;
  left: 50%;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
}

.phone.interaction-text .chat-speech-toggle {
  position: absolute;
  z-index: 5;
  top: max(58px, calc(env(safe-area-inset-top) + 52px));
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  box-shadow:
    0 8px 24px rgba(5, 16, 48, .16),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .76);
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
}

.phone.interaction-text .chat-speech-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.phone.interaction-text .chat-speech-toggle:active {
  transform: scale(.94);
}

.phone.interaction-text .chat-speech-toggle:focus-visible {
  outline: 3px solid rgba(176, 234, 240, .94);
  outline-offset: 3px;
}

.phone.interaction-text .chat-speech-toggle[data-state="on"],
.phone.interaction-text .chat-speech-toggle[data-state="preparing"],
.phone.interaction-text .chat-speech-toggle[data-state="speaking"] {
  border-color: rgba(181, 236, 237, .58);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .3), transparent 38%),
    rgba(102, 194, 205, .3);
  color: #f6ffff;
  box-shadow:
    0 8px 26px rgba(50, 191, 199, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.phone.interaction-text .chat-speech-toggle:disabled {
  opacity: .46;
  cursor: not-allowed;
}

.chat-speech-wave {
  opacity: 0;
  transform-origin: 12px 12px;
  transition: opacity 180ms ease;
}

.chat-speech-toggle[data-state="on"] .chat-speech-wave,
.chat-speech-toggle[data-state="preparing"] .chat-speech-wave,
.chat-speech-toggle[data-state="speaking"] .chat-speech-wave {
  opacity: 1;
}

.chat-speech-toggle[data-state="on"] .chat-speech-slash,
.chat-speech-toggle[data-state="preparing"] .chat-speech-slash,
.chat-speech-toggle[data-state="speaking"] .chat-speech-slash {
  opacity: 0;
}

.chat-speech-toggle[data-state="speaking"] .chat-speech-wave-one {
  animation: fari-chat-speech-wave 900ms ease-in-out infinite alternate;
}

.chat-speech-toggle[data-state="speaking"] .chat-speech-wave-two {
  animation: fari-chat-speech-wave 900ms ease-in-out 180ms infinite alternate;
}

@keyframes fari-chat-speech-wave {
  from {
    opacity: .45;
    transform: scale(.9);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .phone.interaction-text .chat-close,
  .phone.interaction-text .chat-speech-toggle {
    top: max(12px, calc(env(safe-area-inset-top) + 8px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone.interaction-text .chat-speech-toggle,
  .chat-speech-toggle[data-state="speaking"] .chat-speech-wave {
    transition: none;
    animation: none;
  }
}

.evolved-reduced-motion .phone.interaction-text .chat-speech-toggle,
.evolved-reduced-motion .chat-speech-toggle[data-state="speaking"] .chat-speech-wave {
  transition: none;
  animation: none;
}

/* v2.35 Tolan-like primary actions: camera, message, and live call only. */
.free-actions {
  left: max(18px, calc(env(safe-area-inset-left) + 12px));
  right: max(16px, calc(env(safe-area-inset-right) + 10px));
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: 0;
}

.free-actions button:first-child {
  margin-right: auto;
}

.free-actions button:nth-child(2) {
  margin-right: clamp(28px, 8vw, 32px);
}

.phone.interaction-text .chat-composer {
  min-height: 58px;
  padding: 5px;
  gap: 2px;
}

.phone.interaction-text .chat-composer input {
  min-width: 72px;
  padding: 0 4px;
}

.phone.interaction-text .chat-composer button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  touch-action: manipulation;
}

.phone.interaction-text .chat-composer button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phone.interaction-text .chat-media-action,
.phone.interaction-text .chat-dictation,
.phone.interaction-text .chat-speech-toggle {
  position: static;
  inset: auto;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #3b455b;
  transform: none;
  backdrop-filter: none;
}

.phone.interaction-text .chat-media-action:hover,
.phone.interaction-text .chat-dictation:hover,
.phone.interaction-text .chat-speech-toggle:hover {
  background: rgba(52, 69, 92, .08);
  color: #263149;
}

.phone.interaction-text .chat-media-action:active,
.phone.interaction-text .chat-dictation:active,
.phone.interaction-text .chat-speech-toggle:active {
  background: rgba(52, 69, 92, .12);
  transform: scale(.94);
}

.phone.interaction-text .chat-dictation > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.phone.interaction-text .chat-dictation.recording {
  background: rgba(233, 134, 170, .18);
  color: #a64268;
  box-shadow: 0 0 0 3px rgba(233, 134, 170, .1);
  transform: scale(.94);
}

.phone.interaction-text .chat-speech-toggle[data-state="on"],
.phone.interaction-text .chat-speech-toggle[data-state="preparing"],
.phone.interaction-text .chat-speech-toggle[data-state="speaking"] {
  border: 0;
  background: rgba(91, 191, 203, .16);
  color: #2d7883;
  box-shadow: none;
}

.phone.interaction-text .chat-speech-toggle:disabled {
  opacity: .34;
}

.phone.interaction-text .chat-send-action {
  border: 0;
  border-radius: 50%;
  background: #293149;
  color: #fff;
  box-shadow: 0 6px 16px rgba(25, 34, 60, .2);
}

.phone.interaction-text .chat-send-action:hover {
  background: #222a41;
}

.phone.interaction-text .chat-send-action:active {
  opacity: .82;
  transform: scale(.94);
}

@media (max-width: 350px) and (orientation: portrait) {
  .phone.interaction-text .chat-composer {
    gap: 0;
  }

  .phone.interaction-text .chat-composer button {
    width: 44px;
    min-width: 44px;
  }
}

/* v2.23 — reading guidance first, interactive tarot spread anchored below */
.tarot-ritual-guidance {
  display: grid;
  gap: 7px;
}

.tarot-ritual-footer .tarot-fan-instruction {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(100%, 300px);
  min-width: 0;
  min-height: 48px;
  margin: 0 auto;
  padding: 7px 14px 7px 43px;
  transform: none;
}

.tarot-ritual-footer .tarot-ritual-cue {
  position: static;
  display: grid;
  gap: 2px;
  padding: 0 8px;
  pointer-events: none;
}

.tarot-ritual-footer .tarot-ritual-cue span {
  font-size: 14px;
  line-height: 1.25;
}

.tarot-ritual-footer .tarot-ritual-cue small {
  line-height: 1.3;
}

@media (orientation: portrait) {
  .tarot-ritual-page #pageContent {
    overflow-y: hidden;
  }

  .tarot-ritual-shell {
    height: 100%;
    min-height: 100%;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .tarot-ritual-header,
  .tarot-ritual-shell > .tarot-question-echo,
  .tarot-ritual-footer {
    flex: 0 0 auto;
  }

  .tarot-ritual-footer {
    width: min(100%, 520px);
    margin: 14px auto 0;
  }

  .tarot-ritual-guidance {
    gap: 6px;
  }

  .tarot-ritual-footer .tarot-fan-instruction {
    min-height: 44px;
  }

  .tarot-ritual-shell .tarot-server-revealed {
    margin-bottom: 3px;
  }

  .tarot-ritual-progress {
    margin-top: 6px;
  }

  .tarot-ritual-shell .tarot-fixed-note {
    margin-top: 5px;
  }

  .tarot-ritual-actions {
    margin-top: 6px;
  }

  .tarot-ritual-actions .tarot-skip-ritual,
  .tarot-reshuffle {
    min-height: 44px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .tarot-ritual-stage {
    flex: 1 1 300px;
    min-height: 300px;
    max-height: none;
    margin-top: auto; /* Keep the interactive spread at the bottom. */
    margin-bottom: calc(-1 * max(8px, env(safe-area-inset-bottom)));
  }

  .tarot-fan-viewport {
    inset: 0;
  }

  .tarot-shuffle-stack {
    inset: auto 0 24px;
  }

  .tarot-shuffle-card {
    top: 0;
  }

  .tarot-ritual-orbit {
    top: 61%;
  }
}

@media (max-height: 720px) and (orientation: portrait) {
  .tarot-ritual-shell {
    padding-top: max(54px, calc(env(safe-area-inset-top) + 46px));
  }

  .tarot-ritual-footer {
    margin-top: 9px;
  }

  .tarot-ritual-guidance {
    gap: 3px;
  }

  .tarot-ritual-footer .tarot-fan-instruction {
    min-height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .tarot-ritual-footer .tarot-ritual-cue span {
    font-size: 13px;
  }

  .tarot-ritual-actions .tarot-skip-ritual,
  .tarot-reshuffle {
    min-height: 40px;
  }

  .tarot-ritual-stage {
    flex-basis: 260px;
    min-height: 260px;
  }
}

/* v2.24 — three-slot ritual, safe browsing gestures, and spatial card landing */
.tarot-ritual-shell {
  --ritual-surface: rgba(9, 22, 49, 0.58);
  --ritual-line: rgba(219, 235, 232, 0.16);
  --ritual-gold: #f6dda5;
  --ritual-mint: #8fd1c4;
}

.tarot-ritual-shell .tarot-ritual-prompt {
  font-size: clamp(27px, 6vw, 36px);
  line-height: 1.06;
}

.tarot-ritual-shell .tarot-server-kicker {
  margin-bottom: 5px;
  letter-spacing: 0.12em;
}

.tarot-sensory-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tarot-sensory-toggle {
  min-width: 44px;
  min-height: 44px;
  border-radius: 14px;
}

.tarot-ritual-slots.tarot-server-revealed {
  width: min(100%, 344px);
  min-height: 0;
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: repeat(var(--slot-count), minmax(0, 1fr));
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}

.tarot-ritual-slots.tarot-server-revealed[style*="--slot-count:1"] {
  width: 112px;
  grid-template-columns: 1fr;
}

.tarot-ritual-slots .tarot-ritual-slot {
  position: relative;
  min-width: 0;
  min-height: 118px;
  padding: 7px 6px 6px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  gap: 3px;
  border: 1px solid var(--ritual-line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    var(--ritual-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: rgba(232, 241, 236, 0.62);
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
}

.tarot-ritual-slots .tarot-ritual-slot.active {
  border-color: rgba(246, 221, 165, 0.64);
  background:
    radial-gradient(circle at 50% 38%, rgba(246, 221, 165, 0.12), transparent 54%),
    rgba(15, 32, 63, 0.82);
  box-shadow:
    0 0 0 1px rgba(246, 221, 165, 0.08),
    0 10px 28px rgba(1, 7, 24, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--ritual-gold);
}

.tarot-ritual-slots .tarot-ritual-slot.filled {
  border-color: rgba(143, 209, 196, 0.36);
  color: rgba(218, 240, 231, 0.9);
}

.tarot-slot-index {
  position: absolute;
  top: 7px;
  left: 8px;
  color: rgba(222, 236, 231, 0.42);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.tarot-slot-frame {
  width: 42px;
  aspect-ratio: 104 / 177;
  margin-top: 3px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(230, 240, 235, 0.18);
  border-radius: 7px;
  background: rgba(2, 10, 29, 0.28);
}

.tarot-slot-placeholder {
  position: relative;
  width: 17px;
  height: 28px;
  border: 1px solid rgba(230, 240, 235, 0.22);
  border-radius: 4px;
}

.tarot-slot-placeholder::before,
.tarot-slot-placeholder::after,
.tarot-slot-placeholder i {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tarot-slot-placeholder::before {
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
}

.tarot-slot-placeholder::after {
  width: 1px;
  height: 20px;
  background: currentColor;
  opacity: 0.34;
}

.tarot-slot-placeholder i {
  width: 12px;
  height: 1px;
  background: currentColor;
  opacity: 0.34;
}

.tarot-slot-card {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tarot-ritual-slot > b {
  width: 100%;
  overflow: hidden;
  color: currentColor;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-ritual-slot > small {
  width: 100%;
  overflow: hidden;
  color: rgba(216, 233, 226, 0.48);
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-ritual-slot.active > small {
  color: rgba(246, 221, 165, 0.72);
}

.tarot-ritual-footer .tarot-fan-instruction {
  display: none;
}

.tarot-ritual-footer .tarot-ritual-cue {
  min-height: 34px;
  gap: 2px;
}

.tarot-ritual-footer .tarot-ritual-cue span {
  color: #f8edcf;
  font-size: 14px;
}

.tarot-ritual-footer .tarot-ritual-cue small {
  color: rgba(210, 232, 224, 0.58);
  font-size: 10px;
}

.tarot-ritual-progress {
  margin-top: 7px;
}

.tarot-ritual-actions {
  margin-top: 7px;
}

.tarot-open-reading {
  width: min(100%, 236px);
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgba(246, 221, 165, 0.66);
  border-radius: 15px;
  background: linear-gradient(135deg, #e9d29a, #f8edc8);
  box-shadow: 0 12px 28px rgba(1, 7, 24, 0.24);
  color: #16313a;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.tarot-open-reading[hidden] {
  display: none;
}

.tarot-fan-viewport {
  touch-action: none;
}

.tarot-fan-card {
  transform:
    translate3d(
      calc(-50% + var(--fan-x)),
      calc(var(--fan-y) + var(--fan-lift, 0px)),
      0
    )
    rotate(var(--fan-rotation))
    scale(var(--fan-scale, 1));
}

.tarot-ritual-shell[data-ritual-phase="interactive"] .tarot-fan-card {
  transition:
    filter 180ms ease,
    opacity 180ms ease,
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tarot-fan-card.lifting {
  filter: brightness(1.16) drop-shadow(0 0 18px rgba(246, 221, 165, 0.42));
  transition: none !important;
}

.tarot-fan-card.awaiting-second-tap {
  --fan-lift: -8px;
  filter: brightness(1.18) drop-shadow(0 0 16px rgba(143, 209, 196, 0.46));
}

.tarot-selected-flight {
  position: absolute;
  z-index: 900;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  perspective: 1100px;
}

.tarot-flight-card {
  position: absolute;
  left: var(--flight-x);
  top: var(--flight-y);
  width: clamp(104px, 29vw, 126px);
  aspect-ratio: 104 / 177;
  transform: translate(-50%, -50%) scale(1);
  transition:
    left 320ms cubic-bezier(0.2, 0.78, 0.24, 1),
    top 320ms cubic-bezier(0.2, 0.78, 0.24, 1),
    transform 320ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.tarot-selected-flight.active .tarot-flight-card {
  left: var(--reveal-x);
  top: var(--reveal-y);
  transform: translate(-50%, -50%) scale(1.08);
}

.tarot-selected-flight.landing .tarot-flight-card {
  left: var(--slot-x);
  top: var(--slot-y);
  transform: translate(-50%, -50%) scale(var(--slot-scale));
}

.tarot-flight-shaker,
.tarot-flight-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.tarot-flight-inner {
  transition: transform 360ms cubic-bezier(0.2, 0.74, 0.28, 1);
}

.tarot-selected-flight.flipped .tarot-flight-inner {
  transform: rotateY(180deg);
}

.tarot-selected-flight.shaking .tarot-flight-shaker {
  animation: tarot-card-shiver 320ms ease-in-out both;
}

.tarot-flight-back,
.tarot-flight-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 244, 213, 0.16);
  backface-visibility: hidden;
  transition: none;
}

.tarot-flight-face {
  transform: rotateY(180deg);
}

.tarot-selected-flight.flipped .tarot-flight-back,
.tarot-selected-flight.flipped .tarot-flight-face {
  transform: none;
}

.tarot-selected-flight.flipped .tarot-flight-face {
  transform: rotateY(180deg);
}

@keyframes tarot-card-shiver {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  18% { transform: translate3d(-5px, 0, 0) rotate(-1.6deg); }
  36% { transform: translate3d(5px, -1px, 0) rotate(1.5deg); }
  54% { transform: translate3d(-3px, 0, 0) rotate(-0.9deg); }
  72% { transform: translate3d(3px, -1px, 0) rotate(0.7deg); }
}

@media (orientation: portrait) {
  .tarot-ritual-header {
    width: min(100%, 560px);
  }

  .tarot-ritual-footer {
    margin-top: 10px;
  }

  .tarot-ritual-stage {
    flex-basis: 286px;
    min-height: 286px;
  }

  .tarot-ritual-orbit {
    top: 67%;
    opacity: 0.62;
  }
}

@media (max-height: 720px) and (orientation: portrait) {
  .tarot-ritual-shell .tarot-ritual-prompt {
    font-size: clamp(23px, 5.7vw, 29px);
  }

  .tarot-ritual-slots .tarot-ritual-slot {
    min-height: 102px;
    padding-top: 5px;
  }

  .tarot-slot-frame {
    width: 35px;
  }

  .tarot-ritual-footer .tarot-ritual-cue {
    min-height: 28px;
  }

  .tarot-ritual-footer .tarot-ritual-cue span {
    font-size: 12px;
  }

  .tarot-ritual-actions {
    margin-top: 4px;
  }

  .tarot-ritual-stage {
    flex-basis: 228px;
    min-height: 228px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .tarot-ritual-slots.tarot-server-revealed {
    width: 100%;
    gap: 4px;
  }

  .tarot-ritual-slots .tarot-ritual-slot {
    min-height: 94px;
    padding: 5px 3px 4px;
    border-radius: 11px;
  }

  .tarot-slot-frame {
    width: 31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-flight-card,
  .tarot-flight-inner,
  .tarot-ritual-slot,
  .tarot-fan-card {
    transition-duration: 1ms !important;
  }

  .tarot-selected-flight.shaking .tarot-flight-shaker {
    animation: none;
  }
}

.evolved-reduced-motion .tarot-flight-card,
.evolved-reduced-motion .tarot-flight-inner,
.evolved-reduced-motion .tarot-ritual-slot {
  transition-duration: 1ms !important;
}

.evolved-reduced-motion .tarot-selected-flight.shaking .tarot-flight-shaker {
  animation: none;
}

/* v2.35.3 Chat hierarchy: Fari stays left; the user's messages step to the right. */
.phone.interaction-text .chat-bubble.fari,
.phone.interaction-text .chat-response > .chat-bubble.fari {
  max-width: min(100%, 220px);
  align-self: flex-start;
  justify-self: start;
}

.phone.interaction-text .chat-thread > .chat-bubble.user {
  max-width: min(100%, 208px);
  margin-left: auto;
  align-self: flex-end;
}

/* v2.35.4 Immersive live call: the companion is the scene, controls stay at the edge. */
.phone.interaction-call .interface-layer > :not(.chat-overlay),
.phone.interaction-call .task-zone,
.phone.interaction-call .pages,
.phone.interaction-call .task-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.phone.interaction-call .chat-overlay {
  background:
    radial-gradient(circle at 50% 38%, rgba(118, 210, 215, .22), transparent 29%),
    radial-gradient(circle at 52% 76%, rgba(147, 205, 128, .18), transparent 36%),
    linear-gradient(180deg, rgba(66, 174, 211, .18), rgba(15, 63, 124, .08) 48%, rgba(26, 42, 91, .34));
}

.phone.interaction-call .chat-close {
  top: max(18px, calc(env(safe-area-inset-top) + 12px));
  right: auto;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translateX(-50%);
  border: 0;
  background: rgba(255, 255, 255, .94);
  color: #25283c;
  box-shadow: 0 10px 28px rgba(8, 24, 57, .2);
}

.phone.interaction-call .chat-close:active {
  transform: translateX(-50%) scale(.94);
}

.phone.interaction-call .angel {
  top: 39dvh;
}

.phone.interaction-call .angel .sprite {
  transform: translateX(-50%) scale(4.25);
  filter: drop-shadow(0 24px 25px rgba(8, 24, 62, .22));
}

.phone.interaction-call .angel-glow {
  width: 330px;
  height: 330px;
  opacity: .9;
}

.phone.interaction-call .call-controls {
  inset: 0;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.phone.interaction-call .call-controls > strong {
  position: absolute;
  top: max(86px, calc(env(safe-area-inset-top) + 76px));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: #fff;
  font-size: 18px;
  text-shadow: 0 2px 16px rgba(4, 20, 51, .42);
}

.phone.interaction-call .call-status {
  position: absolute;
  top: max(113px, calc(env(safe-area-inset-top) + 103px));
  left: 50%;
  width: min(82%, 330px);
  min-height: 0;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .84);
  font-size: 10px;
  text-align: center;
  text-shadow: 0 2px 12px rgba(4, 20, 51, .38);
}

.phone.interaction-call .call-live-transcript {
  position: absolute;
  right: 22px;
  bottom: max(118px, calc(env(safe-area-inset-bottom) + 104px));
  left: 22px;
  width: auto;
  min-height: 0;
  max-height: 76px;
  margin: 0;
  padding: 10px 13px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  background: rgba(7, 29, 63, .34);
  opacity: 1;
  backdrop-filter: blur(14px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
}

.phone.interaction-call .call-live-transcript:has(p:empty) {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.phone.interaction-call .call-live-transcript p {
  min-height: 0;
}

.phone.interaction-call .call-context-note,
.phone.interaction-call .call-prototype-boundary,
.phone.interaction-call .call-orb {
  display: none;
}

.phone.interaction-call .call-bottom-bar {
  position: absolute;
  right: max(18px, calc(env(safe-area-inset-right) + 14px));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
  left: max(18px, calc(env(safe-area-inset-left) + 14px));
  display: grid;
  grid-template-columns: 52px 52px minmax(132px, 1fr);
  gap: 14px;
  align-items: center;
  pointer-events: auto;
}

.phone.interaction-call .call-camera-action,
.phone.interaction-call .call-text-action {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 29, 62, .26);
  color: #fff;
  font-size: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
}

.phone.interaction-call .call-camera-action::before,
.phone.interaction-call .call-text-action::before,
.phone.interaction-call .call-start::before,
.phone.interaction-call .call-mute::before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  margin: auto;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.phone.interaction-call .call-camera-action::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7.5h3l1.4-2h7.2l1.4 2h3v11H4zM12 10a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.phone.interaction-call .call-text-action::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v12H9l-5 3V5z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.phone.interaction-call .call-actions {
  width: 100%;
  height: 58px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px rgba(5, 22, 54, .25);
}

.phone.interaction-call .call-actions button {
  min-width: 0;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #25283c;
  font-size: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.phone.interaction-call .call-actions .call-start {
  background: #4dba91;
  color: #fff;
}

.phone.interaction-call .call-actions .call-start.live {
  background: #f25561;
  color: #fff;
}

.phone.interaction-call .call-start::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 5.5 10 4.7l2 4-2.2 1.6a12.5 12.5 0 0 0 4.1 4.1l1.6-2.2 4 2-.8 3.5c-.3 1.4-1.7 2.2-3.1 1.8-5.7-1.6-9.8-5.7-11.4-11.4-.4-1.3.4-2.4 2.3-2.6z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.phone.interaction-call .call-start.live::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 7 10 10M17 7 7 17' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.phone.interaction-call .call-mute::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3' width='6' height='11' rx='3' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M9 21h6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.phone.interaction-call .call-mute[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: #f25561;
  transform: rotate(-45deg);
}

.phone.interaction-call .call-mute {
  position: relative;
  display: grid;
  place-items: center;
}

.phone.interaction-call .call-session-actions {
  position: absolute;
  right: 22px;
  bottom: max(90px, calc(env(safe-area-inset-bottom) + 78px));
  left: 22px;
  margin: 0;
  pointer-events: auto;
}

.phone.interaction-call .call-session-actions button {
  min-height: 44px;
}

.phone.interaction-call .call-session-actions [data-call="speaker"],
.phone.interaction-call .call-session-actions [data-call="text-fallback"] {
  display: none;
}

@media (max-width: 360px) {
  .phone.interaction-call .angel .sprite {
    transform: translateX(-50%) scale(3.8);
  }

  .phone.interaction-call .call-bottom-bar {
    grid-template-columns: 48px 48px minmax(120px, 1fr);
    gap: 10px;
  }

  .phone.interaction-call .call-camera-action,
  .phone.interaction-call .call-text-action {
    width: 48px;
    height: 48px;
  }
}

@media (max-height: 700px) and (orientation: portrait) {
  .phone.interaction-call .angel {
    top: 35dvh;
  }

  .phone.interaction-call .angel .sprite {
    transform: translateX(-50%) scale(3.35);
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .phone.interaction-call .angel {
    left: 28%;
    top: 48%;
  }

  .phone.interaction-call .angel .sprite {
    transform: translateX(-50%) scale(2.15);
  }

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