/* ---------- Zaman Gezegeni: the office's staging (b.chat, b.digits) ---------- */

/* THE CHAT. A question and its answer as two bubbles, the question from the
   left in the room's paper cream, the answer from the right in the void's
   own dark. Both type out (js/engine.js, b.chat) and both are markup, so a
   Turkish word in either is gold and scans. The classes show / landed are
   the engine's clock; this file only says what each state looks like. */
.chat {
  margin-top: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  width: min(34rem, 100%);
  margin-left: auto;
  margin-right: auto;
}
.chat-bubble {
  position: relative;
  max-width: 82%;
  padding: 0.55em 0.95em;
  border-radius: 1.1em;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1.4;
  color: var(--cream);
  background: rgba(243, 234, 216, 0.08);
  border: 1px solid rgba(243, 234, 216, 0.16);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-bubble.show { opacity: 1; transform: none; }
.chat-q {
  align-self: flex-start;
  border-bottom-left-radius: 0.3em;
}
.chat-a {
  align-self: flex-end;
  border-bottom-right-radius: 0.3em;
  background: rgba(232, 193, 106, 0.1);
  border-color: rgba(232, 193, 106, 0.28);
}
.chat-a.landed { box-shadow: 0 0 22px rgba(232, 193, 106, 0.16); }
.chat-bubble .cursor { display: inline-block; width: 0.08em; height: 1em; background: var(--gold); vertical-align: -0.15em; margin-left: 1px; animation: chat-blink 0.9s steps(2, start) infinite; }
@keyframes chat-blink { to { visibility: hidden; } }
@media (max-width: 520px) {
  .chat-bubble { max-width: 92%; }
}

/* THE DIGITS. A number in cells, one digit each, the word for the digit
   waiting underneath. A cell lights (lit) in turn, tens then units, and
   the reading lands beneath the row as markup (read). */
.digits {
  margin-top: 1.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
}
.digits-row {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
}
.digits-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  min-width: 2.6em;
  padding: 0.35em 0.5em 0.45em;
  border-radius: 0.6em;
  border: 1px solid rgba(243, 234, 216, 0.14);
  background: rgba(243, 234, 216, 0.05);
  transition: border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.digits-digit {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  line-height: 1;
  color: var(--lavender);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.digits-word {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  min-height: 1.1em;
}
.digits-cell.lit {
  border-color: rgba(232, 193, 106, 0.4);
  background: rgba(232, 193, 106, 0.08);
  box-shadow: 0 0 20px rgba(232, 193, 106, 0.14);
  transform: translateY(-2px);
}
.digits-cell.lit .digits-digit { color: var(--gold); text-shadow: 0 0 18px rgba(232, 193, 106, 0.45); }
.digits-cell.lit .digits-word { opacity: 1; transform: none; }
.digits-mute .digits-digit { opacity: 0.5; }
.digits-out {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4.2vw, 2rem);
  line-height: 1.3;
  min-height: 1.3em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.digits.read .digits-out { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .chat-bubble, .digits-cell, .digits-word, .digits-out, .digits-digit { transition: none; }
  .chat-bubble .cursor { animation: none; }
}