.narrative-event-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  overflow-y: auto;
}

.narrative-event-overlay[hidden] {
  display: none;
}

.narrative-event-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(43, 180, 210, 0.16), transparent 48%),
    rgba(0, 3, 5, 0.94);
  backdrop-filter: blur(7px);
}

.narrative-event-card {
  position: relative;
  width: min(100%, 560px);
  border: 1px solid rgba(101, 231, 255, 0.55);
  padding: clamp(25px, 7vw, 46px);
  overflow: hidden;
  color: #dffaff;
  background:
    linear-gradient(145deg, rgba(8, 29, 36, 0.98), rgba(0, 7, 10, 0.99));
  box-shadow:
    0 0 0 1px rgba(101, 231, 255, 0.08),
    0 0 70px rgba(54, 210, 239, 0.16);
}

.narrative-event-card::before,
.narrative-event-card::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 2px;
  background: #65e7ff;
  box-shadow: 0 0 16px rgba(101, 231, 255, 0.8);
}

.narrative-event-card::before {
  top: -1px;
  left: 0;
}

.narrative-event-card::after {
  right: 0;
  bottom: -1px;
}

.narrative-event-scan {
  position: absolute;
  z-index: 0;
  inset: -100% 0 auto;
  height: 65%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(101, 231, 255, 0.055),
    transparent
  );
  animation: narrative-scan 4s linear infinite;
}

.narrative-event-card > *:not(.narrative-event-scan) {
  position: relative;
  z-index: 1;
}

.narrative-event-channel,
.narrative-event-key,
.narrative-event-time {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.narrative-event-channel {
  margin: 0 0 23px;
  color: #56737b;
  font-size: 0.56rem;
}

.narrative-event-key {
  margin: 0 0 12px;
  color: #65e7ff;
  font-size: 0.62rem;
  overflow-wrap: anywhere;
}

.narrative-event-card h2 {
  margin: 0;
  color: #effcff;
  font-size: clamp(1.55rem, 7vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.narrative-event-body {
  margin: 25px 0 0;
  color: #b1c9cf;
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  line-height: 1.68;
  white-space: pre-wrap;
}

.narrative-event-time {
  display: block;
  margin-top: 25px;
  color: #49636a;
  font-size: 0.56rem;
}

.narrative-event-error {
  min-height: 21px;
  margin: 15px 0 0;
  color: #ff8b97;
  font-size: 0.75rem;
}

.narrative-event-ack {
  width: 100%;
  min-height: 54px;
  margin-top: 13px;
  border: 0;
  padding: 0 17px;
  cursor: pointer;
  color: #001014;
  background: #65e7ff;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.narrative-event-ack:disabled {
  cursor: wait;
  opacity: 0.52;
}

@keyframes narrative-scan {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(330%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .narrative-event-scan {
    animation: none;
  }
}