/* ============================================================
   头像框 · Avatar Frame
   ------------------------------------------------------------
   头像框使用静态边界表达身份感：深石墨底色、低饱和金色外描边、
   一道细内线。无旋转、呼吸和外扩光晕，避免盖过头像与用户名。

   DOM 结构（仅头像框生效时由服务端输出）：
   <span class="avatar-halo-frame avatar-halo-round|avatar-halo-squircle">
       <span class="avatar-halo-clip">
           <span class="avatar-halo-ring" aria-hidden="true"></span>
           <img class="avatar-halo ...">
       </span>
   </span>
   ============================================================ */

/* 头像本体不再使用光圈，边界由外层头像框负责。 */
.avatar-halo,
.avatar-halo:hover {
    box-shadow: none !important;
}

/* ---------- 头像框主体 ---------- */
.avatar-halo-frame {
    position: relative;
    display: inline-block;
    padding: 3px;
    border: 1px solid #b69554;
    border-radius: 9999px;
    background: #334155;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        0 2px 7px rgba(15, 23, 42, 0.18);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 会员主页大头像：保持较稳的框体比例。 */
.avatar-halo-frame--lg {
    padding: 4px;
}

.avatar-halo-frame--block {
    display: block;
    width: 100%;
    height: 100%;
}

.avatar-halo-frame.avatar-halo-round {
    border-radius: 9999px;
}

.avatar-halo-frame.avatar-halo-squircle {
    border-radius: calc(0.75rem + 4px);
}

/* 头像与框之间的留白层，确保外框不会被头像覆盖。 */
.avatar-halo-clip {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: #ffffff;
}

/* 头像框内侧的细金线，形成清晰但克制的双层边界。 */
.avatar-halo-ring {
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 1px solid rgba(239, 226, 190, 0.82);
    border-radius: inherit;
    pointer-events: none;
}

.avatar-halo-ring::before {
    display: none;
}

.avatar-halo-frame img {
    position: relative;
    z-index: 1;
    display: block;
}

.avatar-halo-frame.avatar-halo-squircle img {
    border-radius: inherit;
}

/* 仅保留很轻的交互反馈，不改变头像尺寸，避免列表内容跳动。 */
.avatar-halo-frame:hover {
    border-color: #c8a864;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 3px 9px rgba(15, 23, 42, 0.22);
}

/* 旧 DOM 兼容：禁用历史流光层和呼吸层。 */
.avatar-halo-frame::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .avatar-halo-frame {
        transition: none;
    }
}