/* --- Robot Face Animation (Empty State) --- */
.empty-state {
    margin-top: auto; margin-bottom: auto; /* Vertically center */
    padding-bottom: 20px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    animation: fadeIn 0.5s ease forwards;
}

.robot-face-animation {
    display: flex; flex-direction: column; 
    align-items: center;
    margin-bottom: 20px;
    transition: all 0.3s;
}

/* Eye container: fix alignment issues */
.eyes-container {
    display: flex; 
    justify-content: center; 
    gap: 24px; /* Space between eyes */
    margin-bottom: 10px;
}

.robot-face-animation .eye {
    width: 16px; height: 36px; /* Vertical rectangle */
    background: var(--robot-eye-color);
    border-radius: 8px;
    animation: blink 3.5s infinite ease-in-out;
    transform-origin: center center;
}

.robot-face-animation .mouth {
    width: 40px; height: 8px;
    background: var(--robot-mouth-color);
    border-radius: 4px;
}

/* Blink keyframes: quick close */
@keyframes blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

.empty-state h2 { 
    font-size: 20px; color: var(--text-main); 
    margin: 0 0 15px; font-weight: 500; 
}

/* Quick Suggestion Chips */
.suggestion-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.suggestion-chips span {
    background: white; border: 1px solid var(--border-light);
    padding: 8px 16px; border-radius: 20px; font-size: 13px;
    color: var(--text-secondary); transition: all 0.2s; cursor: pointer;
}
.suggestion-chips span:active { transform: scale(0.95); background: #F9FAFB; }

/* 呼吸练习按钮特殊样式 */
.suggestion-chips .breathing-chip {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(102,126,234,0.3);
}

.suggestion-chips .breathing-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
}

.suggestion-chips .breathing-chip:active {
    transform: scale(0.95) translateY(0);
}

/* --- Message Bubble Styles --- */
.message-group { width: 100%; margin-bottom: 16px; }

.time-divider { text-align: center; margin: 10px 0; }
.time-divider span {
    font-size: 11px; color: #9CA3AF; background: rgba(0,0,0,0.03);
    padding: 2px 8px; border-radius: 8px;
}

.message { display: flex; flex-direction: column; max-width: 90%; }
.message.user { align-items: flex-end; margin-left: auto; }
.message.ai { align-items: flex-start; margin-right: auto; }

.bubble-content {
    padding: 12px 16px; 
    font-size: 15px; line-height: 1.5;
    border-radius: 18px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    word-wrap: break-word;
    position: relative;
    white-space: pre-wrap; /* 保留换行符和空格，支持诗词、段落格式 */
}

.message.user .bubble-content { 
    background: var(--accent-color); color: white; 
    border-bottom-right-radius: 4px; 
}
.message.ai .bubble-content { 
    background: white; 
    border: 1px solid var(--border-light); 
    border-bottom-left-radius: 4px; 
}

/* AI Streaming Output Cursor */
.bubble-content .cursor {
    display: inline-block; width: 2px; height: 1em; 
    background: var(--accent-color);
    margin-left: 2px; animation: cursorBlink 1s infinite; vertical-align: sub;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* AI Thinking Cursor */
.thinking-cursor {
    color: var(--accent-color);
    animation: thinkingBlink 1.2s infinite;
    font-weight: bold;
    font-size: 16px;
    margin-left: 2px;
    vertical-align: sub;
}
@keyframes thinkingBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* 识别时的跳跃省略号效果 */
.recognition-dots {
    display: inline-block;
}
.recognition-dots .dot {
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
    font-size: 16px;
    line-height: 1;
}
.recognition-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.recognition-dots .dot:nth-child(2) { animation-delay: -0.16s; }
.recognition-dots .dot:nth-child(3) { animation-delay: 0s; }

@keyframes bounce {
    0%, 80%, 100% { 
        transform: scale(0.8) translateY(0px);
        opacity: 0.7;
    }
    40% { 
        transform: scale(1) translateY(-10px);
        opacity: 1;
    }
}

/* Responsive Adaptation */
@media screen and (min-width: 800px) {
    .eyes-container { gap: 40px; }
    .robot-face-animation .eye { width: 22px; height: 50px; }
    .robot-face-animation .mouth { width: 70px; height: 14px; }
}

@media screen and (max-height: 350px) {
    .empty-state { min-height: auto; margin-top: 5px; padding-bottom: 5px; }
    /* Shrink face */
    .robot-face-animation { margin-bottom: 10px; transform: scale(0.75); transform-origin: bottom center; } 
    .empty-state h2 { font-size: 16px; margin-bottom: 5px; }
}