/* 全局样式 - 苹果设计风格 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    /* 卡通风格的活泼色彩 */
    --cartoon-yellow: #FFD54F;
    --cartoon-orange: #FF9800;
    --cartoon-red: #FF5252;
    --cartoon-pink: #FF4081;
    --cartoon-purple: #9C27B0;
    --cartoon-deep-purple: #673AB7;
    --cartoon-indigo: #3F51B5;
    --cartoon-blue: #2196F3;
    --cartoon-light-blue: #03A9F4;
    --cartoon-cyan: #00BCD4;
    --cartoon-teal: #009688;
    --cartoon-green: #4CAF50;
    --cartoon-light-green: #8BC34A;
    --cartoon-lime: #CDDC39;
    --cartoon-amber: #FFC107;
    
    /* 系统颜色替换为卡通色彩 */
    --system-blue: #2196F3;
    --system-green: #4CAF50;
    --system-indigo: #3F51B5;
    --system-orange: #FF9800;
    --system-pink: #FF4081;
    --system-purple: #9C27B0;
    --system-red: #FF5252;
    --system-teal: #00BCD4;
    --system-yellow: #FFD54F;
    
    /* 保留灰色系 */
    --system-gray: #9E9E9E;
    --system-gray2: #BDBDBD;
    --system-gray3: #E0E0E0;
    --system-gray4: #EEEEEE;
    --system-gray5: #F5F5F5;
    --system-gray6: #FAFAFA;
    
    /* 背景和文本颜色 */
    --background-primary: #FFFDE7; /* 浅黄色背景，更加温暖 */
    --background-secondary: #FFF9C4; /* 浅黄色背景，稍深 */
    --text-primary: #5D4037; /* 深棕色文本，更有卡通感 */
    --text-secondary: #795548;
    --text-tertiary: #8D6E63;
    --separator: rgba(121, 85, 72, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* 暗色模式下的卡通风格背景 */
        --background-primary: #263238; /* 深蓝灰色背景 */
        --background-secondary: #37474F; /* 稍浅的蓝灰色 */
        --text-primary: #FFECB3; /* 浅黄色文本，增强对比度 */
        --text-secondary: rgba(255, 236, 179, 0.7);
        --text-tertiary: rgba(255, 236, 179, 0.5);
        --separator: rgba(255, 236, 179, 0.2);
        --shadow-color: rgba(0, 0, 0, 0.4);
        
        /* 暗色模式下的卡通色彩调整 */
        --system-blue: #4FC3F7;
        --system-green: #81C784;
        --system-orange: #FFB74D;
        --system-pink: #F48FB1;
        --system-purple: #CE93D8;
    }
}

body {
    background-color: var(--background-secondary);
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 16px;
}

.container {
    max-width: 800px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--background-primary);
    border-radius: 20px; /* 大圆角 */
    overflow: hidden;
    box-shadow: 0 8px 24px var(--shadow-color); /* 增强阴影效果 */
}

/* 头部样式 - 苹果设计风格 */
.app-header {
    text-align: center;
    padding: 20px;
    border-bottom: 3px solid var(--cartoon-yellow); /* 更精细的分隔线 */
    background-color: var(--cartoon-blue); /* 使用卡通蓝色作为头部背景 */
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px 20px 0 0; /* 上方圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.app-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.app-header h1 {
    color: white; /* 白色文字在卡通蓝背景上更显眼 */
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 6px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 添加文字阴影 */
    letter-spacing: 1px; /* 增加字间距 */
}

.app-header p {
    color: rgba(255, 255, 255, 0.9); /* 半透明白色 */
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影 */
}

/* 主要内容区域 - 苹果设计风格 */
main {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--background-primary);
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* 苹果设备上的滑动惯性 */
}

/* 消息样式 - 苹果设计风格 */
.message {
    display: flex;
    margin-bottom: 16px;
    max-width: 85%;
    position: relative;
}

.message-content {
    padding: 14px 18px;
    border-radius: 24px; /* 更大的圆角 */
    word-wrap: break-word;
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 0 3px 8px var(--shadow-color); /* 增强阴影 */
    border: 2px solid rgba(255, 255, 255, 0.2); /* 添加边框 */
}

/* 图片消息样式 - 直接显示图片，无颜色背景 */
.message-image {
    max-width: 240px;
    max-height: 320px;
    border-radius: 20px; /* 更大的圆角 */
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    object-fit: contain;
    box-shadow: 0 6px 16px var(--shadow-color); /* 增强阴影 */
    border: 4px solid white; /* 添加白色边框，像照片一样 */
    transform: rotate(2deg); /* 轻微倾斜 */
    animation: pop-in 0.5s ease-out; /* 应用弹出动画 */
}

.message-image:hover {
    transform: scale(1.05) rotate(0deg); /* 放大并取消倾斜 */
    box-shadow: 0 8px 24px var(--shadow-color);
    border-color: var(--cartoon-yellow); /* 改变边框颜色 */
}

/* 链接样式 */
.message a {
    color: var(--system-blue);
    text-decoration: none;
    font-weight: 500;
}

.message a:hover {
    text-decoration: underline;
}

.user {
    justify-content: flex-end;
    margin-left: auto;
}

.user .message-content {
    background-color: var(--cartoon-orange); /* 活泼的橙色 */
    color: white;
    border-bottom-right-radius: 8px;
    transform: rotate(1deg); /* 轻微倾斜，增加活泼感 */
    animation: pop-in 0.3s ease-out; /* 添加弹出动画 */
}

.bot {
    justify-content: flex-start;
    margin-right: auto;
}

.bot .message-content {
    background-color: var(--cartoon-light-blue); /* 浅蓝色 */
    color: white;
    border-bottom-left-radius: 8px;
    transform: rotate(-1deg); /* 向另一个方向倾斜 */
    animation: pop-in 0.3s ease-out; /* 添加弹出动画 */
}

.system {
    justify-content: center;
    margin: 12px auto;
}

.system .message-content {
    background-color: var(--cartoon-yellow); /* 黄色背景 */
    color: var(--text-primary);
    text-align: center;
    font-size: 1em;
    font-weight: 500;
    border-radius: 20px;
    padding: 10px 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 2px dashed var(--cartoon-amber); /* 虚线边框，更加卡通 */
}

/* 输入区域 - 苹果设计风格 */
.input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--separator);
    background-color: var(--background-primary);
}

.input-wrapper {
    display: flex;
    align-items: center;
    background-color: white; /* 使用纯白色背景 */
    border-radius: 30px; /* 更大的圆角 */
    padding: 6px 10px 6px 20px;
    box-shadow: 0 4px 12px var(--shadow-color);
    border: 3px solid var(--cartoon-light-blue); /* 添加强调边框 */
    transition: all 0.3s ease;
}

.input-wrapper:focus-within {
    transform: scale(1.02); /* 聚焦时轻微放大 */
    border-color: var(--cartoon-blue); /* 改变边框颜色 */
    box-shadow: 0 6px 16px var(--shadow-color);
}

#user-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    resize: none;
    height: 44px;
    outline: none;
    font-size: 16px;
    color: var(--text-primary);
}

#user-input::placeholder {
    color: var(--text-tertiary);
}

#send-button {
    background-color: var(--cartoon-green); /* 使用绿色 */
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px; /* 增大按钮尺寸 */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    transform: rotate(5deg); /* 轻微倾斜，增加活泼感 */
}

#send-button:hover {
    background-color: var(--cartoon-light-green);
    transform: scale(1.1) rotate(10deg); /* 更大的缩放和旋转 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#send-button:active {
    transform: scale(0.9) rotate(0deg);
    background-color: var(--cartoon-green);
}

#send-button svg {
    width: 20px;
    height: 20px;
}

/* 加载动画 - 苹果设计风格 */
.typing {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    margin-right: auto;
}

.typing .message-content {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background-color: var(--cartoon-light-blue);
    animation: bounce 1s infinite ease-in-out; /* 添加跳动动画 */
}

.typing-dot {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    margin: 0 3px;
    animation: typing 1.2s infinite ease-in-out;
    opacity: 0.8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

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

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

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* 页脚样式 - 苹果设计风格 */
.app-footer {
    text-align: center;
    padding: 16px;
    color: white;
    font-size: 0.9em;
    font-weight: 500;
    border-top: 3px solid var(--cartoon-yellow); /* 与头部匹配的分隔线 */
    background-color: var(--cartoon-blue); /* 与头部匹配的背景色 */
    border-radius: 0 0 20px 20px; /* 底部圆角 */
}

/* 添加动画效果 */
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    70% {
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 响应式设计 - 卡通风格 */
@media (max-width: 768px) {
    .container {
        width: 100%;
        height: 100vh;
        max-width: none;
    }
    
    .message {
        max-width: 90%;
    }
    
    .message-image {
        max-width: 200px;
    }
    
    .app-header h1 {
        font-size: 1.3rem;
    }
    
    .app-header p {
        font-size: 0.8rem;
    }
    
    #user-input {
        height: 40px;
    }
}

/* 触摸设备优化 */
@media (hover: none) {
    .message-image:hover {
        transform: none;
    }
    
    #send-button:hover {
        background-color: var(--system-blue);
        transform: none;
    }
    
    #send-button:active {
        transform: scale(0.95);
    }
}