/* THE ROOM · 1102k · VOICE, KEPT LOCAL + TYPE THAT ARRIVES LIKE A SIGNAL */

/* the lock badge on the dock: green when your voice stays on this Mac */
#heard .st .lockbadge { flex: none; font: 600 8.5px/1 "JetBrains Mono", monospace; font-style: normal; letter-spacing: .22em; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); cursor: help; }
#heard .st .lockbadge:empty { display: none; }
#heard .st .lockbadge.ok { color: var(--green); border-color: rgba(34,211,107,.55); background: rgba(34,211,107,.1); text-shadow: 0 0 8px rgba(34,211,107,.6); }
#heard .st .lockbadge.cloud { color: var(--gold); border-color: rgba(255,212,0,.5); background: rgba(255,212,0,.08); }
#heard .st .lockbadge.wait { color: var(--blue); border-color: rgba(58,120,255,.5); animation: lbpulse 1.2s ease-in-out infinite; }
@keyframes lbpulse { 50% { opacity: .45; } }

/* the hot mic wears the sigil: a turning ring in all four colors when it's live */
#hot.on::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(from var(--hk, 0deg), #e10600, #ffd400, #22d36b, #3a78ff, #e10600); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 62%, #000 64%, #000 70%, transparent 72%); animation: hkspin 3.4s linear infinite; opacity: .95; }
#hot.on.paused::before { animation-play-state: paused; opacity: .35; }
@property --hk { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hkspin { to { --hk: 360deg; } }
#heard .tx { font-size: 18px; text-shadow: 0 0 18px rgba(255,255,255,.18); }

/* each message wears its seat's NFT */
.m .who .orb { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center; vertical-align: -6px; margin-right: 9px; box-shadow: 0 0 0 1.5px var(--c), 0 0 14px var(--c); flex: none; }
.m.brian .who .orb { margin-right: 0; margin-left: 9px; }

/* their words: a signal arriving — the bubble's border sweeps in, a light passes once, the letters decode behind the cursor */
.m.claude .txt, .m.grok .txt { background: linear-gradient(180deg, rgba(10,12,18,.86), rgba(6,7,10,.78)) !important; backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); border-radius: 4px 16px 16px 16px; overflow: hidden; }
.m.claude .txt::before, .m.grok .txt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--bk, 0deg), var(--c), transparent 22%, transparent 70%, var(--c)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .55; pointer-events: none; }
.m.live.claude .txt::before, .m.live.grok .txt::before { animation: bksweep 1.6s cubic-bezier(.2,.7,.2,1) both; }
.m.typing-out .txt::before { animation: bkspin 1.8s linear infinite !important; opacity: .95; }
@property --bk { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes bksweep { from { --bk: -120deg; opacity: 1; } to { --bk: 240deg; opacity: .55; } }
@keyframes bkspin { to { --bk: 360deg; } }
.m.live.claude .txt, .m.live.grok .txt { background-image: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--c) 22%, transparent) 50%, transparent 60%), linear-gradient(180deg, rgba(10,12,18,.86), rgba(6,7,10,.78)) !important; background-size: 260% 100%, 100% 100%; animation: txtin .4s ease-out both, sheen 1.4s .15s ease-out both; }
@keyframes sheen { from { background-position: 120% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
.m.typing-out .txt { text-shadow: -1px 0 rgba(225,6,0,.35), 1px 0 rgba(58,120,255,.35), 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
.m .txt .cur { position: relative; }
.m .txt .cur::after { content: attr(data-g); position: absolute; left: calc(100% + 3px); top: -1px; white-space: nowrap; font: 500 .95em/1 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--c); opacity: .55; text-shadow: 0 0 8px var(--c); pointer-events: none; }
.m .who { display: flex; align-items: center; }
.m.claude .who, .m.grok .who { font-size: 17px !important; }

/* his own words, spoken: a waveform under the name */
.m.brian .txt { position: relative; }
.m.brian .who .via { display: inline-flex; align-items: center; gap: 6px; }
.m.brian .who .via::before { content: ""; width: 26px; height: 10px; background: repeating-linear-gradient(90deg, var(--red) 0 2px, transparent 2px 4px); -webkit-mask: linear-gradient(0deg, #000 0 0) center/100% 30% no-repeat, radial-gradient(ellipse at center, #000 30%, transparent 72%); mask: radial-gradient(ellipse 60% 100% at center, #000 40%, transparent 75%); opacity: .8; }

@media (prefers-reduced-motion: reduce) { #hot.on::before, .m .txt::before, .m.live .txt { animation: none !important; } .m .txt .cur::after { display: none; } }