/* 优化后的公共样式文件 */
* { box-sizing: border-box; max-width: 100%; }
input, textarea, select { max-width: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.card-base {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.nav-primary-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #2D9D78;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -1.5rem;
    box-shadow: 0 4px 12px rgba(45,157,120,0.3);
}

.nav-normal-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    padding: 0.5rem;
}

.nav-normal-btn.active {
    color: #2D9D78;
}

/* 铃铛摇晃动画 */
@keyframes shakeBell {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
    20%, 40%, 60%, 80% { transform: rotate(10deg); }
}

.bell-shake {
    animation: shakeBell 1s ease-in-out;
    display: inline-block;
}

/* 持续摇晃动画 */
@keyframes shakeBellContinuous {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg); }
    20%, 40%, 60%, 80% { transform: rotate(8deg); }
}

.bell-shake-continuous {
    animation: shakeBellContinuous 2s ease-in-out infinite;
    display: inline-block;
}

/* 消息气泡样式 */
.message-sent {
    background: linear-gradient(135deg, #2D9D78 0%, #25a06b 100%);
    color: white;
    border-radius: 18px 18px 4px 18px;
}

.message-received {
    background: white;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 18px 18px 18px 4px;
}

.message-bubble {
    max-width: 70%;
    padding: 10px 14px;
    word-wrap: break-word;
}

.message-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    cursor: pointer;
}