/* /Components/AccountAvatar.razor.rz.scp.css */
.account-avatar[b-ljdopzd4of] {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    width:           var(--size);
    height:          var(--size);
    padding:         6px;
    margin:          -6px;
    border-radius:   50%;
    transition:      transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select:     none;
}

.account-avatar:hover[b-ljdopzd4of] {
    transform: scale(1.06);
}

.account-avatar:active[b-ljdopzd4of] {
    transform: scale(0.92);
}

.avatar-glow[b-ljdopzd4of] {
    position:      absolute;
    width:         var(--glow-size);
    height:        var(--glow-size);
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    border-radius: 50%;
    background:    linear-gradient(135deg, #a78bfa, #f472b6);
    opacity:       0.3;
    filter:        blur(10px);
    transition:    opacity 0.2s ease;
    pointer-events: none;
}

.account-avatar.is-active .avatar-glow[b-ljdopzd4of] {
    opacity: 0.55;
    filter:  blur(12px);
}

.avatar-circle[b-ljdopzd4of] {
    position:        relative;
    width:           var(--size);
    height:          var(--size);
    border-radius:   50%;
    background:      linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
    border:          1.5px solid rgba(255, 255, 255, 0.15);
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    flex-shrink:     0;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        0 2px 8px rgba(167, 139, 250, 0.3);
}

.avatar-photo[b-ljdopzd4of] {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: 50%;
}

.person-icon[b-ljdopzd4of] {
    width:  56%;
    height: 56%;
}
/* /Components/ProjectionHoloIcon.razor.rz.scp.css */
/* ProjectionHoloIcon.razor.css
   =============================
   Scoped styles for the Projection hologram icon component.
   Handles active/inactive transitions and optional pulse animation.
*/

.projection-holo-icon[b-3knpr7m5hg] {
    display: block;
    transition: filter 0.25s ease, opacity 0.25s ease;
    cursor: pointer;
}

/* ── INACTIVE — dimmed, minimal glow ── */
.projection-holo-icon.inactive[b-3knpr7m5hg] {
    opacity: 0.45;
}

/* ── ACTIVE — full brightness ── */
.projection-holo-icon.active[b-3knpr7m5hg] {
    opacity: 1.0;
}

/* ── HOVER (for desktop / web) ── */
.projection-holo-icon:hover[b-3knpr7m5hg] {
    opacity: 0.85;
}

/* ── PULSE ANIMATION ──
   Add class "pulse" to make the icon breathe when active.
   Usage in Razor: class="@(IsActive ? "pulse" : "")"
*/
.projection-holo-icon.pulse[b-3knpr7m5hg] {
    animation: holo-pulse-b-3knpr7m5hg 2.8s ease-in-out infinite;
}

@keyframes holo-pulse-b-3knpr7m5hg {
    0%   { filter: drop-shadow(0 0 3px var(--main)) drop-shadow(0 0 6px var(--main)); }
    50%  { filter: drop-shadow(0 0 6px var(--main)) drop-shadow(0 0 14px var(--main)) drop-shadow(0 0 22px #a78bfa); }
    100% { filter: drop-shadow(0 0 3px var(--main)) drop-shadow(0 0 6px var(--main)); }
}

/* ── SCAN LINE SWEEP ANIMATION ──
   Optional: makes the beam scan lines animate upward.
   Apply to parent wrapper if desired.
*/
@keyframes scan-sweep-b-3knpr7m5hg {
    0%   { transform: translateY(0);    opacity: 1; }
    100% { transform: translateY(-4px); opacity: 0.7; }
}