/* 鏁翠綋甯冨眬 */
.page-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content { 
    flex: 1;
    display: flex;
    height: calc(100vh - 100px); /* 鍑忓幓澶撮儴楂樺害 */
}
 
/* 宸︿晶杈撳叆鍖哄煙 */
.left-panel {
    width: 60%;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    display: flex; 
    flex-direction: column;
    padding: 15px; /* 鍑忓皯鍐呰竟璺� */
    position: relative; /* 娣诲姞鐩稿瀹氫綅浠ユ敮鎸佺粷瀵瑰畾浣嶇殑鎻愮ず娑堟伅 */
}  

.input-header {
    background-color: #007bff;
    color: white;
    padding: 10px; /* 鍑忓皯鍐呰竟璺� */ 
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.input-header h3 {
    margin: 0;
    font-size: 16px; /* 鍑忓皬瀛椾綋 */
}

.dialog-input-container {
    flex: 1;
    background-color: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px; 
    display: flex;
    flex-direction: column;
}  

.dialog-textarea {
    flex: 1;   
    border: none;
    outline: none; 
    padding: 15px; /* 减少内边距 */
    font-size: 14px;
    line-height: 1.6;
    resize: none; 
    font-family: 'Courier New', monospace;
    /* 添加高度限制 */
    min-height: 120px;
    max-height: 200px;
    height: 150px;
}
 
.dialog-textarea:focus {
    box-shadow: none; 
}

.input-controls {
    padding: 10px; /* 鍑忓皯鍐呰竟璺� */
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6; 
    display: flex;
    gap: 10px;
} 

.generate-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.generate-btn:hover {
    background-color: #218838;
} 
  
.ai-generate-btn {
    background-color: #6f42c1;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.ai-generate-btn:hover {
    background-color: #5a32a3;
}

.ai-generate-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.clear-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.clear-btn:hover {
    background-color: #c82333;
}

.screenshot-btn {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;   
    font-size: 14px;
}

.screenshot-btn:hover { 
    background-color: #138496;
}

.zip-btn {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;   
    font-size: 14px;
}

.zip-btn:hover {
    background-color: #138496;
}

.video-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;   
    font-size: 14px;
}

.video-btn:hover {
    background-color: #218838;
}

.video-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.legal-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.legal-btn:hover {
    background-color: #5a6268;
}

/* 鍙充晶灞曠ず鍖哄煙 */
.right-panel { 
    width: 40%;
    background-color: transparent; /* 绉婚櫎鑳屾櫙鑹� */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 鏀逛负椤堕儴瀵归綈 */
    padding: 0; /* 绉婚櫎鍐呰竟璺� */
    overflow-y: auto; /* 濡傛灉鏁翠釜闈㈡澘鍐呭杩囧锛屽厑璁告粴鍔� */
}

.wechat-container {
    max-width: 600px;
    width: 100%;
    background-color: #ffffff; /* 明确设置白色背景，确保截图效果 */
    border-radius: 0; /* 移除圆角 */
    box-shadow: none; /* 移除阴影 */
    overflow: hidden; /* 改为hidden，防止内容溢出 */
    height: 900px;  /* 固定高度为900px */
    min-height: 900px;  /* 设置合适的最小高度，确保手机截图效果 */
    /* 使用flexbox布局确保内容正确排列 */
    display: flex;
    flex-direction: column;
    position: relative; /* 添加相对定位 */
}

.chat-messages {
    background-color: #f5f5f5; /* 改为灰色背景，更符合微信对话框风格 */
    padding: 19px 19px 19px 19px; /* 从20px改为30px，增加左右内边距 */
    height: 700px; /* 调整消息区域高度，为footer留出空间 */
    overflow: hidden; /* 隐藏溢出内容 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 消息从底部开始排列，新消息会顶出旧消息 */
    position: relative; /* 添加相对定位 */
    flex: 1; /* 让消息区域占据剩余空间 */
}

.chat-header-img {
    width: 100%; 
    height: auto;
    display: block;
    border-radius: 0; /* 绉婚櫎鍦嗚 */
    object-fit: cover; /* 淇濇寔鍥剧墖姣斾緥 */
    position: relative; /* 娣诲姞鐩稿瀹氫綅 */
}

/* 鏃堕棿鏄剧ず鏍峰紡 */
.header-time {
    position: absolute;
    top: 20px;
    left: 44px;
    color: #000; /* 榛戣壊鏂囧瓧 */
    font-size: 27px;
    font-weight: bold;
    font-family: "SimHei", "榛戜綋", sans-serif; /* 浣跨敤榛戜綋瀛� */
    z-index: 10;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* 娣诲姞鐧借壊闃村奖鎻愰珮鍙鎬� */
}

/* 闅忔満鏁板瓧鏄剧ず鏍峰紡 */
.header-number {
    position: absolute;
    top: 90px; /* 鏇村線涓嬶紝浠�30px鏀逛负45px */
    left: 60px; /* 鏇村線鍙筹紝浠�15px鏀逛负25px */
    color: #000; /* 榛戣壊鏂囧瓧 */
    font-size: 22px; /* 瀛椾綋鏇村ぇ锛屼粠14px鏀逛负18px */ 
    font-weight: bold;
    font-family: "SimHei", "榛戜綋", sans-serif; /* 浣跨敤榛戜綋瀛� */
    z-index: 10;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* 娣诲姞鐧借壊闃村奖鎻愰珮鍙鎬� */
}
 
/* 鏄电О鏄剧ず鏍峰紡 */
.header-nickname {
    position: absolute;
    bottom: 15px; /* 鍦ㄥ浘鐗囧簳閮� */
    left: 50%;
    transform: translateX(-50%); /* 姘村钩灞呬腑 */
    color: #000; /* 榛戣壊鏂囧瓧 */
    font-size: 25px;
    font-family: "SimHei", "榛戜綋", sans-serif; /* 浣跨敤榛戜綋瀛� */
    z-index: 10;
}

.chat-footer-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; /* 绉婚櫎鍦嗚 */
    object-fit: cover; /* 淇濇寔鍥剧墖姣斾緥 */
}


/* 空消息区域样式 */
.chat-messages:empty::before {
    content: '';
    display: block;
    height: 700px; /* 更新为空状态时保持最小高度，与chat-messages高度一致 */
}

/* 头像样式调整 */
.avatar-img {
    width: 62px;
    height: 62px;
    margin: 0;
    object-fit: cover;
    flex-shrink: 0; /* 防止头像被压缩 */
    margin-top: 0; /* 移除顶部外边距，与消息气泡对齐 */
    border-radius: 8px; /* 添加圆角效果 */
}

 
/* 娑堟伅甯冨眬璋冩暣 */
.message {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start; /* 椤堕儴瀵归綈 */
    gap: 18px;
    font-size: 1.35vw;
    width: 100%; /* 纭繚娑堟伅鍗犳弧瀹藉害 */
}

.message:last-child {
    margin-bottom: 26px; /* 鏈鍚庝竴鏉℃秷鎭鍔犲簳閮ㄩ棿璺 */
}

.message.user {
    justify-content: flex-end;
}  

.message.other {
    justify-content: flex-start;
} 

/* 娑堟伅姘旀场璋冩暣 */  
.message-content {
    max-width: calc(75% - 30px); /* 浠85%鏀逛负75%锛岃娑堟伅鏇寸煭锛屽鍔犱笌杈圭紭鐨勮窛绂 */
    padding: 8px 12px;
    border-radius: 6px;
    word-wrap: break-word; 
	position: relative;
    margin-top: 0; /* 绉婚櫎椤堕儴杈硅窛锛屼笌澶村儚瀵归綈 */
    line-height: 1.4; /* 璋冩暣琛岄珮浣挎枃瀛楀瀭鐩村眳涓 */
    min-height: 62px; /* 璁剧疆鏈灏忛珮搴︿笌澶村儚涓鑷 */
    display: flex; 
    align-items: center; /* 鏂囧瓧鍨傜洿灞呬腑 */
    line-height: 1.5; /* 澧炲姞琛岄棿璺 */
    white-space: normal;  /* 鏀逛负normal璁╂祻瑙堝櫒鑷姩澶勭悊绌虹櫧 */
    line-height: 1.4;     /* 璋冩暣鍚堥傜殑琛岄珮 */
}

/* 鐢ㄦ埛娑堟伅姘旀场鏍峰紡 */
.message.user .message-content {
    background-color: #95ec69;
    color: #000;
    margin-left: 8px; /* 涓轰笁瑙掑舰鐣欏嚭绌洪棿 */
}

/* 瀵规柟娑堟伅姘旀场鏍峰紡 */
.message.other .message-content {
    background-color: white;
    color: #000;
    border: none; /* 绉婚櫎杈规锛屾洿绗﹀悎寰俊鏁堟灉 */
    margin-right: 8px; /* 涓轰笁瑙掑舰鐣欏嚭绌洪棿 */
}

/* 鐢ㄦ埛娑堟伅姘旀场涓夎褰紙鍙充晶锛� */
.message.user .message-content::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 20px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left-color: #95ec69;
    border-right: 0;
}

/* 瀵规柟娑堟伅姘旀场涓夎褰紙宸︿晶锛� */
.message.other .message-content::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 20px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-right-color: white; /* 涓庢皵娉¤儗鏅壊鐩稿悓 */
    border-left: 0;
} 

/* 绂佺敤瀵规柟鏅�氭秷鎭殑::after浼厓绱狅紝閬垮厤鍙岄噸涓夎褰� */
.message.other .message-content:not(.has-image):not(.has-voice)::after {
    display: none;
}

/* 璇煶娑堟伅绂佺敤::before涓夎褰紝鍙娇鐢�::after */
.message.other .message-content.has-voice::before {
    display: none;
}

/* 鍥剧墖娑堟伅鏍峰紡 */
.message-content img.dialog-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 2px; /* 缁嗗井鐨勫渾瑙掞紝鏇寸鍚堝井淇℃晥鏋� */
    display: block;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
    border: none; /* 绉婚櫎杈规 */
    box-shadow: none; /* 绉婚櫎闃村奖 */
}

.message-content img.dialog-image:hover {
    opacity: 0.8;
}

/* 鍥剧墖娑堟伅姘旀场鐗规畩鏍峰紡 */
.message-content.has-image {
    padding: 4px;
    min-height: auto;
    align-items: flex-start;
}

.message-content.has-image::after,
.message-content.has-image::before {
    top: 8px;
}

.message.other .message-content.has-image::after,
.message.other .message-content.has-image::before {
    top: 8px;
}

.message-time {
    font-size: 12px;
    color: #666; 
    margin: 15px 0 10px 0;
    text-align: center;
    padding: 8px 15px;
    border-radius: 15px;
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    width: auto; 
    position: relative;
}

 
.message-time span {
    background-color: #f0f0f0;
    padding: 0 10px;
    position: relative;
    z-index: 2;
}

/* 鏄电О杈撳叆妗嗘牱寮� */
.nickname-input-container {
    margin-bottom: 15px;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px;
}

.nickname-input-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

.nickname-input {
    width: 150px; /* 杩涗竴姝ョ缉鐭搴� */
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.nickname-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 鐢熸垚瀵硅瘽鏃堕棿鍕鹃�夐」鏍峰紡 */
.generate-time-option {
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
}

.generate-time-option label {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    margin: 0;
}

.generate-time-option input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

/* 多图截屏控件样式 */
.generate-time-option input[type="number"] {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 12px;
    text-align: center;
    background-color: white;
    transition: border-color 0.3s ease;
}

.generate-time-option input[type="number"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.generate-time-option input[type="number"]::-webkit-inner-spin-button,
.generate-time-option input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    height: 20px;
}

/* 鍝嶅簲寮忚璁� */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }
    
    .left-panel, .right-panel {
        width: 100%;
    }
    
    .left-panel {
        height: 50%;
    }
    
    .right-panel {
        height: 50%;
    }
}

/* 澶村儚閫夋嫨鍖哄煙鏍峰紡 */
.avatar-selection {
    margin-bottom: 15px;
    background-color: white;
    /* 移除边框和分隔线 */
    border: none;
    border-radius: 0;
    padding: 15px;
    /* 添加统一的背景和阴影 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.avatar-selection h5 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    /* 添加底部边框作为分隔 */
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 8px;
}

/* 移除Bootstrap列之间的分隔 */
.avatar-selection .row {
    margin-left: 0;
    margin-right: 0;
}

.avatar-selection .col-md-6 {
    padding-left: 0;
    padding-right: 0;
    border: none;
}

/* 为两个区域添加统一的背景 */
.avatar-selection .col-md-6:first-child {
    border-right: 1px solid #f0f0f0;
    padding-right: 15px;
}

.avatar-selection .col-md-6:last-child {
    padding-left: 15px;
}

.avatar-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 120px;
    overflow-y: auto;
}

.avatar-option {
    display: inline-block;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.2s;
}

.avatar-option:hover {
    border-color: #007bff;
}

.avatar-option input[type="radio"] {
    display: none;
}

.avatar-option input[type="radio"]:checked + img {
    border: 2px solid #007bff;
    border-radius: 4px;
}

.avatar-option img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    transition: border-color 0.2s;
}

/* 鏂囦欢涓婁紶鏍峰紡 */
.avatar-upload {
    display: inline-block;
    cursor: pointer;
    border: 2px dashed #ccc;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    transition: border-color 0.2s;
    position: relative;
}

.avatar-upload:hover {
    border-color: #007bff;
    background-color: #e3f2fd;
}

.avatar-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.avatar-upload-icon {
    font-size: 16px;
    color: #666;
}

.avatar-upload:hover .avatar-upload-icon {
    color: #007bff;
}

/* 涓婁紶鍚庣殑澶村儚鏍峰紡 */
.avatar-option.uploaded {
    position: relative;
}

.avatar-option.uploaded .remove-avatar {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.avatar-option.uploaded:hover .remove-avatar {
    opacity: 1;
}

/* 鑷畾涔夎緭鍏ユ鏍峰紡 */
.custom-input-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.custom-input-container {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-width: 300px;
}

.custom-input-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.custom-input-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.custom-input-field:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.custom-input-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.custom-input-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.custom-input-btn.cancel {
    background-color: #6c757d;
    color: white;
}

.custom-input-btn.cancel:hover {
    background-color: #5a6268;
}

.custom-input-btn.confirm {
    background-color: #007bff;
    color: white;
}

.custom-input-btn.confirm:hover {
    background-color: #0056b3;
}

/* 宸︿晶鎻愮ず鏍峰紡 */
.left-panel-message {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    padding: 8px 12px;
    z-index: 1000; /* 纭繚鍦ㄥ叾浠栧唴瀹逛箣涓� */
    display: none; /* 榛樿闅愯棌 */
    border-radius: 4px;
    margin: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.left-panel-message-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.left-panel-message-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.left-panel-message-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

.left-panel-message-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.left-panel-message-content {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.left-panel-message-content .message-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.left-panel-message-content i {
    font-size: 14px;
    flex-shrink: 0;
}

.left-panel-message-content span {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.left-panel-message-close {
    cursor: pointer;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.left-panel-message-close:hover {
    opacity: 1;
}

/* 鍥剧墖棰勮妯℃�佹鏍峰紡 */
.image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-container {
    background-color: white;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.image-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: #f8f9fa;
}

.image-preview-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.image-preview-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.image-preview-close:hover {
    background-color: #e9ecef;
    color: #333;
}

.image-preview-content {
    padding: 20px;
    text-align: center;
}

.image-preview-content img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
 
.insert-image-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s;
    margin-left: 5px;
}

.insert-image-btn:hover {
    background-color: #218838;
}

/* 鎻掑叆鍥剧墖妯℃�佹鏍峰紡 */
.custom-input-modal#insertImageModal {
    display: none;
}

.custom-input-container#insertImageModal {
    max-width: 600px;
}

.custom-input-title#insertImageModal {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

/* 椤堕儴淇℃伅flex甯冨眬 */
@media (max-width: 768px) {
    .chat-header-img {
        width: 100%;
        height: auto;
    }
    .header-time,
    .header-number,
    .header-nickname {
        position: static !important; /* 鍙栨秷缁濆瀹氫綅锛屾敼涓烘祦寮� */
        display: inline-block;
        font-size: 12px; 
        margin: 0 4px;
        vertical-align: middle;
    }
    .wechat-container > div[style*="position: relative"] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        position: relative;
    }
    .header-nickname {
        flex: 1;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
    }
    .header-time, .header-number {
        min-width: 40px;
        text-align: center;
    }
} 

/* 璇煶娑堟伅鏍峰紡 */
.message-content.has-voice {
    background-color: #95ec69;
    border-radius: 18px;
    padding: 8px 12px;
    min-width: 80px;
    max-width: 200px;
    position: relative;
}

.message.other .message-content.has-voice {
    background-color: white;
}

.voice-message {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.voice-icon {
    color: #333;
    font-size: 16px;
    animation: voice-pulse 1.5s ease-in-out infinite;
}

.voice-duration {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    min-width: 30px;
}

.voice-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}

.voice-bar {
    width: 2px;
    background-color: #333;
    border-radius: 1px;
    animation: voice-wave 1.5s ease-in-out infinite;
}

.voice-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.voice-bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }
.voice-bar:nth-child(3) { height: 16px; animation-delay: 0.2s; }
.voice-bar:nth-child(4) { height: 12px; animation-delay: 0.3s; }
.voice-bar:nth-child(5) { height: 8px; animation-delay: 0.4s; }

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

@keyframes voice-wave {
    0%, 100% { 
        transform: scaleY(1);
        opacity: 0.6;
    }
    50% { 
        transform: scaleY(1.5);
        opacity: 1;
    }
}

/* 璇煶娑堟伅姘旀场鏍峰紡 */
.message.user .message-content.has-voice::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid #95ec69;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.message.other .message-content.has-voice::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-right: 8px solid white;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* 璇煶娑堟伅鎮仠鏁堟灉 */
.voice-message:hover {
    opacity: 0.8;
}

.voice-message:hover .voice-icon {
    animation-duration: 0.8s;
}

.voice-message:hover .voice-bar {
    animation-duration: 0.8s;
}

/* 绉诲姩绔�傞厤 */
@media (max-width: 768px) {
    .voice-message {
        gap: 6px;
    }
    
    .voice-duration {
        font-size: 13px;
    }
    
    .voice-icon {
        font-size: 14px;
    }
    
    .voice-bar {
        width: 1.5px;
    }
    
    .voice-bar:nth-child(1) { height: 6px; }
    .voice-bar:nth-child(2) { height: 10px; }
    .voice-bar:nth-child(3) { height: 14px; }
    .voice-bar:nth-child(4) { height: 10px; }
    .voice-bar:nth-child(5) { height: 6px; }
}