:root {
  --danger: #a9322b;
  --success: #347253;
  --focus: #2368c4;
}

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 440px);
  aspect-ratio: 1;
}

.hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 44px #39271818);
}

.hero-visual > p {
  position: absolute;
  bottom: 1%;
  color: var(--muted);
  font-size: .6rem;
  letter-spacing: .1em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 72%, white);
  outline-offset: 3px;
}

button:disabled {
  cursor: wait;
  opacity: .55;
}

.storage-promise {
  margin: 10px 4px 0;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.55;
  text-align: center;
}

.reading-status {
  max-width: 800px;
  margin: -8px auto 24px;
  padding: 11px 14px;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  background: #ffffff0d;
  color: #d8d0c7;
  font-size: .72rem;
}

.reading-status[data-tone="complete"] {
  border-color: #70b18a66;
  background: #70b18a18;
  color: #bfe0cb;
}

.reading-status[data-tone="error"] {
  border-color: #f08b7b66;
  background: #f08b7b17;
  color: #ffd0c8;
}

.reading-placeholder {
  display: grid;
  gap: 12px;
  padding: 30px 0;
}

.reading-placeholder span,
.flow-loading span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff0c, #ffffff26, #ffffff0c);
  background-size: 240% 100%;
  animation: flow-shimmer 1.4s linear infinite;
}

.reading-placeholder span:nth-child(2) { width: 82%; }
.reading-placeholder span:nth-child(3) { width: 64%; }

@keyframes flow-shimmer {
  to { background-position: -240% 0; }
}

.reading-document-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ffffff20;
}

.reading-document-meta span {
  padding: 5px 9px;
  border: 1px solid #ffffff2c;
  border-radius: 999px;
  color: #ffb297;
  font-size: .66rem;
  font-weight: 800;
}

.reading-document-meta small {
  color: #9e9891;
  font-size: .64rem;
  text-align: right;
}

.reading-document-meta.is-pending span {
  border-color: #e3b65a55;
  color: #f0cb7d;
}

/* Preserve the original reading theme for the newly saved first question. */
.initial-question {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: var(--border-mid);
  border-radius: 16px 16px 4px 16px;
  background: var(--accent);
  color: white;
  box-shadow: var(--shadow-hard);
  overflow-wrap: anywhere;
}
.initial-question > small,
.initial-question > span { font-size: .7rem; font-weight: 900; color: white; }
.reading-document .initial-question h3,
.reading-document .initial-question p { margin: 6px 0 0; color: white; font-size: 1rem; font-weight: 800; line-height: 1.6; }
.reading-daily-button { display: flex; align-items: center; gap: 7px; min-height: 44px; margin-top: 12px; color: var(--neon-yellow); font-size: .8rem; }
.reading-daily-button .free-badge { text-decoration: none; }

.reading-document {
  padding-bottom: 220px;
}

.reading-document .report-subheading {
  margin: 46px 0 12px;
  color: #fff;
  font-size: clamp(1.2rem, 3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -.035em;
}

.reading-document .chapter-lede {
  color: #fff7ef;
  font-size: 1.05rem;
}

.reading-document p,
.reading-document li {
  color: #ddd6cf;
}

.reading-document ul,
.reading-document ol {
  padding-left: 1.25rem;
}

.reading-document .report-divider {
  margin: 38px 0;
  border: 0;
  border-top: 1px solid #ffffff24;
}

.reading-document .report-table-wrap {
  overflow-x: auto;
}

.reading-document table {
  width: 100%;
  border-collapse: collapse;
}

.reading-document th,
.reading-document td {
  padding: 10px;
  border: 1px solid #ffffff24;
  text-align: left;
}

/* Modern Messenger-style Consultation Thread */
.chat-block {
  margin-top: 28px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-bubble-user {
  align-self: flex-end;
  max-width: 86%;
  padding: 12px 16px;
  border: 2px solid #000000;
  border-radius: 18px 18px 4px 18px;
  background: #FF5B24;
  color: #FFFFFF;
  box-shadow: 3px 3px 0 #000000;
}

.chat-bubble-user .chat-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.chat-bubble-user .chat-block-head span {
  padding: 2px 6px;
  border: 1px solid #000000;
  border-radius: 4px;
  background: #1B1A17;
  color: #FAFF00;
  font-size: 0.65rem;
  font-weight: 900;
  box-shadow: 1px 1px 0 #000000;
}

.chat-block.is-private .chat-bubble-user {
  background: #E8501C;
  border-style: dashed;
}

.chat-block.is-private .chat-bubble-user .chat-block-head span {
  background: #1B1A17;
  color: #FFD84D;
}

.chat-bubble-user .chat-block-head small {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.64rem;
  font-weight: 600;
  text-align: right;
}

.chat-bubble-user .chat-q-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.chat-bubble-user .chat-q-label {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #1B1A17;
  color: #FAFF00;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 1px 1px 0 #000000;
}

.chat-bubble-user h3 {
  margin: 0;
  color: #FFFFFF;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.015em;
  word-break: break-word;
}

.chat-bubble-ai {
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
}

.ai-profile-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  padding-left: 2px;
}

.ai-avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #1B1A17;
  color: #FAFF00;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: 1.5px 1.5px 0 #FF5B24;
}

.ai-profile-head strong {
  font-size: 0.8rem;
  font-weight: 900;
  color: #1B1A17;
  letter-spacing: -0.01em;
}

.ai-profile-head small {
  font-size: 0.66rem;
  font-weight: 700;
  color: #7A756D;
}

.chat-answer {
  padding: 18px 20px;
  border: 2px solid #1B1A17;
  border-radius: 4px 20px 20px 20px;
  background: #FFFFFF;
  color: #1B1A17;
  box-shadow: 3.5px 3.5px 0 #1B1A17;
  margin-top: 0;
}

.chat-answer,
.chat-answer * {
  box-sizing: border-box;
}

/* Ensure no text is white/invisible inside .chat-answer */
.chat-answer .report-subheading,
.chat-answer h1,
.chat-answer h2,
.chat-answer h3,
.chat-answer h4,
.chat-answer h5,
.chat-answer h6 {
  color: #1B1A17 !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  margin: 16px 0 8px !important;
  letter-spacing: -0.02em !important;
  display: block !important;
}

.chat-answer > .report-subheading:first-child,
.chat-answer > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0 !important;
}

.chat-answer .chapter-lede {
  color: #1B1A17 !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
}

.chat-answer p,
.chat-answer li,
.chat-answer td,
.chat-answer th {
  color: #1B1A17 !important;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.75;
}

.chat-answer blockquote {
  border-left: 3.5px solid #FF5B24 !important;
  background: rgba(255, 91, 36, 0.08) !important;
  padding: 8px 12px !important;
  margin: 12px 0 !important;
  border-radius: 0 8px 8px 0 !important;
}

.chat-answer blockquote p {
  color: #262420 !important;
  margin: 0 !important;
}

.chat-answer .report-divider {
  border: 0 !important;
  border-top: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  margin: 16px 0 !important;
}

.chat-answer table {
  border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
  background: #FFFDF8 !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.chat-answer th,
.chat-answer td {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1B1A17 !important;
  padding: 8px 10px !important;
}

.chat-answer strong {
  background: #FAFF00;
  padding: 1px 5px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  color: #1B1A17;
  font-weight: 900;
}

.chat-answer > :first-child { margin-top: 0; }
.answer-error { color: #D92525 !important; font-weight: 800; }

.save-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  transition: opacity .2s ease;
}

.save-choice > div { display: flex; align-items: center; gap: 8px; }
.save-choice strong { color: rgba(255, 255, 255, 0.88); font-size: .72rem; font-weight: 800; }
.save-choice small { color: rgba(255, 255, 255, 0.5); font-size: .64rem; }
.save-choice.is-private { opacity: 0.85; }

.switch-control {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.switch-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-control i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: #524E48;
  transition: background .2s ease;
}

.switch-control i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform .2s ease;
}

.switch-control input:checked + i { background: var(--accent); }
.switch-control input:checked + i::after { transform: translateX(16px); }
.switch-control input:focus-visible + i { outline: 2px solid #FAFF00; outline-offset: 2px; }

.question-form textarea::placeholder { color: #a49f99; }
.question-form button small { display: block; font-size: .58rem; font-weight: 650; opacity: .76; }

.modal-lede,
.flow-heading p,
.wallet-note {
  margin: 0;
  color: var(--muted);
  font-size: .74rem;
}

.flow-modal {
  width: min(610px, calc(100% - 22px));
  max-height: min(86vh, 820px);
  padding: 0;
}

.wallet-shell {
  gap: 18px;
  max-height: min(86vh, 820px);
  overflow-y: auto;
}

.flow-heading {
  display: grid;
  gap: 4px;
  padding-right: 38px;
}

.flow-heading .section-label { margin-bottom: 3px; }
.flow-heading h2 { margin: 0; font-size: clamp(2rem, 7vw, 3.5rem); letter-spacing: -.065em; line-height: 1; }
.flow-heading p { max-width: 48ch; margin-top: 5px; }

.wallet-balance {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  padding: 18px;
}

.wallet-balance::after {
  content: 'Q';
  position: absolute;
  right: 110px;
  bottom: -31px;
  color: #ffffff0b;
  font: 900 7rem Georgia, serif;
  pointer-events: none;
}

.wallet-balance > div { display: grid; gap: 2px; z-index: 1; }
.wallet-balance span { color: #c8c1ba; font-size: .68rem; }
.wallet-balance strong { font-size: 2rem; line-height: 1; }
.wallet-balance button { position: relative; z-index: 1; font-size: .67rem; font-weight: 800; }

.flow-list-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  padding-top: 4px;
}

.flow-list-heading strong { font-size: .88rem; }
.flow-list-heading small { color: var(--muted); font-size: .61rem; text-align: right; }
.saved-list { display: grid; gap: 9px; }

.flow-account { margin: 0; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.subject-group { display: grid; gap: 8px; min-width: 0; padding: 14px 0; border-top: 2px solid var(--ink); }
.subject-group-heading { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.subject-group-heading > div { min-width: 0; }
.subject-group-heading h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.subject-group-heading p { margin: 7px 0 2px; color: var(--muted); font-size: .73rem; line-height: 1.6; overflow-wrap: anywhere; }
.subject-rename { flex-shrink: 0; min-height: 44px; font-size: .72rem; }
.reading-subject { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid currentColor; }
.reading-subject h3 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.reading-subject p { margin: 8px 0 0; font-size: .78rem; line-height: 1.7; opacity: .8; }
#subjectName, #renameSubjectInput { width: 100%; min-width: 0; min-height: 48px; }

.saved-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdfa;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.saved-item:hover {
  transform: translateY(-2px);
  border-color: #c6aa94;
  box-shadow: 0 12px 30px #4a2d1810;
}

.saved-open {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 11px;
  align-items: center;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.saved-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 48px;
  border-radius: 12px;
  background: var(--ink);
  color: #ffb297;
  font: 700 .78rem Georgia, serif;
}

.saved-open > span:last-child { display: grid; min-width: 0; }
.saved-open strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.saved-open small { color: var(--muted); font-size: .64rem; }
.saved-open em { margin-top: 5px; color: #b94120; font-size: .63rem; font-style: normal; font-weight: 800; }

.saved-delete {
  align-self: center;
  border: 0;
  background: transparent;
  color: #9a7c70;
  padding: 10px;
  font-size: .63rem;
  cursor: pointer;
}

.saved-delete:hover { color: var(--danger); }
.flow-empty { padding: 28px 18px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; }
.flow-empty strong { font-size: .9rem; }
.flow-empty p { margin: 7px auto 0; max-width: 40ch; color: var(--muted); font-size: .7rem; }
.flow-loading { display: grid; gap: 9px; padding: 15px; }
.flow-loading span { background: linear-gradient(90deg, #1716130c, #17161320, #1716130c); background-size: 240% 100%; }
.flow-loading span:last-child { width: 72%; }

.account-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.account-actions button { padding: 6px 0; color: var(--muted); font-size: .68rem; }
.account-actions .danger-text { color: var(--danger); }

.confirm-modal { width: min(440px, calc(100% - 22px)); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin-top: 8px; }
.dialog-actions .ghost-button { min-height: 46px; }
.danger-button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  padding: 11px 15px;
  font-weight: 850;
  cursor: pointer;
}

.modal-message { min-height: 1em; margin: 0; color: var(--danger); font-size: .7rem; }
.toast { max-width: calc(100% - 28px); text-align: center; box-shadow: 0 12px 40px #0003; }

/* Purchase remains a separate functional dialog in the original card style. */
.purchase-modal { max-height: calc(100dvh - 28px); overflow-y: auto; }
.purchase-shell { gap: 14px; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.purchase-shell h2 { margin: 0; padding-right: 18px; font-size: 1.6rem; font-weight: 900; line-height: 1.25; letter-spacing: -.04em; }
.purchase-symbol { display: grid; place-items: center; width: 44px; height: 44px; border: var(--border-mid); border-radius: 12px; background: var(--neon-yellow); color: var(--ink); box-shadow: var(--shadow-hard-sm); font-size: 1.65rem; transform: rotate(-3deg); }
.purchase-intent-box { padding: 12px 14px; border: var(--border-mid); border-radius: 12px; background: #FFF9E6; box-shadow: var(--shadow-hard-sm); }
.purchase-intent-box > span { color: var(--muted); font-size: .72rem; font-weight: 800; }
.purchase-intent-box p { max-height: 130px; overflow-y: auto; overflow-wrap: anywhere; margin: 5px 0 0; font-size: .9rem; font-weight: 700; line-height: 1.55; }
.purchase-benefits { margin: 0; color: var(--muted); font-size: .74rem; font-weight: 700; text-align: center; }
.modal-footnote { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.6; }
.restore-button { min-height: 44px; justify-self: center; font-size: .76rem; }
#purchaseContinue { height: auto; max-height: none; min-height: 52px; }

@media (max-width: 620px) {
  .hero-visual { width: 86vw; }

  .reading-document-meta,
  .flow-list-heading { align-items: flex-start; flex-direction: column; }

  .reading-document-meta small,
  .flow-list-heading small { text-align: left; }

  .chat-block { margin-top: 20px; gap: 10px; }
  .chat-bubble-user { max-width: 90%; padding: 10px 13px; border-radius: 16px 16px 3px 16px; }
  .chat-bubble-user h3 { font-size: 0.93rem; }
  .chat-answer { padding: 14px 14px; border-radius: 3px 16px 16px 16px; }
  .chat-answer p, .chat-answer li { font-size: 0.91rem; line-height: 1.68; }
  .save-choice { padding: 2px 4px; margin-bottom: 3px; }
  .save-choice small { display: none !important; }

  .flow-modal {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 28px);
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }

  .wallet-shell { max-height: calc(100dvh - 28px); padding: 22px 16px calc(24px + env(safe-area-inset-bottom)); }
  .wallet-balance { align-items: flex-start; gap: 14px; }
  .wallet-balance button { max-width: 155px; }
  .saved-open { grid-template-columns: 35px 1fr; }
  .saved-number { width: 35px; height: 44px; }
  .account-actions { align-items: flex-start; flex-direction: column; }
  .dialog-actions { grid-template-columns: 1fr; }
  .dialog-actions .danger-button { grid-row: 1; }
}

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