.sb-oracle {
  --oracle-ink: #031016;
  --oracle-panel: #071c24;
  --oracle-mint: #8ce2b6;
  --oracle-gold: #f2bf67;
  color: #eef8f3;
  margin: 0 auto 3rem;
  max-width: 1280px;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 3.25rem);
  position: relative;
}

.sb-oracle::before {
  background:
    radial-gradient(circle at 82% 42%, rgba(140, 226, 182, .13), transparent 25%),
    radial-gradient(circle at 74% 55%, rgba(242, 191, 103, .08), transparent 20%),
    repeating-linear-gradient(135deg, rgba(140, 226, 182, .025) 0 1px, transparent 1px 16px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.sb-oracle > * { position: relative; }

.sb-oracle__header {
  align-items: flex-start;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}

.sb-oracle__header > div:first-child { max-width: 850px; }

.sb-oracle__eyebrow {
  color: var(--oracle-mint);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  margin: 0 0 .5rem;
  text-transform: uppercase;
}

.sb-oracle h1,
.sb-oracle h2 {
  color: #fffdf4;
  letter-spacing: -.04em;
  line-height: 1.02;
  margin: 0;
}

.sb-oracle h1 { font-size: clamp(2.65rem, 6vw, 5.35rem); }
.sb-oracle h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); }

.sb-oracle__lede {
  color: #c0d2d2;
  font-size: clamp(1.02rem, 2vw, 1.23rem);
  line-height: 1.68;
  margin: 1rem 0 0;
  max-width: 760px;
}

.sb-oracle__stage {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(350px, .84fr);
  min-height: 820px;
  position: relative;
}

.sb-oracle__consultation {
  align-self: center;
  background:
    linear-gradient(180deg, rgba(7, 28, 36, .985), rgba(3, 16, 22, .995)),
    var(--oracle-panel);
  border: 1px solid rgba(242, 191, 103, .5);
  border-radius: 24px 0 24px 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(140, 226, 182, .08);
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  z-index: 4;
}

.sb-oracle__consultation::after {
  border-bottom: 40px solid transparent;
  border-left: 58px solid rgba(242, 191, 103, .5);
  content: "";
  position: absolute;
  right: -58px;
  top: 82px;
}

.sb-oracle__console-heading {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.sb-oracle__signal {
  align-items: center;
  color: #becdca;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 750;
  gap: .48rem;
  text-transform: uppercase;
}

.sb-oracle__signal i {
  background: var(--oracle-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(242, 191, 103, .12), 0 0 18px rgba(242, 191, 103, .8);
  height: 7px;
  width: 7px;
}

.sb-oracle__instruction {
  color: #b5c5c7;
  line-height: 1.55;
  margin: .8rem 0 .55rem;
}

.sb-oracle__status {
  color: var(--oracle-gold);
  font-size: .82rem;
  margin: 0 0 .65rem;
}

.sb-oracle.is-ready .sb-oracle__status { color: var(--oracle-mint); }

.sb-oracle__chat {
  background: #04151c;
  border: 1px solid rgba(140, 226, 182, .24);
  border-radius: 18px;
  height: 650px;
  min-height: 540px;
  overflow: hidden;
}

.sb-oracle__chat > * { height: 100%; width: 100%; }

.sb-oracle__composer {
  align-items: stretch;
  background: linear-gradient(135deg, rgba(11, 43, 47, .98), rgba(5, 24, 31, .98));
  border: 1px solid rgba(140, 226, 182, .34);
  border-radius: 15px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .26);
  display: grid;
  gap: .65rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: .85rem;
  padding: .65rem;
}

.sb-oracle__composer textarea {
  background: #061820;
  border: 1px solid rgba(140, 226, 182, .38);
  border-radius: 10px;
  color: #f6fbf8;
  font: inherit;
  line-height: 1.45;
  min-height: 3.4rem;
  padding: .72rem .85rem;
  resize: vertical;
  width: 100%;
}

.sb-oracle__composer textarea::placeholder { color: #93a8aa; }

.sb-oracle__composer textarea:focus-visible,
.sb-oracle__composer button:focus-visible {
  outline: 3px solid var(--oracle-gold);
  outline-offset: 2px;
}

.sb-oracle__composer button {
  align-self: stretch;
  background: linear-gradient(180deg, #bd4538, #76221e);
  border: 1px solid rgba(255, 201, 122, .6);
  border-radius: 10px;
  color: #fff9ed;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-width: 9.5rem;
  padding: .72rem 1rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}

.sb-oracle__composer button:hover:not(:disabled) { filter: brightness(1.1); }
.sb-oracle__composer :disabled { cursor: wait; opacity: .58; }

.sb-oracle__fallback {
  background: #211315;
  border: 1px solid rgba(219, 91, 80, .55);
  border-radius: 12px;
  margin-top: .8rem;
  padding: .8rem 1rem;
}

.sb-oracle__fallback p { margin: 0 0 .35rem; }
.sb-oracle__fallback a,
.sb-oracle__noscript a { color: #b2f3d1; font-weight: 750; }

.sb-oracle__character {
  align-self: stretch;
  margin: 0 0 -1.25rem -2.2rem;
  min-height: 820px;
  pointer-events: none;
  position: relative;
  z-index: 2;
}

.sb-oracle__character::before {
  background: radial-gradient(circle, rgba(242, 191, 103, .26), transparent 66%);
  content: "";
  filter: blur(9px);
  height: 31%;
  left: 5%;
  position: absolute;
  top: 30%;
  width: 72%;
}

.sb-oracle__character img {
  bottom: 0;
  display: block;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .7));
  height: min(860px, 104%);
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  position: absolute;
  right: clamp(-4.5rem, -4vw, -2rem);
  width: auto;
}

/* The THEBES portrait has a baked, chamber-matched backdrop. Feather all four
   edges into the stage so the full-body reveal reads like the other poses. */
.sb-oracle[data-oracle-mood="thebes"] .sb-oracle__character::after {
  background:
    linear-gradient(90deg, var(--oracle-ink), rgba(3, 16, 22, 0) 8%, rgba(3, 16, 22, 0) 92%, var(--oracle-ink)),
    linear-gradient(180deg, var(--oracle-ink), rgba(3, 16, 22, 0) 6%, rgba(3, 16, 22, 0) 94%, var(--oracle-ink));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.sb-oracle[data-oracle-mood="thebes"] .sb-oracle__character img,
.sb-oracle[data-oracle-mood="thebes"].is-consulting .sb-oracle__character img {
  filter: none;
}

.sb-oracle__character figcaption {
  bottom: 1rem;
  color: rgba(226, 238, 233, .67);
  font-size: .61rem;
  letter-spacing: .12em;
  position: absolute;
  right: .35rem;
  text-transform: uppercase;
  z-index: 4;
}

.sb-oracle__orb-rings {
  border: 1px solid rgba(242, 191, 103, .32);
  border-radius: 50%;
  box-shadow: 0 0 64px rgba(242, 191, 103, .2), inset 0 0 32px rgba(140, 226, 182, .08);
  height: 24%;
  left: 3%;
  position: absolute;
  top: 36%;
  width: 49%;
  z-index: 2;
}

.sb-oracle__disclaimer,
.sb-oracle__noscript {
  color: #899c9f;
  font-size: .75rem;
  line-height: 1.55;
  margin: 1rem 0 0;
  max-width: 1050px;
}

@media (prefers-reduced-motion: no-preference) {
  .sb-oracle__signal i { animation: sb-oracle-signal 2.2s ease-in-out infinite; }
  .sb-oracle__orb-rings { animation: sb-oracle-orb 4.8s ease-in-out infinite; }
  .sb-oracle__character img { transition: filter .28s ease, transform .28s ease; }
  .sb-oracle.is-portrait-changing .sb-oracle__character img {
    animation: sb-oracle-portrait-shift .52s cubic-bezier(.22, .8, .32, 1);
  }
  .sb-oracle.is-consulting .sb-oracle__character img {
    filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 24px rgba(242, 191, 103, .22));
    translate: 0 -3px;
  }
}

@keyframes sb-oracle-signal {
  50% { opacity: .45; transform: scale(.8); }
}

@keyframes sb-oracle-orb {
  50% { opacity: .5; transform: scale(1.045); }
}

@keyframes sb-oracle-portrait-shift {
  0% { opacity: .32; scale: .985; }
  58% { opacity: .9; }
  100% { opacity: 1; scale: 1; }
}

@media (max-width: 1080px) {
  .sb-oracle { padding-inline: clamp(.75rem, 2vw, 1.25rem); }

  .sb-oracle__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 42vw, 420px);
    min-height: 820px;
  }

  .sb-oracle__character {
    align-self: stretch;
    height: auto;
    margin: 0;
    min-height: 820px;
    overflow: hidden;
    width: auto;
  }

  .sb-oracle__character img {
    bottom: auto;
    height: clamp(610px, 78vw, 740px);
    left: 50%;
    max-height: none;
    max-width: none;
    right: auto;
    top: clamp(2rem, 4vw, 3rem);
    transform: translateX(-50%);
    width: auto;
  }

  .sb-oracle__orb-rings { left: 12%; top: 36%; width: 58%; }
}

@media (max-width: 640px) {
  .sb-oracle {
    max-width: 100%;
    padding: 1rem .72rem 2rem;
  }

  .sb-oracle__header,
  .sb-oracle__console-heading {
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }

  .sb-oracle__header { gap: 1rem; }

  .sb-oracle h1,
  .sb-oracle h2,
  .sb-oracle__lede,
  .sb-oracle__instruction {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .sb-oracle h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
  .sb-oracle h2 { font-size: clamp(1.45rem, 7.5vw, 1.9rem); }

  .sb-oracle__stage {
    grid-template-columns: minmax(0, 1fr) clamp(96px, 28vw, 160px);
    max-width: 100%;
    min-height: 0;
    min-width: 0;
  }

  .sb-oracle__consultation {
    border-radius: 18px 0 18px 18px;
    max-width: 100%;
    min-width: 0;
    padding: .75rem;
  }

  .sb-oracle__consultation::after {
    border-bottom-width: 26px;
    border-left-width: 30px;
    right: -30px;
    top: 60px;
  }

  .sb-oracle__character {
    height: auto;
    margin: 0;
    min-height: 760px;
    width: auto;
  }

  .sb-oracle__character img {
    height: 520px;
    top: 5rem;
  }

  .sb-oracle__orb-rings { left: 4%; top: 24%; width: 92%; }
  .sb-oracle__chat { height: 620px; }
  .sb-oracle__composer { grid-template-columns: 1fr; }
  .sb-oracle__composer button { min-height: 3rem; width: 100%; }
  .sb-oracle__character figcaption { display: none; }
}

@media (forced-colors: active) {
  .sb-oracle__consultation,
  .sb-oracle__chat { border: 1px solid CanvasText; }
}