/* ═══════════════════════════════════════════
   用户在线状态 — user-online-status
   ═══════════════════════════════════════════ */

/* ── 头像状态圆点 ── */
.zm-avatar-status-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.zm-status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #9ca3af;
    z-index: 2;
    pointer-events: none;
    box-sizing: content-box;
    transition: background .3s ease;
}

/* 大头像的圆点稍大 */
.avatar-lg .zm-status-dot,
.avatar-img.avatar-lg + .zm-status-dot {
    width: 12px;
    height: 12px;
    bottom: 2px;
    right: 2px;
}

/* 小头像的圆点更小 */
.avatar-sm .zm-status-dot {
    width: 7px;
    height: 7px;
    bottom: 0;
    right: 0;
    border-width: 1.5px;
}

/* 状态颜色 */
.zm-status-dot.zm-st-online  { background: #22c55e; }
.zm-status-dot.zm-st-away    { background: #f59e0b; }
.zm-status-dot.zm-st-busy    { background: #ef4444; }
.zm-status-dot.zm-st-offline { background: #9ca3af; }

/* 在线脉冲动画 */
.zm-status-dot.zm-st-online::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .4);
    animation: zm-status-pulse 2s ease-in-out infinite;
}

@keyframes zm-status-pulse {
    0%, 100% { transform: scale(1); opacity: .6; }
    50%      { transform: scale(1.6); opacity: 0; }
}

/* 暗色模式：圆点边框用暗色背景 */
.dark-theme .zm-status-dot {
    border-color: var(--main-bg-color, #1e293b);
}


/* ── 状态选择器（用户下拉面板中） ── */
.fetl-user-online-status {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.fetl-user-online-status .but {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    transition: all .25s ease;
    line-height: 1.6;
    user-select: none;
}

.fetl-user-online-status .but:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

/* 状态色圆点 */
.fetl-user-online-status .but > span:first-child {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fetl-user-online-status .but[data-sta="online"] > span:first-child  { background: #22c55e; }
.fetl-user-online-status .but[data-sta="away"] > span:first-child    { background: #f59e0b; }
.fetl-user-online-status .but[data-sta="busy"] > span:first-child    { background: #ef4444; }
.fetl-user-online-status .but[data-sta="offline"] > span:first-child { background: #9ca3af; }

/* 激活态 */
.fetl-user-online-status .but.fetl-active {
    border-color: currentColor;
    font-weight: 600;
}

.fetl-user-online-status .but.fetl-active[data-sta="online"] {
    color: #22c55e;
    background: rgba(34, 197, 94, .08);
    border-color: #22c55e;
}
.fetl-user-online-status .but.fetl-active[data-sta="away"] {
    color: #f59e0b;
    background: rgba(245, 158, 11, .08);
    border-color: #f59e0b;
}
.fetl-user-online-status .but.fetl-active[data-sta="busy"] {
    color: #ef4444;
    background: rgba(239, 68, 68, .08);
    border-color: #ef4444;
}
.fetl-user-online-status .but.fetl-active[data-sta="offline"] {
    color: #9ca3af;
    background: rgba(156, 163, 175, .08);
    border-color: #9ca3af;
}

/* 切换中loading态 */
.fetl-user-online-status .but.fetl-loading {
    opacity: .5;
    pointer-events: none;
}

/* 暗色模式 */
.dark-theme .fetl-user-online-status .but {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.6);
}
.dark-theme .fetl-user-online-status .but:hover {
    background: rgba(255,255,255,.08);
}
.dark-theme .fetl-user-online-status .but.fetl-active[data-sta="online"] {
    background: rgba(34, 197, 94, .15);
}
.dark-theme .fetl-user-online-status .but.fetl-active[data-sta="away"] {
    background: rgba(245, 158, 11, .15);
}
.dark-theme .fetl-user-online-status .but.fetl-active[data-sta="busy"] {
    background: rgba(239, 68, 68, .15);
}
.dark-theme .fetl-user-online-status .but.fetl-active[data-sta="offline"] {
    background: rgba(156, 163, 175, .15);
}