/* Универсальная речь фигур: bubble, overlay spotlight, summon */

.figure-speech-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  background: transparent;
}

.figure-speech-overlay-hole {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 22px;
  /* Мягкая дыра без жёсткой рамки: размытый край + общий dim */
  box-shadow:
    0 0 36px 22px rgba(6, 4, 14, 0.22),
    0 0 0 9999px rgba(6, 4, 14, 0.66);
  transition:
    left 480ms cubic-bezier(0.22, 0.82, 0.28, 1),
    top 480ms cubic-bezier(0.22, 0.82, 0.28, 1),
    width 480ms cubic-bezier(0.22, 0.82, 0.28, 1),
    height 480ms cubic-bezier(0.22, 0.82, 0.28, 1),
    opacity 320ms ease;
  pointer-events: none;
}

.figure-speech-overlay.has-hole .figure-speech-overlay-hole {
  opacity: 1;
}

.figure-speech-overlay.is-blocking {
  pointer-events: auto;
  cursor: pointer;
}

.figure-speech-hole-sparks {
  position: absolute;
  inset: -6%;
  pointer-events: none;
  z-index: 2;
}

.figure-speech-hole-spark {
  --delay: 0ms;
  --dur: 2800ms;
  position: absolute;
  width: 2.2px;
  height: 2.2px;
  border-radius: 50%;
  background: rgba(248, 242, 255, 0.92);
  box-shadow:
    0 0 6px rgba(210, 180, 255, 0.75),
    0 0 12px rgba(150, 210, 255, 0.5);
  opacity: 0;
  animation: figureSpeechHoleSpark var(--dur) ease-out var(--delay) infinite;
}

@keyframes figureSpeechHoleSpark {
  0% {
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, calc(-50% + 11px)) scale(0.28);
    opacity: 0;
  }
}

/* —— Bubble —— */
.figure-speech-bubble {
  --speech-tail-room: 100px;
  position: fixed;
  z-index: 1210;
  left: 0;
  top: 0;
  max-width: min(480px, calc(100vw - 24px));
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  overflow: visible;
  transform: translateY(10px) scale(0.94);
  transition:
    left 520ms cubic-bezier(0.22, 0.82, 0.28, 1),
    top 520ms cubic-bezier(0.22, 0.82, 0.28, 1),
    opacity 380ms cubic-bezier(0.22, 0.82, 0.28, 1),
    transform 420ms cubic-bezier(0.22, 0.82, 0.28, 1);
  will-change: left, top, opacity, transform;
}

.figure-speech-bubble.has-choices {
  pointer-events: auto;
}

.figure-speech-bubble.has-input {
  pointer-events: auto;
}

.figure-speech-bubble.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.figure-speech-bubble.is-moving {
  transition-duration: 560ms, 560ms, 380ms, 420ms;
}

/*
 * padding > длины tip — иначе drop-shadow/filter срезает остриё в «плато».
 * filter на shell: tip обязан оставаться внутри padding-box.
 */
.figure-speech-bubble-shell {
  position: relative;
  overflow: visible;
  padding: var(--speech-tail-room);
  margin: calc(var(--speech-tail-room) * -1);
}

.figure-speech-bubble.is-visible .figure-speech-bubble-shell {
  animation: modeTitleLevitate 5.8s ease-in-out infinite;
}

.figure-speech-bubble-panel {
  position: relative;
  z-index: 1;
  padding: 28px 30px 26px;
  overflow: visible;
  background: transparent;
  border: none;
}

.figure-speech-bubble.has-choices .figure-speech-bubble-panel,
.figure-speech-bubble.has-choices .figure-speech-bubble-choices,
.figure-speech-bubble.has-choices .figure-speech-choice-button,
.figure-speech-bubble.has-input .figure-speech-bubble-panel,
.figure-speech-bubble.has-input .figure-speech-bubble-input-wrap,
.figure-speech-bubble.has-input .figure-speech-bubble-input,
.figure-speech-bubble.has-input .figure-speech-input-submit {
  pointer-events: auto;
}

.figure-speech-bubble-shape {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 12px 26px rgba(4, 2, 16, 0.5));
}

.figure-speech-bubble-text {
  margin: 0;
  position: relative;
  z-index: 1;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.22rem, 2.1vw, 1.58rem);
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-transform: uppercase;
  text-align: center;
  color: rgba(236, 226, 255, 0.96);
  text-shadow:
    0 0 12px rgba(180, 150, 255, 0.38),
    0 0 22px rgba(120, 190, 255, 0.22);
}

.figure-speech-bubble.has-choices .figure-speech-bubble-text,
.figure-speech-bubble.has-input .figure-speech-bubble-text {
  margin-bottom: 14px;
}

.figure-speech-bubble-choices {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  max-height: min(42vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.figure-speech-bubble-choices[hidden],
.figure-speech-bubble-input-wrap[hidden] {
  display: none !important;
}

.figure-speech-choice-button {
  width: 100%;
  min-width: min(280px, calc(100vw - 72px));
}

/* Актуальная фигура/кристалл дня в выборе реплик — усиленный золотой акцент. */
.figure-speech-choice-button.is-day-crystal {
  --btn-border-color: color-mix(in srgb, var(--gold, #e8c56a) 62%, transparent);
  --btn-text-color: color-mix(in srgb, var(--gold, #f0d78a) 78%, #fff 22%);
  --btn-background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--gold, #c9a227) 22%, rgba(27, 36, 66, 0.88)),
    color-mix(in srgb, var(--gold, #e8c56a) 18%, rgba(54, 32, 18, 0.9))
  );
  --btn-shadow:
    0 10px 20px rgba(8, 6, 24, 0.4),
    0 0 14px color-mix(in srgb, var(--gold, #e8c56a) 28%, transparent);
  --btn-shadow-hover:
    0 14px 26px rgba(12, 8, 34, 0.48),
    0 0 18px color-mix(in srgb, var(--gold, #f0d78a) 36%, transparent);
}

.btn-shell:has(> .figure-speech-choice-button.is-day-crystal) {
  --ui-edge-halo-opacity: 0.78;
  --ui-edge-halo-opacity-hover: 0.92;
  --ui-edge-halo-core: linear-gradient(
    135deg,
    color-mix(in srgb, var(--gold, #ffe08a) 72%, transparent),
    color-mix(in srgb, var(--gold, #e8c56a) 58%, transparent) 52%,
    color-mix(in srgb, var(--gold, #c9a227) 48%, transparent)
  );
  --ui-edge-halo-outer: linear-gradient(
    145deg,
    color-mix(in srgb, var(--gold, #f0d78a) 42%, transparent),
    color-mix(in srgb, var(--gold, #c9a227) 34%, transparent)
  );
}

html[data-theme="classic"] .figure-speech-choice-button.is-day-crystal {
  --btn-border-color: color-mix(in srgb, var(--gold, #c9a227) 54%, transparent);
  --btn-text-color: color-mix(in srgb, var(--gold, #8a6a12) 55%, var(--ink, #1a1428) 45%);
  --btn-background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--gold, #e8c56a) 28%, rgba(255, 250, 240, 0.92)),
    color-mix(in srgb, var(--gold, #f0d78a) 18%, rgba(255, 244, 220, 0.94))
  );
}

.figure-speech-bubble-input-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.figure-speech-bubble.has-choices .figure-speech-bubble-input-wrap {
  margin-top: 12px;
}

.figure-speech-bubble-input-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.figure-speech-bubble-input {
  width: 100%;
  box-sizing: border-box;
  min-width: min(280px, calc(100vw - 72px));
  padding: 0.72rem 0.85rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--cyan, #84d1ff) 34%, transparent);
  background: color-mix(in srgb, var(--bg-soft, #1a1230) 78%, transparent);
  color: inherit;
  font: inherit;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  letter-spacing: 0.02em;
  text-transform: none;
  outline: none;
  resize: vertical;
}

.figure-speech-bubble-input.is-multiline {
  min-height: 4.5rem;
  resize: vertical;
}

.figure-speech-bubble-input:focus {
  border-color: color-mix(in srgb, var(--cyan, #84d1ff) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan, #84d1ff) 28%, transparent);
}

.figure-speech-bubble-input-error {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, #ffb4b4 80%, var(--text, #eee) 20%);
  text-align: center;
}

.figure-speech-bubble-input-wrap.is-invalid {
  animation: figureSpeechInputShake 420ms ease;
}

.figure-speech-input-submit {
  width: 100%;
  min-width: min(280px, calc(100vw - 72px));
}

@keyframes figureSpeechInputShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
}

html[data-design="classic"] .figure-speech-bubble-input,
html[data-theme="classic"] .figure-speech-bubble-input,
body.design-classic .figure-speech-bubble-input {
  border-radius: 8px;
}

.figure-speech-bubble.is-tone-tour .figure-speech-bubble-text {
  color: rgba(244, 232, 255, 0.97);
  text-shadow:
    0 0 12px rgba(190, 160, 255, 0.4),
    0 0 24px rgba(130, 200, 255, 0.24);
}

.figure-speech-summon {
  position: fixed;
  z-index: 1190;
  width: 88px;
  height: 88px;
  pointer-events: none;
}

.figure-speech-summon--top-right {
  top: max(12px, env(safe-area-inset-top, 0px) + 8px);
  right: max(12px, env(safe-area-inset-right, 0px) + 8px);
}

.figure-speech-summon--top-left {
  top: max(12px, env(safe-area-inset-top, 0px) + 8px);
  left: max(12px, env(safe-area-inset-left, 0px) + 8px);
}

.figure-speech-summon--bottom-right {
  bottom: max(12px, env(safe-area-inset-bottom, 0px) + 8px);
  right: max(12px, env(safe-area-inset-right, 0px) + 8px);
}

.figure-speech-summon--bottom-left {
  bottom: max(12px, env(safe-area-inset-bottom, 0px) + 8px);
  left: max(12px, env(safe-area-inset-left, 0px) + 8px);
}

.figure-speech-summon-host {
  width: 100%;
  height: 100%;
  position: relative;
}

.figure-speech-summon-canvas,
.figure-speech-summon .top-bar-raven-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

html[data-design="classic"] .figure-speech-bubble-panel,
html[data-theme="classic"] .figure-speech-bubble-panel {
  --figure-speech-classic: 1;
}

html[data-design="classic"] .figure-speech-bubble-text,
html[data-theme="classic"] .figure-speech-bubble-text {
  letter-spacing: 0.05em;
}

@media (max-width: 760px) {
  .figure-speech-bubble {
    --speech-tail-room: 56px;
    max-width: min(360px, calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }

  .figure-speech-bubble-panel {
    padding: 18px 16px 16px;
  }

  .figure-speech-bubble-text {
    font-size: clamp(1.02rem, 4vw, 1.18rem);
    letter-spacing: 0.045em;
    line-height: 1.38;
  }

  .figure-speech-bubble-choices {
    max-height: min(38dvh, 280px);
  }

  .figure-speech-summon {
    width: 72px;
    height: 72px;
  }
}

@media (min-width: 761px) {
  .figure-speech-bubble-text {
    font-size: clamp(1.36rem, 1.85vw, 1.68rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .figure-speech-bubble.is-visible .figure-speech-bubble-shell {
    animation: none;
  }
}