/* The avatar is the subject. A tiny symbol describes a state, never a logo. */
.planet-live-page:has(.has-person-self) [data-marker-kind="self"] { visibility: hidden; }
.planet-person { position: absolute; z-index: 0; left: 0; top: 0; width: 44px; height: 60px; pointer-events: none; color: var(--planet-ink); }
.planet-person:has(.planet-person-tooltip:not([hidden])) { z-index: 2; }
.planet-person-button { position: relative; display: block; width: 44px; height: 60px; padding: 0; border: 0; border-radius: var(--r-xs); background: transparent; cursor: pointer; pointer-events: auto; }
.planet-person-face { position: absolute; left: 5px; bottom: 13px; width: 34px; height: 34px; border: 1.5px solid var(--planet-ink); border-radius: 50%; background: var(--planet-panel-strong) url("avatars.png"); background-size: 800% 600%; box-shadow: 0 2px 8px var(--planet-panel); }
.planet-person-anchor { position: absolute; bottom: 0; left: 20px; width: 4px; height: 4px; border-radius: 50%; background: var(--planet-gold); box-shadow: 0 0 7px var(--planet-gold); }
.planet-person-anchor::before { content: ''; position: absolute; left: 1.5px; bottom: 4px; height: 10px; width: 1px; background: linear-gradient(transparent, var(--planet-muted)); }
.planet-person-label { position: absolute; left: 50%; top: 63px; transform: translateX(-50%); font-size: .75rem; line-height: 1.4; color: var(--planet-muted); text-shadow: 0 1px 4px var(--planet-panel-strong); }
.planet-person-state { position: absolute; left: 13px; top: -9px; width: 18px; height: 18px; color: var(--planet-gold); filter: drop-shadow(0 0 4px var(--planet-panel-strong)); }
.planet-person-state svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.planet-person.is-self .planet-person-state { top: -13px; left: 12px; width: 20px; height: 23px; filter: drop-shadow(0 0 3px var(--planet-crystal-shade)); }
.planet-person.is-self .planet-person-state svg { stroke: none; }
.planet-person-camera { position: absolute; display: grid; place-items: center; top: 7px; right: -2px; width: 18px; height: 18px; border: 1px solid var(--planet-line-strong); border-radius: 50%; color: var(--planet-gold); background: var(--planet-panel-strong); pointer-events: none; }
.planet-person-camera[hidden] { display: none; }
.planet-person-camera svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.planet-person-tooltip { position: absolute; top: 2px; left: 53px; width: max-content; max-width: min(240px, 64vw); padding: 11px 14px; border: 1px solid var(--planet-line-strong); border-radius: var(--r-sm); background: var(--planet-panel-strong); box-shadow: var(--planet-shadow); pointer-events: auto; }
.planet-person-tooltip b { display: block; margin-bottom: 4px; color: var(--planet-faint); font-size: .75rem; font-weight: 500; }
.planet-person-tooltip > span { display: block; font-size: .875rem; line-height: 1.5; }
.planet-person-tooltip small { display: block; margin-top: 5px; color: var(--planet-faint); font-size: .75rem; line-height: 1.4; }
[data-align="left"] .planet-person-tooltip { left: auto; right: 53px; }
.planet-person-action { position: absolute; width: var(--action-size, 18px); height: var(--action-size, 18px); color: var(--planet-gold); animation: planetPersonAction 2.7s ease-out both; }
.planet-person-action > svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.planet-action-emoji { display: block; font-size: var(--action-size, 22px); line-height: 1; }
.planet-person-action[data-action="wave"] .planet-action-emoji { transform-origin: 70% 75%; animation: planetWaveHand .45s ease-in-out 3; }
.planet-person-action[data-action="love"] { color: var(--planet-love); }
.planet-person-action[data-action="love"] > svg, .planet-person-action[data-action="thinking"] > svg { fill: currentColor; }
.planet-person-action[data-action="music"] { color: var(--planet-violet); }
.planet-person-action[data-action="home"] > svg { fill: var(--planet-gold); stroke-width: 1; }
.planet-home-arrival { position: absolute; max-width: 210px; padding: 5px 9px; border-radius: var(--r-xs); background: var(--planet-panel); color: var(--planet-gold); font-size: .75rem; line-height: 1.5; animation: planetNoteRise 3.7s ease both; }
@keyframes planetPersonAction { 0% { opacity: 0; transform: translate(-50%, 3px) scale(.7); } 16%,45% { opacity: 1; } 48% { transform: translate(var(--action-mid), -48px) scale(1); } 100% { opacity: 0; transform: translate(var(--action-drift), var(--action-rise)) scale(.8) rotate(8deg); } }
@keyframes planetWaveHand { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .planet-person-action { animation: none; transform: translateY(-22px); } .planet-person-action .planet-action-emoji, .planet-home-arrival { animation: none; } }