1 files changed, 40 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css
index 3fd3de2..3629dfc 100644
--- a/src/style.css
+++ b/src/style.css
@@ -499,6 +499,43 @@ hr.divider { margin: 16px 0; }
 .zap-tally { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 650; color: #e6a800; white-space: nowrap; flex-shrink: 0; }
 .zap-tally.chat-react { font-size: 12px; padding: 1px 7px 1px 5px; }
 .zap-tally.clickable { cursor: pointer; }
+/* A tap-local lightning strike, followed by a floating amount and embers. */
+.zap-fx { position: fixed; inset: 0; z-index: 10000; pointer-events: none; overflow: hidden; contain: strict; }
+.zap-fx-impact { position: absolute; left: var(--zap-x); top: var(--zap-y); width: 0; height: 0; color: #ffc83d; }
+.zap-fx-bolt { position: absolute; width: 82px; height: 180px; left: -41px; bottom: 0; fill: #fff5c2; filter: drop-shadow(0 0 5px #fff3a1) drop-shadow(0 0 13px #ff9d00); transform-origin: 50% 100%; animation: zap-strike 430ms ease-out both; }
+.zap-fx-flash, .zap-fx-ring { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 50%; animation: zap-impact 550ms 60ms ease-out both; }
+.zap-fx-flash { background: radial-gradient(circle, #fffce0, #ffca45 25%, #ff980066 50%, transparent 70%); }
+.zap-fx-ring { border: 2px solid #ffd76a; box-shadow: 0 0 12px #ffad32, inset 0 0 10px #ffad3266; animation-name: zap-ring; }
+.zap-fx-amount { position: absolute; left: var(--zap-label-x); top: -60px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; color: #fff2ad; text-shadow: 0 2px 2px #713500, 0 0 9px #ff9c00, 0 0 22px #ff9500aa; animation: zap-amount 1450ms cubic-bezier(.16, 1, .3, 1) both; }
+.zap-fx-amount strong { font-size: clamp(34px, 9vw, 48px); font-weight: 900; line-height: 1; letter-spacing: -.045em; }
+.zap-fx-amount span { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
+.zap-fx-spark { position: absolute; width: 10px; height: 3px; left: -5px; top: -2px; border-radius: 3px; background: #ffe997; box-shadow: 0 0 6px #ffaf20; animation: zap-spark 720ms var(--delay) ease-out both; }
+.zap-fx-spark.ember { left: calc(var(--zap-label-x) - 2px); top: -80px; width: 3px; height: 3px; background: #fff4c2; animation-duration: 750ms; }
+@keyframes zap-strike {
+  0% { opacity: 0; transform: scaleY(.15); }
+  16%, 38% { opacity: 1; transform: scaleY(1); }
+  65% { opacity: .8; }
+  100% { opacity: 0; transform: scaleY(1.04); }
+}
+@keyframes zap-impact { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.4); } }
+@keyframes zap-ring { 0% { opacity: .9; transform: scale(.25); } 100% { opacity: 0; transform: scale(2); } }
+@keyframes zap-amount {
+  0% { opacity: 0; transform: translate(-50%, 35px) scale(.35) rotate(-9deg); }
+  16% { opacity: 1; transform: translate(-50%, -8px) scale(1.2) rotate(-5deg); }
+  30% { opacity: 1; transform: translate(-50%, -4px) scale(1) rotate(-3deg); }
+  58% { opacity: 1; filter: blur(0); }
+  100% { opacity: 0; transform: translate(-50%, -65px) scale(1.08) rotate(2deg); filter: blur(3px); }
+}
+@keyframes zap-spark {
+  0% { opacity: 0; transform: translate(0, 0) rotate(var(--angle)) scale(.4); }
+  12% { opacity: 1; }
+  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--angle)) scale(.1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .zap-fx-bolt, .zap-fx-flash, .zap-fx-ring, .zap-fx-spark { display: none; }
+  .zap-fx-amount { animation: zap-amount-reduced 1200ms ease-out both; }
+  @keyframes zap-amount-reduced { 0%, 65% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }
+}
 /* A zap in flight: the chip lands the moment you tap and breathes until the
    payment settles — the bolt carries the pulse, the number stays readable. */
 .zap-tally.flying { animation: zap-breathe 1.15s ease-in-out infinite; }
@@ -529,6 +566,7 @@ hr.divider { margin: 16px 0; }
 .chat-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .thread-when { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
 .thread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
+.chat-thread-row > .thread-dot { margin-right: 8px; }
 .chat-thread-row.unread .chat-name { font-weight: 700; }
 .chat-thread-row.unread .chat-preview { color: var(--ink); }
 .chat-invite { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface2); flex: 0 0 auto; max-height: 40vh; overflow-y: auto; }
@@ -574,6 +612,8 @@ hr.divider { margin: 16px 0; }
 .note-act-emoji { font-size: 17px; line-height: 1; }
 .note-act-n { font-size: 12px; font-weight: 600; color: var(--muted); }
 .note-who-toggle.on { color: var(--muted); }
+.note-who-toggle[aria-disabled] { opacity: .3; cursor: default; }
+.note-who-toggle[aria-disabled]:hover { background: none; color: var(--faint); }
 .note-who-chev { display: flex; transition: transform .2s; }
 .note-who-chev.open { transform: rotate(180deg); }
 /* who reacted, boosted and zapped: opened by the chevron on the bar */