/* UI visual repair — scoped overrides only. */
[hidden]{display:none!important}

/* ---------------- Fortune selector: stable 2-column mobile layout ---------------- */
.fortune-choice-page .fortune-choice-grid,
[data-page="fortune-choice"] .fortune-choice-grid,
.fortune-choice-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
  margin-top:9px!important;
}
.fortune-choice-grid > .fortune-choice-card{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:136px!important;
  margin:0!important;
  padding:12px 12px 11px!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:18px!important;
  text-align:right!important;
  box-sizing:border-box!important;
  transform:none!important;
}
.fortune-choice-grid > .fortune-choice-card::before{
  pointer-events:none!important;
}
.fortune-choice-grid > .fortune-choice-card.is-featured{
  grid-column:1 / -1!important;
  min-height:152px!important;
  padding:14px!important;
}
.fortune-choice-grid > .fortune-choice-card.is-dream{
  grid-column:1 / -1!important;
  min-height:128px!important;
}
.fortune-choice-grid > .fortune-choice-card .fortune-choice-badge{
  position:absolute!important;
  z-index:5!important;
  top:10px!important;
  right:11px!important;
  left:auto!important;
  max-width:calc(100% - 55px)!important;
  min-height:22px!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:7.5px!important;
  line-height:1.25!important;
}
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy{
  position:relative!important;
  z-index:3!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:28px 0 0 54px!important;
  text-align:right!important;
}
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy small{
  display:block!important;
  margin:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:7.6px!important;
  line-height:1.45!important;
}
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy strong{
  display:block!important;
  margin:3px 0 0!important;
  font-size:13.2px!important;
  line-height:1.42!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy p{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  margin:5px 0 4px!important;
  font-size:8.2px!important;
  line-height:1.62!important;
  min-height:26px!important;
}
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy em{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  margin:4px 0 0!important;
  font-style:normal!important;
  font-size:7.6px!important;
  line-height:1.5!important;
}
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-visual{
  position:absolute!important;
  z-index:2!important;
  left:8px!important;
  right:auto!important;
  top:55%!important;
  bottom:auto!important;
  width:48px!important;
  height:66px!important;
  min-width:0!important;
  transform:translateY(-50%)!important;
  opacity:.92!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-visual img,
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-visual picture,
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-visual svg{
  display:block!important;
  max-width:100%!important;
  max-height:100%!important;
}
.fortune-choice-grid > .fortune-choice-card > .fortune-choice-visual img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.fortune-choice-grid > .fortune-choice-card > i{
  position:absolute!important;
  z-index:6!important;
  left:9px!important;
  right:auto!important;
  bottom:8px!important;
  top:auto!important;
  width:23px!important;
  height:23px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  font-size:10px!important;
  line-height:1!important;
}

/* Featured tarot gets room for its art, without stretching the entire selector. */
.fortune-choice-grid > .fortune-choice-card.is-featured > .fortune-choice-copy{
  padding-left:78px!important;
}
.fortune-choice-grid > .fortune-choice-card.is-featured > .fortune-choice-copy strong{
  font-size:17px!important;
}
.fortune-choice-grid > .fortune-choice-card.is-featured > .fortune-choice-copy p{
  font-size:8.7px!important;
}
.fortune-choice-grid > .fortune-choice-card.is-featured > .fortune-choice-visual{
  left:12px!important;
  top:54%!important;
  width:66px!important;
  height:92px!important;
  transform:translateY(-50%) rotate(-5deg)!important;
}

/* Dream stays a full-width compact strip. */
.fortune-choice-grid > .fortune-choice-card.is-dream > .fortune-choice-copy{
  padding-left:66px!important;
}
.fortune-choice-grid > .fortune-choice-card.is-dream > .fortune-choice-visual{
  left:11px!important;
  width:56px!important;
  height:56px!important;
  top:56%!important;
}

/* New generated art: use it as a controlled accent, never as an overflowing image. */
.fortune-choice-grid > .fortune-choice-card.is-hidden-personality,
.fortune-choice-grid > .fortune-choice-card.is-relationship-court{
  background-color:#111424!important;
}
.fortune-choice-grid > .fortune-choice-card.is-hidden-personality::after,
.fortune-choice-grid > .fortune-choice-card.is-relationship-court::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  opacity:.10;
  background-position:left center;
  background-repeat:no-repeat;
  background-size:150px auto;
  pointer-events:none;
}
.fortune-choice-grid > .fortune-choice-card.is-hidden-personality::after{
  background-image:url('../personality/personality-hero.webp');
}
.fortune-choice-grid > .fortune-choice-card.is-relationship-court::after{
  background-image:url('../relationship_court/court-hero.webp');
}
.fortune-choice-grid .personality-choice-mirror .fortune-choice-art,
.fortune-choice-grid .court-choice-symbol .fortune-choice-art{
  display:none!important;
}
.fortune-choice-grid .personality-choice-mirror .fortune-choice-symbol,
.fortune-choice-grid .court-choice-symbol .fortune-choice-symbol{
  position:absolute!important;
  inset:50% auto auto 50%!important;
  width:50px!important;
  height:50px!important;
  transform:translate(-50%,-50%)!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.26))!important;
}

/* Selector hero should remain compact even with the generated tarot symbol. */
.fortune-choice-hero{
  min-height:0!important;
  overflow:hidden!important;
}
.fortune-choice-hero > .fortune-choice-hero-art{
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  padding:3px!important;
  overflow:hidden!important;
}
.fortune-choice-hero > .fortune-choice-hero-art img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* ---------------- Home pair: must stay side-by-side on phones ---------------- */
.home-feature-pair{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  align-items:stretch!important;
}
.home-feature-pair > .home-reward-entry-wrap,
.home-feature-pair > .hamraz-home-card{
  min-width:0!important;
  width:100%!important;
  height:154px!important;
  min-height:154px!important;
  margin:0!important;
}
.home-feature-pair .home-reward-entry{
  width:100%!important;
  height:100%!important;
  min-height:154px!important;
}
.home-feature-pair > .hamraz-home-card{
  padding:12px!important;
  border-radius:21px!important;
}
.home-feature-pair > .hamraz-home-card .hamraz-home-art{
  width:96px!important;
  height:96px!important;
  right:-4px!important;
  top:8px!important;
  opacity:.58!important;
}
.home-feature-pair > .hamraz-home-card .hamraz-home-orb{
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  padding:6px!important;
  border-radius:14px!important;
}
.home-feature-pair > .hamraz-home-card .hamraz-home-copy{
  position:relative!important;
  z-index:3!important;
  gap:2px!important;
}
.home-feature-pair > .hamraz-home-card .hamraz-home-copy small{
  font-size:8px!important;
}
.home-feature-pair > .hamraz-home-card .hamraz-home-copy b{
  font-size:20px!important;
}
.home-feature-pair > .hamraz-home-card .hamraz-home-copy em{
  font-size:8.5px!important;
  line-height:1.45!important;
}
.home-feature-pair > .hamraz-home-card .hamraz-home-go{
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  border-radius:11px!important;
}
.home-feature-pair:has(#hamrazHomeCard[hidden]){
  grid-template-columns:minmax(0,1fr)!important;
}
.home-feature-pair:has(#hamrazHomeCard[hidden]) > .home-reward-entry-wrap{
  grid-column:1/-1!important;
  width:100%!important;
}

/* ---------------- Hamraz: constrain artwork + preserve chat usable area ---------------- */
.hamraz-page .hamraz-onboarding-card,
.hamraz-page .hamraz-purchase-card,
.hamraz-page .hamraz-chat{
  max-width:760px!important;
  margin-inline:auto!important;
}
.hamraz-page .hamraz-onboarding-hero{
  height:190px!important;
  max-height:32vh!important;
  overflow:hidden!important;
}
.hamraz-page .hamraz-onboarding-main-art{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.hamraz-page .hamraz-onboarding-chip{
  width:48px!important;
  height:48px!important;
  padding:6px!important;
}
.hamraz-page .hamraz-onboarding-chip img,
.hamraz-page .hamraz-purchase-symbol img,
.hamraz-page .hamraz-purchase-symbols img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.hamraz-page .hamraz-composer-wrap{
  max-width:760px!important;
  margin-inline:auto!important;
}
.hamraz-page .hamraz-textbox,
.hamraz-page .hamraz-textbox textarea{
  min-width:0!important;
}
.hamraz-page .hamraz-purchase-hero{
  overflow:hidden!important;
}
.hamraz-page .hamraz-packages-grid > *{
  min-width:0!important;
  overflow:hidden!important;
}

/* ---------------- New feature pages: no image overflow, buttons stay page-scoped ---------------- */
.personality-page .personality-hero,
.rc-page .rc-hero-panel{
  max-width:820px!important;
  margin-inline:auto!important;
}
.personality-page .personality-hero-art,
.rc-page .rc-hero-visual{
  overflow:hidden!important;
}
.personality-page .personality-hero-figure,
.rc-page .rc-hero-figure{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.personality-page .personality-hero-emblem,
.rc-page .rc-hero-emblem,
.personality-page .personality-access-symbol img,
.rc-page .rc-access-seal img,
.personality-page .personality-scan img{
  object-fit:contain!important;
}
.personality-page button,
.rc-page button,
.hamraz-page button{
  max-width:100%;
}

@media (max-width:560px){
  .fortune-choice-grid{
    gap:7px!important;
  }
  .fortune-choice-grid > .fortune-choice-card{
    min-height:140px!important;
    padding:11px 10px 10px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy{
    padding-left:46px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy strong{
    font-size:12px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy p{
    font-size:7.7px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy em{
    font-size:7.2px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-visual{
    left:6px!important;
    width:42px!important;
    height:58px!important;
  }
  .fortune-choice-grid > .fortune-choice-card.is-featured{
    min-height:148px!important;
  }
  .fortune-choice-grid > .fortune-choice-card.is-featured > .fortune-choice-copy{
    padding-left:68px!important;
  }
  .fortune-choice-grid > .fortune-choice-card.is-featured > .fortune-choice-visual{
    width:58px!important;
    height:82px!important;
  }
  .fortune-choice-grid > .fortune-choice-card.is-dream{
    min-height:126px!important;
  }
  .fortune-choice-grid > .fortune-choice-card.is-dream > .fortune-choice-copy{
    padding-left:59px!important;
  }
  .home-feature-pair{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .home-feature-pair > .home-reward-entry-wrap,
  .home-feature-pair > .hamraz-home-card,
  .home-feature-pair .home-reward-entry{
    height:146px!important;
    min-height:146px!important;
  }
  .personality-page .personality-hero,
  .rc-page .rc-hero-panel{
    grid-template-columns:1fr!important;
  }
  .personality-page .personality-hero-art,
  .rc-page .rc-hero-visual{
    height:170px!important;
  }
}

@media (max-width:360px){
  .fortune-choice-grid > .fortune-choice-card{
    min-height:145px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy{
    padding-left:40px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy small{
    font-size:6.9px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy strong{
    font-size:11.3px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-copy p{
    font-size:7.2px!important;
  }
  .fortune-choice-grid > .fortune-choice-card > .fortune-choice-visual{
    left:4px!important;
    width:36px!important;
    height:52px!important;
  }
  .home-feature-pair{
    gap:7px!important;
  }
  .home-feature-pair > .hamraz-home-card{
    padding:10px!important;
  }
  .home-feature-pair > .hamraz-home-card .hamraz-home-orb{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
  }
  .home-feature-pair > .hamraz-home-card .hamraz-home-copy b{
    font-size:18px!important;
  }
}

/* ---------------- Personality missing interactive states ---------------- */
.personality-page .personality-months{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
}
.personality-page .personality-months > button,
.personality-page .personality-options > button{
  min-width:0!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.055)!important;
  color:#f6effa!important;
  box-shadow:none!important;
  font-weight:700!important;
}
.personality-page .personality-months > button{
  min-height:42px!important;
  padding:7px 5px!important;
  font-size:11px!important;
}
.personality-page .personality-options{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
  margin-top:14px!important;
}
.personality-page .personality-options > button{
  min-height:50px!important;
  padding:12px 14px!important;
  text-align:right!important;
  line-height:1.65!important;
}
.personality-page .personality-months > button.is-active,
.personality-page .personality-months > button[aria-pressed="true"],
.personality-page .personality-months > button[data-selected="true"],
.personality-page .personality-options > button.is-active,
.personality-page .personality-options > button[aria-pressed="true"],
.personality-page .personality-options > button[data-selected="true"]{
  border-color:rgba(246,199,98,.46)!important;
  background:linear-gradient(145deg,rgba(244,190,99,.18),rgba(122,77,179,.12))!important;
  color:#ffe8b2!important;
  box-shadow:0 8px 18px rgba(244,190,99,.10)!important;
}
.personality-page .personality-hit-list{
  display:grid!important;
  gap:9px!important;
  margin:14px 0!important;
}
.personality-page .personality-hit-list > *{
  padding:13px 14px!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  color:#f1e9f7!important;
  line-height:1.8!important;
}
.personality-page .personality-result-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:14px!important;
}
.personality-page .personality-result-grid > *{
  min-width:0!important;
  padding:14px!important;
  border-radius:19px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  color:#f1e9f7!important;
  line-height:1.8!important;
}

/* ---------------- Relationship court missing interactive/stage views ---------------- */
.rc-page .rc-status-grid,
.rc-page .rc-goal-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
.rc-page .rc-status-grid > button,
.rc-page .rc-goal-grid > button,
.rc-page .rc-answer-options > button{
  min-width:0!important;
  min-height:50px!important;
  padding:11px 12px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.055)!important;
  color:#f6effa!important;
  text-align:right!important;
  line-height:1.65!important;
  box-shadow:none!important;
  font-weight:700!important;
}
.rc-page .rc-status-grid > button.is-active,
.rc-page .rc-status-grid > button[aria-pressed="true"],
.rc-page .rc-status-grid > button[data-selected="true"],
.rc-page .rc-goal-grid > button.is-active,
.rc-page .rc-goal-grid > button[aria-pressed="true"],
.rc-page .rc-goal-grid > button[data-selected="true"],
.rc-page .rc-answer-options > button.is-active,
.rc-page .rc-answer-options > button[aria-pressed="true"],
.rc-page .rc-answer-options > button[data-selected="true"]{
  border-color:rgba(246,199,98,.46)!important;
  background:linear-gradient(145deg,rgba(244,190,99,.18),rgba(122,77,179,.12))!important;
  color:#ffe8b2!important;
  box-shadow:0 8px 18px rgba(244,190,99,.10)!important;
}
.rc-page .rc-custom-field{
  margin-top:12px!important;
}
.rc-page .rc-question-panel,
.rc-page .rc-interrogator,
.rc-page .rc-verdict-loading{
  text-align:right!important;
}
.rc-page .rc-interrogator,
.rc-page .rc-verdict-loading{
  padding:20px!important;
  text-align:center!important;
}
.rc-page .rc-interrogator > small,
.rc-page .rc-verdict-loading > small{
  color:#d8cadf!important;
}
.rc-page .rc-interrogator > h2,
.rc-page .rc-verdict-loading > h2{
  margin:6px 0 8px!important;
  color:#ffe4a5!important;
  font-size:24px!important;
}
.rc-page .rc-interrogator > p,
.rc-page .rc-verdict-loading > p{
  color:#efe7f6!important;
  line-height:1.8!important;
}
.rc-page .rc-investigator-stage,
.rc-page .rc-court-stage{
  position:relative!important;
  width:132px!important;
  height:132px!important;
  margin:0 auto 14px!important;
  border-radius:34px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle,rgba(255,221,139,.16),transparent 60%),
    url('../relationship_court/court-balance.webp') center/116px 116px no-repeat!important;
  border:1px solid rgba(255,224,151,.12)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.22)!important;
}
.rc-page .rc-investigator-stage > *,
.rc-page .rc-court-stage > *{
  display:none!important;
}
.rc-page .rc-verdict-code{
  display:block!important;
  margin-top:10px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  color:#ffeab9!important;
  line-height:1.7!important;
  overflow-wrap:anywhere!important;
}

/* ---------------- Hamraz static fallbacks for generated content ---------------- */
.hamraz-page .hamraz-package-stage,
.hamraz-page .hamraz-purchase-modal{
  min-width:0!important;
}
.hamraz-page .hamraz-messages{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
.hamraz-page .hamraz-messages > .hamraz-message,
.hamraz-page .hamraz-messages > [data-role],
.hamraz-page .hamraz-messages > article{
  max-width:88%!important;
  min-width:0!important;
  padding:11px 13px!important;
  border-radius:17px 17px 6px 17px!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.055)!important;
  color:#f6effa!important;
  line-height:1.8!important;
  overflow-wrap:anywhere!important;
}
.hamraz-page .hamraz-messages > .is-user,
.hamraz-page .hamraz-messages > [data-role="user"],
.hamraz-page .hamraz-messages > .hamraz-message.is-user{
  align-self:flex-start!important;
  border-radius:17px 17px 17px 6px!important;
  background:linear-gradient(145deg,rgba(218,170,70,.22),rgba(113,75,166,.12))!important;
  border-color:rgba(239,196,101,.12)!important;
}
.hamraz-page .hamraz-messages > .is-assistant,
.hamraz-page .hamraz-messages > [data-role="assistant"],
.hamraz-page .hamraz-messages > .hamraz-message.is-assistant{
  align-self:flex-end!important;
}

@media (max-width:560px){
  .personality-page .personality-months{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .personality-page .personality-result-grid,
  .rc-page .rc-status-grid,
  .rc-page .rc-goal-grid{
    grid-template-columns:1fr!important;
  }
}

/* ========================================================================== */
/* Selection clarity + Hamraz Telegram-like fixed chat viewport — v3          */
/* ========================================================================== */

/* ---- Selection states: make the chosen item unmistakable everywhere. ---- */
.month-option,
.personality-page .personality-months > button,
.personality-page .personality-options > button,
.rc-page .rc-status-grid > button,
.rc-page .rc-goal-grid > button,
.rc-page .rc-answer-options > button{
  position:relative!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease!important;
}

.month-option.is-selected,
.month-option.is-active,
.month-option[aria-checked="true"],
.month-option[aria-pressed="true"],
.month-option[aria-selected="true"],
.month-option[data-selected="true"],
.personality-page .personality-months > button.is-selected,
.personality-page .personality-months > button.is-active,
.personality-page .personality-months > button.selected,
.personality-page .personality-months > button[aria-checked="true"],
.personality-page .personality-months > button[aria-pressed="true"],
.personality-page .personality-months > button[aria-selected="true"],
.personality-page .personality-months > button[data-selected="true"],
.personality-page .personality-options > button.is-selected,
.personality-page .personality-options > button.is-active,
.personality-page .personality-options > button.selected,
.personality-page .personality-options > button[aria-checked="true"],
.personality-page .personality-options > button[aria-pressed="true"],
.personality-page .personality-options > button[aria-selected="true"],
.personality-page .personality-options > button[data-selected="true"],
.rc-page .rc-status-grid > button.is-selected,
.rc-page .rc-status-grid > button.is-active,
.rc-page .rc-status-grid > button.selected,
.rc-page .rc-status-grid > button[aria-checked="true"],
.rc-page .rc-status-grid > button[aria-pressed="true"],
.rc-page .rc-status-grid > button[aria-selected="true"],
.rc-page .rc-status-grid > button[data-selected="true"],
.rc-page .rc-goal-grid > button.is-selected,
.rc-page .rc-goal-grid > button.is-active,
.rc-page .rc-goal-grid > button.selected,
.rc-page .rc-goal-grid > button[aria-checked="true"],
.rc-page .rc-goal-grid > button[aria-pressed="true"],
.rc-page .rc-goal-grid > button[aria-selected="true"],
.rc-page .rc-goal-grid > button[data-selected="true"],
.rc-page .rc-answer-options > button.is-selected,
.rc-page .rc-answer-options > button.is-active,
.rc-page .rc-answer-options > button.selected,
.rc-page .rc-answer-options > button[aria-checked="true"],
.rc-page .rc-answer-options > button[aria-pressed="true"],
.rc-page .rc-answer-options > button[aria-selected="true"],
.rc-page .rc-answer-options > button[data-selected="true"]{
  z-index:1!important;
  transform:translateY(-2px)!important;
  border-color:#f6cd70!important;
  color:#fff2c9!important;
  background:
    radial-gradient(circle at 85% 20%,rgba(255,226,150,.18),transparent 38%),
    linear-gradient(145deg,rgba(203,149,51,.34),rgba(96,58,145,.28))!important;
  box-shadow:
    0 0 0 2px rgba(246,205,112,.14),
    0 10px 24px rgba(215,161,66,.20),
    inset 0 1px 0 rgba(255,245,211,.18)!important;
  font-weight:900!important;
}

.month-option.is-selected::after,
.month-option.is-active::after,
.month-option[aria-checked="true"]::after,
.month-option[aria-pressed="true"]::after,
.month-option[aria-selected="true"]::after,
.month-option[data-selected="true"]::after,
.personality-page .personality-months > button.is-selected::after,
.personality-page .personality-months > button.is-active::after,
.personality-page .personality-months > button.selected::after,
.personality-page .personality-months > button[aria-checked="true"]::after,
.personality-page .personality-months > button[aria-pressed="true"]::after,
.personality-page .personality-months > button[aria-selected="true"]::after,
.personality-page .personality-months > button[data-selected="true"]::after,
.personality-page .personality-options > button.is-selected::after,
.personality-page .personality-options > button.is-active::after,
.personality-page .personality-options > button.selected::after,
.personality-page .personality-options > button[aria-checked="true"]::after,
.personality-page .personality-options > button[aria-pressed="true"]::after,
.personality-page .personality-options > button[aria-selected="true"]::after,
.personality-page .personality-options > button[data-selected="true"]::after,
.rc-page .rc-status-grid > button.is-selected::after,
.rc-page .rc-status-grid > button.is-active::after,
.rc-page .rc-status-grid > button.selected::after,
.rc-page .rc-status-grid > button[aria-checked="true"]::after,
.rc-page .rc-status-grid > button[aria-pressed="true"]::after,
.rc-page .rc-status-grid > button[aria-selected="true"]::after,
.rc-page .rc-status-grid > button[data-selected="true"]::after,
.rc-page .rc-goal-grid > button.is-selected::after,
.rc-page .rc-goal-grid > button.is-active::after,
.rc-page .rc-goal-grid > button.selected::after,
.rc-page .rc-goal-grid > button[aria-checked="true"]::after,
.rc-page .rc-goal-grid > button[aria-pressed="true"]::after,
.rc-page .rc-goal-grid > button[aria-selected="true"]::after,
.rc-page .rc-goal-grid > button[data-selected="true"]::after,
.rc-page .rc-answer-options > button.is-selected::after,
.rc-page .rc-answer-options > button.is-active::after,
.rc-page .rc-answer-options > button.selected::after,
.rc-page .rc-answer-options > button[aria-checked="true"]::after,
.rc-page .rc-answer-options > button[aria-pressed="true"]::after,
.rc-page .rc-answer-options > button[aria-selected="true"]::after,
.rc-page .rc-answer-options > button[data-selected="true"]::after{
  content:"✓"!important;
  position:absolute!important;
  left:7px!important;
  top:7px!important;
  width:21px!important;
  height:21px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#ffe297,#d69b31)!important;
  color:#25150a!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:0 5px 12px rgba(0,0,0,.24)!important;
}

/* Keep selected month text away from the check badge. */
.month-option.is-selected,
.month-option[aria-checked="true"],
.personality-page .personality-months > button.is-selected,
.personality-page .personality-months > button[aria-pressed="true"],
.personality-page .personality-months > button[aria-selected="true"]{
  padding-left:30px!important;
}

.selected-month{
  min-height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  background:rgba(244,190,99,.10)!important;
  border:1px solid rgba(244,190,99,.18)!important;
  color:#f3d885!important;
  font-weight:800!important;
}

/* ---- Hamraz route: page itself never scrolls; only messages do. ---- */
body.hamraz-route-active{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.hamraz-route-active .app-shell{
  height:var(--app-viewport-height,100dvh)!important;
  min-height:var(--app-viewport-height,100dvh)!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}
body.hamraz-route-active #hamrazPage.hamraz-page{
  height:calc(var(--app-viewport-height,100dvh) - var(--nav-height) - var(--safe-bottom))!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.hamraz-route-active #hamrazPage .hamraz-shell{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  overflow:hidden!important;
}
body.hamraz-route-active #hamrazPage .hamraz-topbar{
  position:relative!important;
  top:auto!important;
  flex:0 0 auto!important;
}
body.hamraz-route-active #hamrazPage .hamraz-body{
  height:auto!important;
  min-height:0!important;
  padding:10px 12px 0!important;
  overflow:hidden!important;
}
body.hamraz-route-active #hamrazPage .hamraz-onboarding{
  height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  padding-bottom:18px!important;
}
body.hamraz-route-active #hamrazPage .hamraz-chat{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  overflow:hidden!important;
  border-radius:24px 24px 0 0!important;
}
body.hamraz-route-active #hamrazPage .hamraz-messages{
  position:relative!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  padding:16px 14px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-behavior:smooth!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(240,197,101,.32) transparent!important;
}
body.hamraz-route-active #hamrazPage .hamraz-messages::-webkit-scrollbar{width:4px!important;}
body.hamraz-route-active #hamrazPage .hamraz-messages::-webkit-scrollbar-track{background:transparent!important;}
body.hamraz-route-active #hamrazPage .hamraz-messages::-webkit-scrollbar-thumb{background:rgba(240,197,101,.30)!important;border-radius:999px!important;}

body.hamraz-route-active #hamrazPage .hamraz-composer-wrap{
  position:relative!important;
  inset:auto!important;
  bottom:auto!important;
  flex:0 0 auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px))!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  background:linear-gradient(180deg,rgba(13,15,29,.88),rgba(8,10,22,.98))!important;
  box-shadow:0 -12px 28px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(18px)!important;
}
body.hamraz-route-active #hamrazPage .hamraz-composer{
  grid-template-columns:52px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:end!important;
}
body.hamraz-route-active #hamrazPage .hamraz-send{
  width:52px!important;
  height:52px!important;
  border-radius:17px!important;
}
body.hamraz-route-active #hamrazPage .hamraz-textbox{
  border-radius:19px!important;
  padding:5px 8px!important;
}
body.hamraz-route-active #hamrazPage .hamraz-textbox textarea{
  min-height:48px!important;
  max-height:132px!important;
  padding:12px 8px 12px 52px!important;
  line-height:1.75!important;
  overflow-y:auto!important;
}
body.hamraz-route-active #hamrazPage .hamraz-counter{
  left:13px!important;
  bottom:9px!important;
}
body.hamraz-route-active #hamrazPage .hamraz-scroll-bottom{
  position:absolute!important;
  left:14px!important;
  bottom:82px!important;
  z-index:8!important;
}

/* Telegram-like message rows/bubbles. Supports several likely renderer class names. */
#hamrazMessages{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  align-items:stretch!important;
}
#hamrazMessages > *{
  min-width:0!important;
  max-width:min(86%,620px)!important;
  width:fit-content!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  text-align:right!important;
}
#hamrazMessages > .is-user,
#hamrazMessages > [data-role="user"],
#hamrazMessages > [data-message-role="user"],
#hamrazMessages > .user,
#hamrazMessages > .hamraz-message-user{
  align-self:flex-end!important;
}
#hamrazMessages > .is-assistant,
#hamrazMessages > [data-role="assistant"],
#hamrazMessages > [data-message-role="assistant"],
#hamrazMessages > .assistant,
#hamrazMessages > .hamraz-message-assistant{
  align-self:flex-start!important;
}

#hamrazMessages > .hamraz-message,
#hamrazMessages > [data-role],
#hamrazMessages > [data-message-role],
#hamrazMessages > article,
#hamrazMessages > .message-row,
#hamrazMessages > .hamraz-message-row,
#hamrazMessages > * > .hamraz-bubble,
#hamrazMessages > * > .message-bubble,
#hamrazMessages > * > .bubble,
#hamrazMessages > * > .hamraz-message-content{
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:18px 18px 7px 18px!important;
  background:linear-gradient(145deg,rgba(31,31,50,.96),rgba(21,23,39,.97))!important;
  box-shadow:0 6px 16px rgba(0,0,0,.12)!important;
}

/* If the direct child itself is the bubble, give it spacing; if it is a row, style child bubble. */
#hamrazMessages > .hamraz-message,
#hamrazMessages > [data-role],
#hamrazMessages > [data-message-role],
#hamrazMessages > article{
  padding:10px 12px!important;
}
#hamrazMessages > * > .hamraz-bubble,
#hamrazMessages > * > .message-bubble,
#hamrazMessages > * > .bubble,
#hamrazMessages > * > .hamraz-message-content{
  padding:10px 12px!important;
}

#hamrazMessages > .is-user,
#hamrazMessages > [data-role="user"],
#hamrazMessages > [data-message-role="user"],
#hamrazMessages > .user,
#hamrazMessages > .hamraz-message-user,
#hamrazMessages > .is-user > .hamraz-bubble,
#hamrazMessages > [data-role="user"] > .hamraz-bubble,
#hamrazMessages > [data-message-role="user"] > .hamraz-bubble{
  border-radius:18px 18px 18px 7px!important;
  border-color:rgba(239,196,101,.13)!important;
  background:linear-gradient(145deg,rgba(180,127,43,.30),rgba(91,61,132,.22))!important;
}

#hamrazMessages > .is-assistant,
#hamrazMessages > [data-role="assistant"],
#hamrazMessages > [data-message-role="assistant"],
#hamrazMessages > .assistant,
#hamrazMessages > .hamraz-message-assistant{
  border-radius:18px 18px 7px 18px!important;
}

#hamrazMessages p,
#hamrazMessages .hamraz-message-text,
#hamrazMessages .hamraz-text,
#hamrazMessages .message-text,
#hamrazMessages .bubble-text{
  margin:0!important;
  padding:0!important;
  color:#f7f1fb!important;
  font-size:13.5px!important;
  line-height:1.95!important;
  text-align:right!important;
  direction:rtl!important;
  unicode-bidi:plaintext!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
#hamrazMessages p + p{margin-top:7px!important;}
#hamrazMessages ul,
#hamrazMessages ol{
  margin:7px 0 0!important;
  padding:0 22px 0 0!important;
  line-height:1.9!important;
}
#hamrazMessages li + li{margin-top:4px!important;}
#hamrazMessages code,
#hamrazMessages pre{
  direction:ltr!important;
  text-align:left!important;
  unicode-bidi:normal!important;
}
#hamrazMessages .hamraz-message-meta,
#hamrazMessages .message-meta,
#hamrazMessages time{
  display:block!important;
  margin-top:5px!important;
  color:#a9a0b2!important;
  font-size:9px!important;
  line-height:1.3!important;
  text-align:left!important;
  opacity:.85!important;
}

/* Reply preview should be a compact strip, never push the composer around. */
body.hamraz-route-active #hamrazPage .hamraz-reply-bar{
  min-height:38px!important;
  margin:0 0 7px!important;
  padding:7px 10px!important;
  border-radius:13px!important;
  overflow:hidden!important;
}
body.hamraz-route-active #hamrazPage .hamraz-reply-bar > span{
  min-width:0!important;
  display:block!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  line-height:1.5!important;
}

/* While typing, give the chat the full visual viewport and slide nav away. */
@supports selector(body:has(#hamrazComposer:focus)){
  body.hamraz-route-active:has(#hamrazComposer:focus) .bottom-nav{
    opacity:0!important;
    pointer-events:none!important;
    transform:translateX(50%) translateY(110%)!important;
    transition:transform .18s ease,opacity .18s ease!important;
  }
  body.hamraz-route-active:has(#hamrazComposer:focus) #hamrazPage.hamraz-page{
    height:var(--app-viewport-height,100dvh)!important;
  }
}

@media (max-width:560px){
  body.hamraz-route-active #hamrazPage .hamraz-body{padding-inline:8px!important;}
  body.hamraz-route-active #hamrazPage .hamraz-messages{padding:12px 10px 14px!important;gap:8px!important;}
  #hamrazMessages > *{max-width:91%!important;}
  #hamrazMessages p,
  #hamrazMessages .hamraz-message-text,
  #hamrazMessages .hamraz-text,
  #hamrazMessages .message-text,
  #hamrazMessages .bubble-text{font-size:13px!important;line-height:1.9!important;}
  body.hamraz-route-active #hamrazPage .hamraz-composer-wrap{padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px))!important;}
  body.hamraz-route-active #hamrazPage .hamraz-composer{grid-template-columns:49px minmax(0,1fr)!important;}
  body.hamraz-route-active #hamrazPage .hamraz-send{width:49px!important;height:49px!important;}
}

/* Hamraz purchase safety: generated artwork must never escape its UI slot. */
#hamrazPurchaseModal .hamraz-payment-stage-icon{
  width:62px!important;
  height:62px!important;
  min-width:0!important;
  overflow:hidden!important;
}
#hamrazPurchaseModal .hamraz-payment-stage-icon img,
#hamrazPurchaseModal .hamraz-purchase-symbol img,
#hamrazPurchaseModal .hamraz-purchase-symbols img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}
#hamrazPurchaseModal .hamraz-purchase-card img{
  max-width:100%!important;
}
@media(max-width:560px){
  #hamrazPurchaseModal .hamraz-packages-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  #hamrazPurchaseModal .hamraz-packages-grid>*{
    min-height:150px!important;
    min-width:0!important;
  }
  #hamrazPurchaseModal .hamraz-payment-stage{
    grid-template-columns:54px minmax(0,1fr)!important;
  }
  #hamrazPurchaseModal .hamraz-payment-stage-icon{
    width:54px!important;
    height:54px!important;
  }
}

/* Keep payment cards compact on mobile; decorative art stays in a bounded side slot. */
@media(max-width:560px){
  #hamrazPurchaseModal .hamraz-selected-package{
    padding-left:86px!important;
    padding-top:16px!important;
    min-height:104px!important;
  }
  #hamrazPurchaseModal .hamraz-selected-package::before{
    left:10px!important;
    top:50%!important;
    width:62px!important;
    height:62px!important;
    transform:translateY(-50%)!important;
  }
  #hamrazPurchaseModal .hamraz-payment-methods>*{
    padding:14px 72px 14px 12px!important;
    min-height:92px!important;
  }
  #hamrazPurchaseModal .hamraz-payment-methods>*::before{
    left:auto!important;
    right:10px!important;
    top:50%!important;
    width:48px!important;
    height:48px!important;
    transform:translateY(-50%)!important;
  }
}