/**
 * 导航栏头像样式同步
 * 将导航栏用户头像修改为与下拉面板内头像一致的 avatar-img 风格
 *
 * 导航栏头像结构：li > a.navbar-avatar > img（裸 29×29 img）
 * 下拉面板头像结构：span.avatar-img > a > img（38px，带圆角/边框）
 *
 * 思路：将 a.navbar-avatar 本身模拟成 .avatar-img 容器
 */

/* ── 容器：模拟 .avatar-img 的尺寸与定位 ── */
.navbar-avatar {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
    margin-top: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* ── 头像图片：填满容器并圆形裁切 ── */
.navbar-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
    border: 1.5px solid var(--main-border-color, #e8e8e8);
    transition: transform 0.3s ease;
}

/* ── 悬停效果：与下拉面板头像保持一致 ── */
.navbar-avatar:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transform: scale(1.08);
}

.navbar-avatar:hover img {
    transform: scale(1.05);
}

/* ── 暗色模式适配 ── */
.dark-theme .navbar-avatar img {
    border-color: var(--main-border-color, #3a3a3a);
}

.dark-theme .navbar-avatar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.dark-theme .navbar-avatar:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}