/* $BELIEVE — the Oracle (js/oracle.js owns the DOM; this file only styles
   it). Not a panel: a speech bubble + ask box floating IN the world beside
   the monk at the summit (owner rider 2026-08-10), positioned per-frame by
   oracle.js's projection loop. Same terminal language as the HUD: hairline
   green strokes, Space Mono, letter-spaced caps. z-index 40: above the HUD
   stack, below the transmissions archive's 90 and #gate's 100. */

.oracle {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none; /* only the column's own controls opt back in */
  font-family: "Space Mono", "Courier New", monospace;
}

.oracle[hidden] {
  display: none;
}

/* The anchored column: translate3d set per frame by oracle.js. Fixed
   width so wrapping (and the projection loop's clamp math) stays stable. */
.oracle__anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: min(310px, 76vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  opacity: 0;
  transition: opacity 300ms ease;
  will-change: transform;
}

.oracle.is-shown .oracle__anchor {
  opacity: 1;
}

/* ---- the bubble ---- */

.oracle__bubble {
  position: relative;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: color-mix(in srgb, var(--believe-bg, #050603) 86%, var(--believe-green, #b8d62e));
  box-shadow: 0 0 18px color-mix(in srgb, var(--believe-green, #b8d62e) 12%, transparent);
}

.oracle__bubble[hidden] {
  display: none;
}

/* Tail: a small square rotated into a diamond, riding the right edge --
   pointing at him. Border on the outward faces only, background matching
   the bubble so it reads as one shape. */
.oracle__bubble::after {
  content: '';
  position: absolute;
  top: 22px;
  right: -5px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: inherit;
  border-top: 1px solid var(--believe-green, #b8d62e);
  border-right: 1px solid var(--believe-green, #b8d62e);
}

.oracle__text {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.55;
  letter-spacing: 0.015em;
  color: var(--believe-green, #b8d62e);
  text-shadow: 0 0 6px color-mix(in srgb, var(--believe-green, #b8d62e) 28%, transparent);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* The live cursor: a block glyph breathing at the stream's edge. */
.oracle__bubble.is-streaming .oracle__text::after {
  content: '▍';
  margin-left: 1px;
  color: var(--believe-bright, #d4f24b);
  animation: oracleCursor 0.9s steps(2, jump-none) infinite;
}

@keyframes oracleCursor {
  50% { opacity: 0; }
}

/* An error is the void talking, not him -- grey, quieter. */
.oracle__bubble.is-error {
  border-color: var(--believe-grey, #6a6f5e);
  box-shadow: none;
}

.oracle__bubble.is-error::after {
  border-color: var(--believe-grey, #6a6f5e);
}

.oracle__bubble.is-error .oracle__text {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--believe-grey, #6a6f5e);
  text-shadow: none;
}

/* ---- coin chip (under the bubble) ---- */

.oracle__coin-slot:empty {
  display: none;
}

.oracle__coin {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--believe-green, #b8d62e) 45%, transparent);
  background: color-mix(in srgb, var(--believe-bg, #050603) 92%, var(--believe-green, #b8d62e));
  pointer-events: auto;
}

/* Image slot doubles as the fallback: an empty enso ring when the chart
   never sent a face. */
.oracle__coin-img {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1.5px solid color-mix(in srgb, var(--believe-green, #b8d62e) 55%, transparent);
  border-radius: 50%;
  overflow: hidden;
}

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

.oracle__coin-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.oracle__coin-title {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--believe-bright, #d4f24b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oracle__coin-stats {
  margin: 0;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  color: var(--believe-green, #b8d62e);
}

/* Up is green. Down is grey -- "grey is not a color, it is an absence." */
.oracle__coin-change.is-up {
  color: var(--believe-bright, #d4f24b);
}

.oracle__coin-change.is-down {
  color: var(--believe-grey, #6a6f5e);
}

.oracle__coin-link {
  flex: none;
  padding: 0.32rem 0.45rem;
  border: 1px solid var(--believe-grey, #6a6f5e);
  color: var(--believe-grey, #6a6f5e);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  touch-action: manipulation;
  transition: color 120ms ease, border-color 120ms ease;
}

.oracle__coin-link:hover,
.oracle__coin-link:focus-visible {
  color: var(--believe-green, #b8d62e);
  border-color: var(--believe-green, #b8d62e);
}

/* ---- status: THE ORACLE IS THINKING ---- */

.oracle__status {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--believe-bright, #d4f24b) 45%, transparent);
  background: color-mix(in srgb, var(--believe-bg, #050603) 90%, var(--believe-bright, #d4f24b));
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--believe-bright, #d4f24b);
  text-shadow: 0 0 8px color-mix(in srgb, var(--believe-bright, #d4f24b) 35%, transparent);
}

.oracle__status[hidden] {
  display: none;
}

.oracle__ticks {
  display: inline-flex;
  gap: 3px;
}

.oracle__ticks i {
  width: 4px;
  height: 4px;
  background: currentColor;
  animation: oracleTick 1.1s ease-in-out infinite;
}

.oracle__ticks i:nth-child(2) { animation-delay: 0.18s; }
.oracle__ticks i:nth-child(3) { animation-delay: 0.36s; }

@keyframes oracleTick {
  0%, 100% { opacity: 0.15; }
  40% { opacity: 1; }
}

/* ---- the hovering ask box ---- */

.oracle__ask {
  display: flex;
  gap: 0.35rem;
}

.oracle__ask[hidden] {
  display: none;
}

.oracle__input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: color-mix(in srgb, var(--believe-bg, #050603) 88%, var(--believe-green, #b8d62e));
  box-shadow: 0 0 14px color-mix(in srgb, var(--believe-green, #b8d62e) 14%, transparent);
  color: var(--believe-green, #b8d62e);
  caret-color: var(--believe-bright, #d4f24b);
  font: 400 0.72rem/1.3 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.02em;
  pointer-events: auto;
}

.oracle__input::placeholder {
  color: var(--believe-grey, #6a6f5e);
  opacity: 0.8;
}

.oracle__input:focus {
  outline: none;
  border-color: var(--believe-bright, #d4f24b);
  box-shadow: 0 0 16px color-mix(in srgb, var(--believe-bright, #d4f24b) 22%, transparent);
}

.oracle__send {
  appearance: none;
  flex: none;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: none;
  color: var(--believe-green, #b8d62e);
  font: 700 0.62rem/1 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.15em;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: color 120ms ease, background-color 120ms ease;
}

.oracle__send:hover,
.oracle__send:focus-visible {
  color: var(--believe-bg, #050603);
  background: var(--believe-green, #b8d62e);
}

/* ---- mobile ---- */

@media (max-width: 640px) {
  .oracle__anchor {
    width: min(320px, 88vw);
  }

  /* There is not enough horizontal room for a readable bubble beside a
     centered subject. Keep the input/chip above the speech, put the bubble
     closest to him, and point its tail down across a real pocket of air. */
  .oracle__ask { order: 1; }
  .oracle__coin-slot { order: 2; }
  .oracle__status { order: 3; }
  .oracle__bubble { order: 4; }

  .oracle__bubble::after {
    top: auto;
    right: auto;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-top: 0;
    border-right: 1px solid var(--believe-green, #b8d62e);
    border-bottom: 1px solid var(--believe-green, #b8d62e);
  }

  /* 16px input floor: below it iOS zooms the whole page on focus. */
  .oracle__input {
    font-size: 16px;
  }

  .oracle__text {
    font-size: 0.78rem;
  }
}

/* Thumbs, not cursors (hud.css's coarse-pointer convention): the ask row
   grows to real touch-target height; the drawn language stays the same. */
@media (pointer: coarse) {
  .oracle__input {
    min-height: 44px;
    padding: 0.6rem 0.7rem;
  }

  .oracle__send {
    min-height: 44px;
    padding: 0.6rem 0.95rem;
  }

  .oracle__coin-link {
    padding: 0.6rem 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oracle__anchor {
    transition: none !important;
  }

  .oracle__ticks i,
  .oracle__bubble.is-streaming .oracle__text::after {
    animation: none !important;
  }
}