/* ════════════════════════════════════════════════════════════════
   WINR v30 — Chat "alive" scaffold styles
   Typing indicator (fills #cv2Typing) + optimistic send status pill.
   Additive; scoped to v30 classes. Remove the v30 link tag to revert.
   ════════════════════════════════════════════════════════════════ */

/* ── Typing indicator ── */
.cv2-typing.v30-typing-on{
  display:flex; align-items:center; gap:8px;
  padding:2px 2px 4px; min-height:18px;
  font-size:12.5px; color:var(--text-mid, #A1A1AA);
  animation:v30FadeIn .2s ease both;
}
@keyframes v30FadeIn{ from{ opacity:0 } to{ opacity:1 } }

.v30-typing-text{
  font-style:italic; opacity:.9;
  /* the typer's accent bleeds subtly into the text */
  color:color-mix(in srgb, var(--v30-accent, #39FF14) 30%, var(--text-mid, #A1A1AA));
}

/* Dots glow in the typer's WINR accent (their emblem color) */
.v30-typing-dots{ display:inline-flex; align-items:flex-end; gap:3px; height:12px; }
.v30-typing-dots i{
  width:5px; height:5px; border-radius:50%;
  background:var(--v30-accent, #39FF14);
  box-shadow:0 0 6px var(--v30-accent-soft, rgba(57,255,20,.45));
  opacity:.4; animation:v30Bounce 1.25s infinite ease-in-out;
}
.v30-typing-dots i:nth-child(2){ animation-delay:.16s; }
.v30-typing-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes v30Bounce{
  0%,60%,100%{ transform:translateY(0) scale(.85); opacity:.35; }
  30%{ transform:translateY(-4px) scale(1); opacity:1; }
}

/* ── Optimistic send status pill ── */
.v30-msg-status{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:4px; font-size:11px; font-weight:600;
  color:var(--text-lo, #71717A);
  transition:opacity .4s ease;
}
.v30-msg-status.v30-status-fade{ opacity:0; }

/* pending: message body slightly muted while in-flight */
.cv2-msg.v30-pending .cv2-msg-text{ opacity:.62; transition:opacity .25s ease; }
.cv2-msg.v30-sent .cv2-msg-text{ opacity:1; }

.v30-status-spin{
  width:11px; height:11px; border-radius:50%;
  border:1.5px solid var(--v30-accent-soft, rgba(255,255,255,0.18));
  border-top-color:var(--v30-accent, #A1A1AA);
  animation:v30Spin .7s linear infinite;
}
@keyframes v30Spin{ to{ transform:rotate(360deg); } }

/* Delivered: clean, understated neutral check that stamps in then fades.
   (Sent shouldn't shout — neutral reads premium. Typing stays theme-tinted.) */
.v30-msg-status.v30-delivered{ color:rgba(255,255,255,0.5); }
.v30-status-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.7);
  animation:v30Stamp .4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes v30Stamp{ from{ transform:scale(0) rotate(-14deg); } to{ transform:scale(1) rotate(0); } }

/* failed state — refined, deliberate */
.cv2-msg.v30-failed .cv2-msg-text{ opacity:.6; }
/* faint red edge marks the message itself as undelivered */
.cv2-msg.v30-failed{
  position:relative;
  box-shadow:inset 2px 0 0 rgba(255,77,77,0.55);
  border-radius:4px;
  transition:box-shadow .2s ease;
}
.v30-msg-status.v30-error{
  color:#ff6b6b;
  padding:3px 4px 3px 8px; margin-top:5px;
  background:rgba(255,77,77,0.08);
  border:1px solid rgba(255,77,77,0.22);
  border-radius:var(--radius-pill, 999px);
  width:fit-content;
}
.v30-status-ico{
  display:inline-flex; align-items:center; justify-content:center;
  color:#ff6b6b; animation:v30Pop .26s cubic-bezier(0.34,1.56,0.64,1) both;
}
.v30-msg-status.v30-error .v30-status-label{ font-weight:700; letter-spacing:.1px; }
.v30-status-retry{
  display:inline-flex; align-items:center; gap:5px;
  margin-left:4px; padding:3px 11px 3px 9px; border-radius:var(--radius-pill, 999px);
  background:#ff5252; border:1px solid #ff5252;
  color:#fff; font-size:11px; font-weight:800; letter-spacing:.2px; cursor:pointer;
  transition:transform .14s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 2px 8px rgba(255,82,82,0.3);
}
.v30-status-retry svg{ display:block; transition:transform .4s ease; }
.v30-status-retry:hover{ background:#ff6262; transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,82,82,0.4); }
.v30-status-retry:hover svg{ transform:rotate(-180deg); }
.v30-status-retry:active{ transform:none; }
@keyframes v30Pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* subtle shake to signal the moment of failure */
.cv2-msg.v30-shake{ animation:v30Shake .4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes v30Shake{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-3px); }
  40%,60%{ transform:translateX(3px); }
}
@media (prefers-reduced-motion: reduce){
  .cv2-msg.v30-shake{ animation:none; }
}