:root {
  color-scheme: dark;
  --bg: #070707;
  --panel: rgba(10, 10, 10, 0.96);
  --line: rgba(246, 211, 101, 0.26);
  --text: rgba(255, 255, 255, 0.96);
  --muted: rgba(255, 255, 255, 0.62);
  --accent: #f6d365;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  background: transparent;
  font-family: Inter, system-ui, sans-serif;
}

.verse-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10020;
  display: grid;
  justify-items: end;
  align-items: end;
  gap: 10px;
  pointer-events: none;
}

.verse-widget-stage {
  position: relative;
  display: grid;
  place-items: end;
  width: min(456px, calc(100vw - 24px));
  min-height: 70px;
  pointer-events: none;
}

.verse-widget-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 58px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(246, 211, 101, 0.94);
  pointer-events: auto;
  cursor: pointer;
  overflow: visible;
  padding: 0;
  animation: verse-cross-float 5.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transition: color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.verse-widget-toggle::before,
.verse-widget-toggle::after {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 22px;
  height: 44px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(255, 241, 178, 0.42), transparent 34%),
    radial-gradient(ellipse at 50% 34%, rgba(246, 211, 101, 0.18), transparent 62%);
  filter: blur(7px);
  opacity: 0;
  transform: translate3d(-50%, 0, 0) scaleY(0.62);
  transform-origin: 50% 100%;
  pointer-events: none;
  content: "";
  animation: verse-light-rise 4.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.verse-widget-toggle::after {
  bottom: 18px;
  width: 10px;
  height: 58px;
  background: linear-gradient(to top, rgba(255, 245, 198, 0.46), rgba(246, 211, 101, 0.12), transparent);
  filter: blur(3px);
  animation-delay: 1.35s;
}

.verse-widget-toggle svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 42px;
  color: currentColor;
  overflow: visible;
  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18))
    drop-shadow(0 -2px 7px rgba(246, 211, 101, 0.24));
}

.verse-widget-toggle path {
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 0;
  animation: verse-cross-breathe 4.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.verse-particle-field {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 0;
  width: 70px;
  height: 128px;
  overflow: visible;
  pointer-events: none;
}

.verse-particle-field i {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 999px;
  background: var(--c);
  box-shadow: 0 0 10px var(--g);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.5);
  animation: verse-particle-rise var(--d) cubic-bezier(0.16, 1, 0.3, 1) infinite;
  animation-delay: var(--delay);
}

.verse-particle-field i:nth-child(1) { --x: 31px; --y: 24px; --s: 3px; --d: 4.4s; --delay: 0s; --c: rgba(255, 255, 255, 0.95); --g: rgba(255, 255, 255, 0.38); }
.verse-particle-field i:nth-child(2) { --x: 42px; --y: 18px; --s: 2px; --d: 5.1s; --delay: -1.1s; --c: rgba(246, 211, 101, 0.98); --g: rgba(246, 211, 101, 0.4); }
.verse-particle-field i:nth-child(3) { --x: 24px; --y: 16px; --s: 2.5px; --d: 4.7s; --delay: -2.4s; --c: rgba(255, 246, 209, 0.92); --g: rgba(246, 211, 101, 0.34); }
.verse-particle-field i:nth-child(4) { --x: 35px; --y: 28px; --s: 1.8px; --d: 5.8s; --delay: -3.2s; --c: rgba(255, 255, 255, 0.88); --g: rgba(255, 255, 255, 0.34); }
.verse-particle-field i:nth-child(5) { --x: 48px; --y: 30px; --s: 2.8px; --d: 4.9s; --delay: -0.8s; --c: rgba(246, 211, 101, 0.88); --g: rgba(246, 211, 101, 0.44); }
.verse-particle-field i:nth-child(6) { --x: 20px; --y: 32px; --s: 2px; --d: 5.3s; --delay: -4.1s; --c: rgba(255, 255, 255, 0.95); --g: rgba(255, 255, 255, 0.4); }
.verse-particle-field i:nth-child(7) { --x: 38px; --y: 12px; --s: 1.6px; --d: 4.2s; --delay: -2.9s; --c: rgba(255, 238, 175, 0.96); --g: rgba(246, 211, 101, 0.36); }
.verse-particle-field i:nth-child(8) { --x: 27px; --y: 36px; --s: 2.4px; --d: 5.6s; --delay: -1.7s; --c: rgba(255, 255, 255, 0.82); --g: rgba(255, 255, 255, 0.32); }
.verse-particle-field i:nth-child(9) { --x: 44px; --y: 40px; --s: 1.8px; --d: 4.6s; --delay: -3.7s; --c: rgba(246, 211, 101, 0.94); --g: rgba(246, 211, 101, 0.38); }
.verse-particle-field i:nth-child(10) { --x: 33px; --y: 20px; --s: 2.2px; --d: 5.4s; --delay: -4.8s; --c: rgba(255, 255, 255, 0.9); --g: rgba(255, 255, 255, 0.36); }
.verse-particle-field i:nth-child(11) { --x: 16px; --y: 24px; --s: 1.7px; --d: 5s; --delay: -2s; --c: rgba(246, 211, 101, 0.9); --g: rgba(246, 211, 101, 0.34); }
.verse-particle-field i:nth-child(12) { --x: 52px; --y: 22px; --s: 2.1px; --d: 4.8s; --delay: -3.4s; --c: rgba(255, 251, 229, 0.9); --g: rgba(255, 255, 255, 0.32); }

.verse-widget-panel {
  position: absolute;
  right: 52px;
  bottom: 5px;
  pointer-events: auto;
  display: grid;
  gap: 0;
  width: min(374px, calc(100vw - 88px));
  max-height: min(520px, calc(100dvh - 120px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 34%),
    radial-gradient(circle at 18% 0%, rgba(246, 211, 101, 0.18), transparent 30%),
    radial-gradient(circle at 94% 102%, rgba(255, 255, 255, 0.08), transparent 27%),
    var(--panel);
  box-shadow:
    0 28px 84px rgba(0, 0, 0, 0.52),
    0 1px 0 rgba(246, 211, 101, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  opacity: 0;
  transform: translate3d(34px, 10px, 0) scaleX(0.18) scaleY(0.72);
  transform-origin: bottom right;
  transition:
    opacity 170ms ease,
    transform 430ms cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 430ms cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: inset(0 0 0 82% round 28px);
}

.verse-widget.is-open .verse-widget-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
  clip-path: inset(0 0 0 0 round 28px);
}

.verse-widget.is-open .verse-widget-toggle {
  animation-duration: 7.4s;
  color: rgba(255, 241, 191, 0.98);
  transform: translate3d(-2px, -1px, 0) scale(1.03);
}

.verse-widget-panel[hidden] { display: none; }

.verse-widget-panel header,
.verse-widget-foot {
  padding-left: 18px;
  padding-right: 18px;
}

.verse-widget-panel header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 17px;
  padding-bottom: 14px;
}

.eyebrow {
  margin: 0;
  color: rgba(246, 211, 101, 0.82);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.verse-widget-panel h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.04rem;
  line-height: 1.16;
  letter-spacing: 0;
}

.verse-widget-body {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 16px 18px 12px;
}

.verse-widget-scripture {
  position: relative;
  display: grid;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.024);
  padding: 15px 15px 14px;
}

.verse-widget-rule {
  width: 42px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246, 211, 101, 0.72), rgba(246, 211, 101, 0));
}

.verse-widget-message {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.verse-widget-reference {
  margin: 0;
  color: rgba(246, 211, 101, 0.92);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.verse-widget-application {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.55;
}

.verse-widget-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0;
  padding-bottom: 12px;
}

.verse-widget-foot small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.35;
}

.verse-widget-close {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.verse-widget-close:hover,
.verse-widget-close:focus-visible {
  border-color: rgba(246, 211, 101, 0.34);
  background: rgba(246, 211, 101, 0.09);
  color: rgba(255, 255, 255, 0.96);
}

.verse-widget-close:focus-visible {
  outline: 2px solid rgba(246, 211, 101, 0.56);
  outline-offset: 3px;
}

.verse-widget-close-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

.verse-widget-close-icon span,
.verse-widget-close-icon span::after {
  display: block;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.verse-widget-close-icon span {
  transform: rotate(45deg);
}

.verse-widget-close-icon span::after {
  transform: rotate(90deg);
}

.verse-widget-close:hover,
.verse-widget-close:focus-visible,
.verse-widget-toggle:hover,
.verse-widget-toggle:focus-visible {
  outline: none;
}

.verse-widget-close:focus-visible {
  outline: 2px solid rgba(246, 211, 101, 0.56);
  outline-offset: 3px;
}

.verse-widget-toggle:hover,
.verse-widget-toggle:focus-visible {
  color: rgba(255, 238, 175, 0.98);
  transform: translateY(-1px) scale(1.04);
}

@keyframes verse-cross-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.88; }
  42% { transform: translate3d(0, -5px, 0) scale(1.035); opacity: 1; }
  68% { transform: translate3d(0, -2px, 0) scale(0.99); opacity: 0.94; }
}

@keyframes verse-cross-breathe {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.86; }
  36% { stroke-dashoffset: 2.2; opacity: 1; }
  62% { stroke-dashoffset: -1.4; opacity: 0.94; }
}

@keyframes verse-light-rise {
  0%, 100% {
    opacity: 0;
    transform: translate3d(-50%, 2px, 0) scaleY(0.54) scaleX(0.72);
  }
  28% {
    opacity: 0.72;
    transform: translate3d(-50%, -8px, 0) scaleY(0.92) scaleX(0.9);
  }
  72% {
    opacity: 0;
    transform: translate3d(-50%, -34px, 0) scaleY(1.34) scaleX(1.08);
  }
}

@keyframes verse-particle-rise {
  0%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.45);
  }
  14% {
    opacity: 0.92;
  }
  66% {
    opacity: 0.72;
    transform: translate3d(var(--drift, -7px), -58px, 0) scale(1);
  }
  86% {
    opacity: 0;
    transform: translate3d(calc(var(--drift, -7px) * 1.6), -92px, 0) scale(0.34);
  }
}

.verse-particle-field i:nth-child(odd) { --drift: -8px; }
.verse-particle-field i:nth-child(even) { --drift: 7px; }
.verse-particle-field i:nth-child(3n) { --drift: -2px; }

@media (max-width: 640px) {
  .verse-widget {
    right: 12px;
    bottom: 12px;
  }

  .verse-widget-toggle {
    width: 40px;
    height: 52px;
  }

  .verse-widget-toggle svg {
    width: 27px;
    height: 38px;
  }

  .verse-widget-stage {
    width: calc(100vw - 24px);
    min-height: 68px;
  }

  .verse-widget-panel {
    right: 0;
    bottom: 62px;
    width: min(332px, calc(100vw - 24px));
    max-height: min(470px, calc(100dvh - 102px));
    transform: translate3d(10px, 28px, 0) scaleX(0.74) scaleY(0.18);
    transform-origin: bottom right;
    clip-path: inset(82% 0 0 0 round 24px);
  }

  .verse-widget.is-open .verse-widget-panel {
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
    clip-path: inset(0 0 0 0 round 24px);
  }

  .verse-widget-panel header {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .verse-widget-panel h2 {
    font-size: 1rem;
  }

  .verse-widget-body {
    padding: 14px 16px 12px;
  }

  .verse-widget-message {
    font-size: 0.96rem;
    line-height: 1.5;
  }

  .verse-widget-foot {
    padding-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .verse-widget-toggle,
  .verse-widget-toggle::before,
  .verse-widget-toggle::after,
  .verse-particle-field i,
  .verse-widget-toggle path,
  .verse-widget-panel {
    animation: none !important;
    transition: none !important;
  }

  .verse-widget.is-open .verse-widget-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}