/* ===== Caret-anchored egg toasts (typing-only) ===== */
:root{
  --egg-radius: 12px;
  --egg-bg: rgba(13, 23, 34, .98);
  --egg-ink: var(--ink, #e7eef7);
  --egg-border: color-mix(in oklab, var(--egg-ink) 14%, transparent);
  --egg-shadow: 0 10px 28px rgba(0,0,0,.35);
  --egg-pad: 8px 10px;
  --egg-z: 99999;
}

/* floating layer that holds the toast; positioned in JS */
.egg-caret-layer{
  position: fixed;
  inset: 0;
  transform: translate3d(0,0,0);
  z-index: var(--egg-z);
  pointer-events: none; /* never block typing */
}

/* the bubble itself (shown near caret) */
.egg-toast{
  position: fixed;
  background: var(--egg-bg);
  color: var(--egg-ink);
  border: 1px solid var(--egg-border);
  border-radius: var(--egg-radius);
  padding: var(--egg-pad);
  font: 13px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,"Khmer OS Siemreap",sans-serif;
  box-shadow: var(--egg-shadow);
  white-space: nowrap;
  max-width: min(70vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;

  opacity: 0;
  transform: translateY(4px);
  will-change: transform, opacity;
  animation: eggIn .18s ease-out forwards, eggOut .18s ease-in forwards 2.6s;
}

/* little arrow pointing to caret */
.egg-toast::after{
  content:"";
  position:absolute;
  left: 12px;
  top: -6px;
  width: 10px; height: 10px;
  background: var(--egg-bg);
  border-left: 1px solid var(--egg-border);
  border-top: 1px solid var(--egg-border);
  transform: rotate(45deg);
  box-shadow: -3px -3px 8px rgba(0,0,0,.08);
}

/* default animations */
@keyframes eggIn  { from {opacity:0; transform: translateY(4px)} to {opacity:1; transform: translateY(0)} }
@keyframes eggOut { to   {opacity:0; transform: translateY(2px)} }

/* ===== Toast accent variants (choose in admin) ===== */
.egg-toast--broken { border-color:#ff4d6d66; box-shadow:0 8px 28px #ff4d6d22; }
.egg-toast--love   { border-color:#f472b666; box-shadow:0 8px 28px #f472b622; }
.egg-toast--info   { border-color:#22d3ee66; box-shadow:0 8px 28px #22d3ee22; }

.egg-toast--calm{
  background:#eaf6ff;
  color:#0b3a5b;
  border-color:#38bdf888;
  box-shadow:0 8px 28px #38bdf833;
}
.egg-toast--neon{
  background:#0b1220;
  color:#a7f3d0;
  border-color:#34d39988;
  text-shadow:0 0 6px #34d39977;
  box-shadow:0 0 0 1px #34d39933, 0 8px 28px #34d39922, 0 0 18px #34d39922 inset;
}
.egg-toast--soft{
  background:color-mix(in oklab, var(--card, #0f1824) 96%, transparent);
  color:var(--ink, #e7eef7);
  border-color:color-mix(in oklab, var(--ink, #e7eef7) 18%, transparent);
}
.egg-toast--dream {
  background: #2a0f3c;
  color: #f0d9ff;
  border-color: #d946ef99;
  box-shadow: 0 0 10px #d946ef55, 0 0 30px #d946ef33;
}

/* ===== Fade / Motion variants (stack with an accent) ===== */
.egg-toast--fadeup   { animation: fadeUpIn .6s ease-out forwards,   eggOut .22s ease-in forwards 2.8s; }
.egg-toast--zoom     { animation: zoomIn   .4s cubic-bezier(.18,.89,.32,1.28) forwards, eggOut .25s ease-in forwards 2.8s; }
.egg-toast--slideleft{ animation: slideLeftIn  .5s ease-out forwards,  eggOut .22s ease-in forwards 2.8s; }
.egg-toast--slideright{animation: slideRightIn .5s ease-out forwards,  eggOut .22s ease-in forwards 2.8s; }
.egg-toast--glowfade { animation: glowFadeIn .8s ease-out forwards, eggOut .3s ease-in forwards 3s; }

@keyframes fadeUpIn   { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes zoomIn     { from { transform: scale(.85); opacity:0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideLeftIn{ from { transform: translateX(-20px); opacity:0 } to { transform: translateX(0); opacity:1 } }
@keyframes slideRightIn{from { transform: translateX(20px); opacity:0 }  to { transform: translateX(0); opacity:1 } }
@keyframes glowFadeIn {
  0%   { opacity: 0; box-shadow: 0 0 0px rgba(255,255,255,.2); }
  60%  { opacity: 1; box-shadow: 0 0 18px rgba(255,255,255,.4); }
  100% { opacity: 1; box-shadow: 0 0 6px  rgba(255,255,255,.2); }
}

/* Hidden mirror used to compute caret position */
.egg-mirror{
  position:absolute; visibility:hidden; top:-9999px; left:-9999px;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .egg-toast{ animation:none !important; }
}

/* fallback base for motion-only presets */
.egg-toast--fadeup,
.egg-toast--zoom,
.egg-toast--slideleft,
.egg-toast--slideright,
.egg-toast--glowfade {
  border-color: #7ca7ff44; 
}