/* ============================================
   叔叔不约 - 图标样式
   ============================================ */

/* 使用Unicode和CSS绘制的图标 */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* 性别图标 */
.icon-mars::before {
    content: "♂";
    color: #4a90d9;
}

.icon-venus::before {
    content: "♀";
    color: #e91e63;
}

/* 操作图标 */
.icon-menu::before {
    content: "☰";
}

.icon-close::before {
    content: "×";
}

.icon-heart::before {
    content: "♥";
}

.icon-comment::before {
    content: "💬";
}

.icon-share::before {
    content: "↗";
}

.icon-image::before {
    content: "🖼";
}

.icon-voice::before {
    content: "🎤";
}

.icon-emoji::before {
    content: "😀";
}

.icon-dice::before {
    content: "🎲";
}

.icon-lock::before {
    content: "🔒";
}

.icon-unlock::before {
    content: "🔓";
}

.icon-vip::before {
    content: "★";
    color: #ffd700;
}

.icon-svip::before {
    content: "◆";
    color: #9c27b0;
}

.icon-wechat::before {
    content: "💚";
}

.icon-phone::before {
    content: "📱";
}

.icon-settings::before {
    content: "⚙";
}

.icon-user::before {
    content: "👤";
}

.icon-check::before {
    content: "✓";
}

.icon-warning::before {
    content: "⚠";
}

.icon-info::before {
    content: "ℹ";
}

.icon-sound::before {
    content: "🔊";
}

.icon-mute::before {
    content: "🔇";
}

.icon-location::before {
    content: "📍";
}

/* 箭头图标 */
.icon-arrow-up::before {
    content: "↑";
}

.icon-arrow-down::before {
    content: "↓";
}

.icon-arrow-left::before {
    content: "←";
}

.icon-arrow-right::before {
    content: "→";
}

/* 文件类型图标 */
.icon-file::before {
    content: "📄";
}

.icon-audio::before {
    content: "🔊";
}

.icon-video::before {
    content: "🎬";
}

.icon-image-file::before {
    content: "🖼";
}

/* 社交图标 */
.icon-qq::before {
    content: "Q";
    font-weight: bold;
}

.icon-weibo::before {
    content: "W";
    font-weight: bold;
}

.icon-douyin::before {
    content: "D";
    font-weight: bold;
}

/* 状态图标 */
.icon-online::before {
    content: "●";
    color: #4caf50;
    font-size: 0.5em;
    vertical-align: super;
}

.icon-offline::before {
    content: "○";
    color: #999;
    font-size: 0.5em;
    vertical-align: super;
}

.icon-verified::before {
    content: "✓";
    color: #4caf50;
    font-size: 0.7em;
    vertical-align: super;
}

/* 动画效果 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.icon-bounce {
    animation: bounce 0.5s ease infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.icon-pulse {
    animation: pulse 1s ease infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-spin {
    animation: spin 1s linear infinite;
}

/* 徽章 */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #f44336;
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: bold;
}

.badge-vip {
    background: linear-gradient(135deg, #ffd700, #ff9800);
    color: #333;
}

.badge-svip {
    background: linear-gradient(135deg, #9c27b0, #673ab7);
    color: #fff;
}

/* 加载动画 */
.loading-dots::after {
    content: "";
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ""; }
    40% { content: "."; }
    60% { content: ".."; }
    80%, 100% { content: "..."; }
}

/* 聊天气泡装饰 */
.bubble-tail-self::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: 5px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: var(--primary-color);
    border-right: none;
    border-bottom: none;
}

.bubble-tail-other::after {
    content: "";
    position: absolute;
    left: -8px;
    bottom: 5px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-right-color: var(--bg-color);
    border-left: none;
    border-bottom: none;
}

/* 头像装饰 */
.avatar-ring {
    position: relative;
}

.avatar-ring::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
}

.avatar-vip::before {
    content: "★";
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ffd700;
    color: #333;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 打字指示器 */
.typing-indicator {
    display: inline-flex;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-color);
    border-radius: 12px;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}