/* ========== 消息气泡装扮：在原版逐行消息基础上增加纹理、角标和轻量动效 ========== */
.msg-line[class*="msg-bubble--"] {
    position: relative;
    isolation: isolate;
    display: block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 24px;
    margin: 4px 0;
    padding: 5px 12px 5px 14px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(51, 102, 153, .16);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 1px 4px rgba(51, 102, 153, .12);
}

.msg-line[class*="msg-bubble--"]::before,
.msg-line[class*="msg-bubble--"]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.msg-line[class*="msg-bubble--"] > * {
    position: relative;
    z-index: 1;
}

.msg-bubble--golden {
    border-color: rgba(217, 119, 6, .32) !important;
    background:
        linear-gradient(90deg, rgba(245, 158, 11, .32) 0 4px, transparent 4px),
        radial-gradient(circle at 28px 8px, rgba(255, 255, 255, .85), transparent 10px),
        linear-gradient(135deg, #fff8df 0%, #fffdf5 56%, #fff1c2 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), 0 2px 8px rgba(217, 119, 6, .18);
}

.msg-bubble--golden::after {
    top: 0;
    bottom: 0;
    left: -36px;
    width: 36px;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: msg-bubble-shine 3.6s ease-in-out infinite;
}

.msg-bubble--sakura {
    border-color: rgba(244, 114, 182, .32) !important;
    background:
        radial-gradient(circle at 18px 10px, rgba(244, 114, 182, .42) 0 2px, transparent 3px),
        radial-gradient(circle at 44px 20px, rgba(251, 207, 232, .86) 0 3px, transparent 4px),
        linear-gradient(135deg, #fff7fb 0%, #fff 48%, #ffe4f1 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), 0 2px 8px rgba(244, 114, 182, .14);
}

.msg-bubble--star {
    border-color: rgba(79, 70, 229, .32) !important;
    background:
        radial-gradient(circle at 20px 9px, rgba(255, 255, 255, .9) 0 1px, transparent 2px),
        radial-gradient(circle at 76px 20px, rgba(99, 102, 241, .36) 0 2px, transparent 3px),
        linear-gradient(135deg, #eef2ff 0%, #f8fbff 54%, #dbeafe 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 2px 10px rgba(79, 70, 229, .16);
}

.msg-bubble--star::before {
    right: 10px;
    top: 5px;
    width: 42px;
    height: 16px;
    background: radial-gradient(circle, rgba(67, 56, 202, .42) 0 1px, transparent 2px);
    background-size: 11px 8px;
    opacity: .72;
}

.msg-bubble--rainbow {
    border-color: rgba(59, 130, 246, .22) !important;
    background:
        linear-gradient(#ffffffd9, #ffffffd9) padding-box,
        linear-gradient(120deg, rgba(239, 68, 68, .16), rgba(245, 158, 11, .16), rgba(34, 197, 94, .16), rgba(59, 130, 246, .16), rgba(168, 85, 247, .16)) border-box !important;
    box-shadow: 0 2px 10px rgba(59, 130, 246, .14);
}

.msg-bubble--rainbow::before {
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444);
    background-size: 180% 100%;
    animation: msg-bubble-rainbow 4.2s linear infinite;
}

.msg-bubble--crown {
    border-color: rgba(180, 83, 9, .34) !important;
    background:
        linear-gradient(90deg, rgba(180, 83, 9, .24) 0 4px, transparent 4px),
        radial-gradient(circle at right 12px top 8px, rgba(251, 191, 36, .36), transparent 18px),
        linear-gradient(135deg, #fff7d6 0%, #fffdfa 46%, #fde68a 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .82), 0 3px 12px rgba(180, 83, 9, .22);
}

.msg-bubble--crown::after {
    content: "♛";
    top: 2px;
    right: 8px;
    z-index: 0;
    color: rgba(180, 83, 9, .26);
    font-size: 18px;
    line-height: 1;
}

@keyframes msg-bubble-shine {
    0%, 62% { transform: translateX(0); opacity: 0; }
    72% { opacity: .82; }
    100% { transform: translateX(280px); opacity: 0; }
}

@keyframes msg-bubble-rainbow {
    from { background-position: 0% 50%; }
    to { background-position: 180% 50%; }
}

/* ========== 昵称颜色 ========== */
.msg-name--golden  { color: #fbbf24 !important; font-weight: 700; }
.msg-name--rainbow {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}
.msg-name--glow {
    color: #e2e8f0 !important;
    text-shadow: 0 0 6px #818cf8, 0 0 14px #6366f1;
}
.msg-name--flame {
    color: #f97316 !important;
    font-weight: 700;
    animation: name-flame 1.5s ease-in-out infinite;
}
@keyframes name-flame {
    0%, 100% { text-shadow: 0 0 4px #ef4444; }
    50%      { text-shadow: 0 0 10px #fbbf24, 0 0 16px #ef4444; }
}

/* ========== 消息文字颜色特效 ========== */
.msg-text--rainbow {
    background: linear-gradient(90deg,
        #ef4444, #f97316, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    animation: text-rainbow 3.5s linear infinite;
}
@keyframes text-rainbow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.msg-text--shimmer {
    background: linear-gradient(110deg,
        #6b7280 0%, #9ca3af 18%, #f3f4f6 28%, #d1d5db 36%,
        #6b7280 52%, #9ca3af 66%, #f9fafb 74%, #6b7280 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    animation: text-shimmer 4s ease-in-out infinite;
}
@keyframes text-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: -200% 50%; }
}

.msg-text--neon {
    color: #a855f7 !important;
    font-weight: 600;
    text-shadow:
        0 0 7px #a855f7,
        0 0 14px #7c3aed,
        0 0 28px #6366f1,
        0 0 42px #4f46e5;
    animation: text-neon 2s ease-in-out infinite alternate;
}
@keyframes text-neon {
    0%   { text-shadow: 0 0 7px #a855f7, 0 0 14px #7c3aed, 0 0 28px #6366f1; }
    100% { text-shadow: 0 0 14px #c084fc, 0 0 28px #a855f7, 0 0 48px #7c3aed, 0 0 64px #6366f1; }
}

.msg-text--flame {
    background: linear-gradient(180deg, #fef3c7 0%, #f59e0b 28%, #ea580c 60%, #dc2626 100%);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    animation: text-flame 1.2s ease-in-out infinite alternate;
}
@keyframes text-flame {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

.msg-text--ice {
    background: linear-gradient(135deg, #e0f2fe 0%, #7dd3fc 25%, #38bdf8 50%, #bae6fd 75%, #e0f2fe 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    animation: text-ice 3s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.5));
}
@keyframes text-ice {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ========== 头像框 ========== */
.avatar-frame-wrapper {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    line-height: 0;
    overflow: hidden;
    border-radius: 50%;
}

.user-item .avatar-frame-wrapper .user-head {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    mix-blend-mode: normal;
    overflow: hidden;
    /* clip-path 硬裁剪保证头像在任何情况下都是正圆形，不受外部 border-radius 覆盖影响 */
    clip-path: circle(50% at 50% 50%);
    /* 头像置于头像框下方，框边缘可遮挡头像外围；
       提高特异性覆盖 chat.css 中的 .user-item .user-head */
}

.avatar-frame {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    /* 使用 mask 在 44px 圆上挖出 4px 宽的环形：中心透明（头像可见），边缘渐变色可见 */
    -webkit-mask-image: radial-gradient(circle closest-side at center, transparent 18px, black 19px);
    mask-image: radial-gradient(circle closest-side at center, transparent 18px, black 19px);
}

.avatar-frame::before,
.avatar-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.avatar-frame--silver {
    background: conic-gradient(from 25deg, #ffffff, #94a3b8, #e2e8f0, #64748b, #ffffff);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .38), 0 2px 8px rgba(100, 116, 139, .24);
}

.avatar-frame--silver::before,
.avatar-frame--gold::before,
.avatar-frame--star::before,
.avatar-frame--dragon::before {
    inset: 4px;
    border-radius: 50%;
    /* 旧方案依靠 ::before 实心圆遮挡渐变背景形成圆环；
       现改用 mask 挖空中心，::before 不再需要遮挡 */
}

.avatar-frame--gold {
    background: conic-gradient(from -20deg, #fff7ad, #f59e0b, #fff1a6, #b45309, #fff7ad);
    box-shadow: 0 0 0 1px rgba(217, 119, 6, .34), 0 0 12px rgba(245, 158, 11, .38);
}

.avatar-frame--star {
    background:
        radial-gradient(circle at 50% 0%, #ffffff 0 2px, transparent 3px),
        conic-gradient(from 0deg, #fef08a, #818cf8, #ffffff, #fbbf24, #818cf8, #fef08a);
    box-shadow: 0 0 14px rgba(129, 140, 248, .48);
    animation: frame-rotate 4s linear infinite;
}

.avatar-frame--star::after {
    inset: -2px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .9) 0 2px, transparent 3px);
    transform-origin: 50% 50%;
}

.avatar-frame--dragon {
    background:
        conic-gradient(from 45deg, #7f1d1d, #f59e0b, #ef4444, #991b1b, #f59e0b, #7f1d1d);
    box-shadow: 0 0 14px rgba(239, 68, 68, .42), 0 0 0 1px rgba(127, 29, 29, .38);
}

.avatar-frame--dragon::after {
    inset: 5px;
    border-radius: 50%;
    border: 1px dashed rgba(254, 202, 202, .82);
}

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

/* ========== 紧凑版头像框：用于聊天消息中的小头像（16px） ========== */
.avatar-frame-wrapper-sm {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 2px;
    line-height: 0;
    flex: 0 0 22px;
}

.avatar-frame-wrapper-sm .avatar-frame {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    -webkit-mask-image: radial-gradient(circle closest-side at center, transparent 8px, black 9px);
    mask-image: radial-gradient(circle closest-side at center, transparent 8px, black 9px);
}

.avatar-frame-wrapper-sm .avatar-frame::before,
.avatar-frame-wrapper-sm .avatar-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.avatar-frame-wrapper-sm .avatar-frame--silver::before,
.avatar-frame-wrapper-sm .avatar-frame--gold::before,
.avatar-frame-wrapper-sm .avatar-frame--star::before,
.avatar-frame-wrapper-sm .avatar-frame--dragon::before {
    inset: 2px;
    border-radius: 50%;
    /* mask 已处理环形 */
}

.avatar-frame-wrapper-sm .avatar-frame--dragon::after {
    inset: 3px;
    border-radius: 50%;
    border: 1px dashed rgba(254, 202, 202, .82);
}

.avatar-frame-wrapper-sm .avatar-frame--star::after {
    inset: -1px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .9) 0 1px, transparent 2px);
    transform-origin: 50% 50%;
}

.avatar-frame-wrapper-sm img {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    mix-blend-mode: normal;
    overflow: hidden;
    clip-path: circle(50% at 50% 50%);
    /* 头像置于框下方 */
}