/* P31 S.M.A.R.T. Molecular Notification Field — v2.0 QMU */

/* ── Field container — full viewport ────────────────────────────────── */
#p31-mol-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: visible;
}

/* ── SVG bond layer ───────────────────────────────────────────────────── */
.p31-mol-bonds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── Atom wrapper ─────────────────────────────────────────────────────── */
.p31-mol-atom {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  outline: none;
  /* transition only for opacity; transform is set via JS rAF */
  transition: opacity 0.3s ease;
}

/* ── Collapsed state: 48 px glassmorphic circle ───────────────────────── */
.p31-mol-atom__shell {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 20px var(--qmu-shadow, rgba(14,165,233,0.4)),
              inset 0 0 10px rgba(255,255,255,0.04);
  transition: box-shadow 0.22s ease;
}

.p31-mol-atom:hover .p31-mol-atom__shell,
.p31-mol-atom:focus-visible .p31-mol-atom__shell {
  box-shadow: 0 0 38px var(--qmu-shadow, rgba(14,165,233,0.6)),
              inset 0 0 16px rgba(255,255,255,0.06);
}

/* Radial glow core */
.p31-mol-atom__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--qmu-hex, #0ea5e9), transparent 70%);
  opacity: 0.12;
  transition: opacity 0.22s;
  pointer-events: none;
}
.p31-mol-atom:hover .p31-mol-atom__glow { opacity: 0.24; }

.p31-mol-atom__icon {
  position: relative;
  z-index: 1;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ping ring on fresh atoms */
.p31-mol-atom__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--qmu-hex, #0ea5e9);
  opacity: 0.45;
  animation: p31-mol-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.p31-mol-atom__ping--done { display: none; }

@keyframes p31-mol-ping {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0;   }
}

/* ── Expanded state: 260 px glassmorphic card ─────────────────────────── */
.p31-mol-atom--expanded .p31-mol-atom__shell { display: none; }

.p31-mol-atom__card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 260px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(5, 8, 14, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 0 28px var(--qmu-shadow, rgba(14,165,233,0.35)),
    0 0 60px color-mix(in srgb, var(--qmu-shadow, rgba(14,165,233,0.35)) 40%, transparent),
    0 10px 36px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom right;
  transform: scale(0.88) translateY(10px);
  transition: opacity 0.22s ease,
              transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.p31-mol-atom--expanded .p31-mol-atom__card {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

.p31-mol-atom__card-icon {
  line-height: 0;
  flex-shrink: 0;
  margin-top: 1px;
}

.p31-mol-atom__card-body {
  flex: 1;
  min-width: 0;
}

.p31-mol-atom__card-title {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 3px;
  text-shadow: 0 0 10px var(--qmu-shadow, rgba(14,165,233,0.4));
}

.p31-mol-atom__msg {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.55;
  margin: 0 0 7px;
  word-break: break-word;
  white-space: pre-wrap;
}

.p31-mol-atom__card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.26);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 6px;
  margin-top: 5px;
}

.p31-mol-atom__dismiss {
  position: absolute;
  top: 9px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  line-height: 0;
  transition: color 0.12s, background 0.12s;
}
.p31-mol-atom__dismiss:hover {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Critical / Warning pulse ─────────────────────────────────────────── */
.p31-mol-atom[data-severity="critical"] .p31-mol-atom__shell,
.p31-mol-atom[data-severity="warning"]  .p31-mol-atom__shell {
  animation: p31-mol-severity-pulse 1.8s ease-in-out infinite;
}

@keyframes p31-mol-severity-pulse {
  0%, 100% { box-shadow: 0 0 18px var(--qmu-shadow); }
  50%       { box-shadow: 0 0 42px var(--qmu-shadow), 0 0 72px var(--qmu-shadow); }
}

/* ── Evaporation (CSS `scale` — composites separately from translate3d) ── */
.p31-mol-atom--evaporating {
  pointer-events: none;
  animation: p31-mol-evaporate 0.52s ease-out forwards;
}

@keyframes p31-mol-evaporate {
  0%   { opacity: 1; scale: 1;    }
  35%  { opacity: 0.6; scale: 1.3; }
  100% { opacity: 0; scale: 0;    }
}

/* ── Plasma quantum state ─────────────────────────────────────────────── */
#p31-mol-field[data-quantum="PLASMA"] .p31-mol-atom__shell {
  animation: p31-mol-plasma 0.55s ease-in-out infinite alternate;
}

@keyframes p31-mol-plasma {
  from { scale: 1; }
  to   { scale: 1.18; box-shadow: 0 0 50px var(--qmu-shadow); }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .p31-mol-atom__card { width: 220px; }
}