/* Initial conversation trial. Removing .initial-chat restores every later stage. */
body.ditarot-app:is(.initial-chat,.reading-chat) {
  --initial-input-height: 80px;
  --initial-chat-ruby: #57303e;
}

/* Keep the existing centered brand; reclaim a little welcome-only height. */
body.ditarot-app:is(.initial-chat,.reading-chat)[data-stage="welcome"]:not(.keyboard-open) .masthead {
  height: calc(238px + max(12px, env(safe-area-inset-top)));
  min-height: calc(238px + max(12px, env(safe-area-inset-top)));
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: 8px;
}

body.ditarot-app:is(.initial-chat,.reading-chat)[data-stage="welcome"]:not(.keyboard-open) .brand-art,
body.ditarot-app:is(.initial-chat,.reading-chat)[data-stage="welcome"]:not(.keyboard-open) .brand-art img {
  width: 170px;
  height: 134px;
}

body.ditarot-app:is(.initial-chat,.reading-chat)[data-stage="welcome"]:not(.keyboard-open) .about-link {
  top: 138px;
}

/* The one live history owns scrolling, including the very first message. */
body.ditarot-app:is(.initial-chat,.reading-chat) main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  overflow: hidden;
  padding-top: 10px !important;
  padding-bottom: 6px !important;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 8px 3px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 12px 0 20px;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation > .message {
  flex: 0 0 auto;
  width: fit-content;
  max-width: calc(100% - 28px);
  min-width: 0;
  margin: 0;
  padding: 12px 15px 13px;
  border: 1px solid #bba58066;
  text-align: left;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 #ede4d01a, 0 3px 12px #0d071a24;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation > .message.assistant {
  align-self: flex-start;
  border-radius: 17px 17px 17px 4px;
  background: linear-gradient(145deg, #3d323e, #2b2432);
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation > .message.user {
  align-self: flex-end;
  border-color: #d0ae7e80;
  border-radius: 17px 17px 4px 17px;
  background: linear-gradient(145deg, var(--initial-chat-ruby), #392334);
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .message.assistant > .speaker {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 6px;
  color: #dec799;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .18em;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .message > .speaker:before {
  font-size: 14px;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .message.assistant > .message-text {
  margin: 0;
  padding: 0;
  color: #f0e5d3;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  line-height: 1.4;
  text-align: left !important;
  letter-spacing: .005em;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .message.assistant > .message-text.small {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .message.user > .message-text {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #f1e2e5;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
  white-space: pre-wrap;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .message-note {
  margin-top: 10px;
  color: #c0b7c1;
  font-size: 12px;
  line-height: 1.6;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .message-options {
  justify-content: flex-start;
}

/* Reuse the existing three-dot lead-in and unchanged word-blur reveal. */
body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .typing-indicator {
  text-align: left;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .typing-dots {
  background: #21192680;
  color: #dec799;
  padding: 7px 10px;
}

/* Stay in the viewport's flex flow; never cover history or the safe area. */
body.ditarot-app:is(.initial-chat,.reading-chat) .composer-wrap {
  flex: 0 0 auto;
  padding-top: 7px !important;
  padding-bottom: max(11px, env(safe-area-inset-bottom)) !important;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 5px 10px;
  min-height: 0;
  padding: 10px 12px 9px;
  border-radius: 14px;
  background: linear-gradient(145deg, #362c3a, #292131);
}

/* 3 visible lines, growing to 5. The app writes --initial-input-height. */
body.ditarot-app:is(.initial-chat,.reading-chat) .composer textarea {
  grid-column: 1 / -1;
  box-sizing: border-box;
  width: 100%;
  height: clamp(80px, var(--initial-input-height, 80px), 128px) !important;
  min-height: 80px;
  max-height: 128px;
  margin: 0;
  padding: 4px 5px;
  border: 0;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .composer textarea::placeholder {
  color: #c2b7c7;
  text-align: left;
}



body.ditarot-app:is(.initial-chat,.reading-chat) .composer .send {
  grid-column: 2;
  justify-self: end;
  min-width: 86px;
  min-height: 44px;
  justify-content: center;
  margin: 0 3px 0 0;
  padding: 9px 16px;
  border-radius: 8px;
  touch-action: manipulation;
}

body.ditarot-app:is(.initial-chat,.reading-chat) .composer-foot {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3px 8px;
  margin-top: 7px;
  font-size: 10px;
}

/* Accepted final context: hide only the form, leaving text and controls live. */
body.ditarot-app:is(.initial-chat,.reading-chat).initial-chat-committed #question-form {
  display: none !important;
}

body.ditarot-app:is(.initial-chat,.reading-chat).keyboard-open main {
  padding-top: 5px !important;
  padding-bottom: 3px !important;
}

body.ditarot-app:is(.initial-chat,.reading-chat).keyboard-open .composer-wrap {
  padding-top: 4px !important;
  padding-bottom: max(5px, env(safe-area-inset-bottom)) !important;
}

@media (max-height: 720px) {
  body.ditarot-app:is(.initial-chat,.reading-chat)[data-stage="welcome"]:not(.keyboard-open) .masthead {
    height: calc(206px + max(8px, env(safe-area-inset-top)));
    min-height: calc(206px + max(8px, env(safe-area-inset-top)));
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  body.ditarot-app:is(.initial-chat,.reading-chat)[data-stage="welcome"]:not(.keyboard-open) .brand-art,
  body.ditarot-app:is(.initial-chat,.reading-chat)[data-stage="welcome"]:not(.keyboard-open) .brand-art img {
    width: 145px;
    height: 114px;
  }

  body.ditarot-app:is(.initial-chat,.reading-chat)[data-stage="welcome"]:not(.keyboard-open) .about-link {
    top: 113px;
  }
}

@media (max-width: 359px) {
  body.ditarot-app:is(.initial-chat,.reading-chat) main {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  body.ditarot-app:is(.initial-chat,.reading-chat) .conversation > .message {
    max-width: calc(100% - 18px);
    padding: 11px 13px 12px;
  }

  body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .message.assistant > .message-text {
    font-size: 21px;
  }
}

body.ditarot-app.reading-chat .message:not(.reading-chat-message){display:none}body.ditarot-app.reading-chat.reading-chat-committed #question-form,body.ditarot-app.reading-chat.reading-chat-limit #question-form{display:none!important}.reading-chat-controls{display:none}.reading-chat .reading-chat-controls{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:7px;margin:0 0 9px;color:var(--muted);font-size:10px}.reading-chat-controls[hidden]{display:none!important}.reading-chat-controls button{font:inherit;color:var(--gold-light);background:#302333;border:1px solid #ae8c5966;border-radius:7px;min-height:34px;padding:5px 7px}.reading-chat-controls button:disabled{opacity:.45}.reading-chat-controls button[hidden]{display:none!important}

/* Messenger conversation; compact brand, comfortable bubbles, no audio controls. */
body.ditarot-app:is(.initial-chat,.reading-chat) .masthead{height:110px!important;min-height:110px!important;padding:12px 20px!important;justify-content:center!important;border-bottom:1px solid var(--border)}
body.ditarot-app:is(.initial-chat,.reading-chat) .masthead .brand{flex-direction:column;gap:12px!important}
body.ditarot-app:is(.initial-chat,.reading-chat) .brand-art,body.ditarot-app:is(.initial-chat,.reading-chat) .brand-art img{width:60px!important;height:64px!important}
body.ditarot-app:is(.initial-chat,.reading-chat) .masthead .wordmark{align-items:center;text-align:center}
body.ditarot-app:is(.initial-chat,.reading-chat) .brand-digigin{font-size:12px!important}
body.ditarot-app:is(.initial-chat,.reading-chat) .brand-ditarot{font-size:28px!important}
body.ditarot-app:is(.initial-chat,.reading-chat) .brand-subtitle{font:11px/1.5 'DM Sans',sans-serif!important}
body.ditarot-app:is(.initial-chat,.reading-chat) .about-link{top:39px!important;right:18px;font-size:0}
body.ditarot-app:is(.initial-chat,.reading-chat) .conversation .message.assistant>.message-text{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.65}
body.ditarot-app:is(.initial-chat,.reading-chat) .conversation>.message{max-width:88%;border-color:#bba58030;padding:12px 15px}
body.ditarot-app:is(.initial-chat,.reading-chat) .conversation>.message.user{background:#4a3548}
body.ditarot-app:is(.initial-chat,.reading-chat) .composer{grid-template-columns:minmax(0,1fr) auto}
body.ditarot-app:is(.initial-chat,.reading-chat) .composer textarea{grid-column:1;grid-row:1}
body.ditarot-app:is(.initial-chat,.reading-chat) .composer .send{grid-row:1;grid-column:2}
@media(max-width:420px){body.ditarot-app:is(.initial-chat,.reading-chat) .composer .send{min-width:64px;padding:9px;font-size:13px}}