/* Main Interface Container (Glassmorphism) */
.chat-interface {
    position: relative; 
    z-index: 1;
    width: 100%; height: 100%;
    /* Use Flex vertical layout to ensure footer stickiness */
    display: flex; 
    flex-direction: column;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px); /* Glass effect */
}

/* ==========================================================================
   Header: Top Status Bar
   ========================================================================== */
.chat-header {
    height: var(--header-height);
    padding: 0 16px;
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0; /* Prevent shrinking */
}

.header-info { display: flex; align-items: center; gap: 10px; }

/* Avatar and Breathing Light */
.avatar-container {
    position: relative; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
}

.avatar {
    width: 100%; height: 100%; 
    background: #EEF2FF; color: var(--accent-color);
    border-radius: 10px; 
    display: flex; align-items: center; justify-content: center;
    z-index: 2; 
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.15);
    overflow: hidden;
}

/* Avatar Logo */
.avatar-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

/* Emotion Avatar (显示表情 emoji) */
.emotion-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* 从 24px 缩小到 20px */
    animation: emotionPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes emotionPop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Mini Robot Face (appears after conversation) */
.robot-mini-face {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(0.9);
}

.mini-eyes-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 2px;
}

.mini-eye {
    width: 6px; 
    height: 16px; 
    background: var(--robot-eye-color);
    border-radius: 3px;
    animation: blink 3.5s infinite ease-in-out; 
    transform-origin: center center;
}

.pulse-ring {
    position: absolute; width: 100%; height: 100%; 
    border-radius: 10px;
    border: 2px solid var(--accent-color); opacity: 0;
    animation: pulse-ring 2s infinite; 
    z-index: 1;
}

@keyframes pulse-ring { 
    0% { transform: scale(1); opacity: 0.5; } 
    100% { transform: scale(1.5); opacity: 0; } 
}

.meta h1 { margin: 0; font-size: 16px; font-weight: 700; }
.btn-icon { 
    background: none; border: none; 
    color: var(--text-secondary); padding: 8px; cursor: pointer;
}

/* ==========================================================================
   Body: Chat Content Area (Core Scroll Zone)
   ========================================================================== */
.chat-body {
    flex: 1; /* Occupy all remaining vertical space */
    min-height: 0; /* Key fix for nested scrollbars in Flexbox */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.chat-body::-webkit-scrollbar { display: none; }

/* Content Limit Container (Wide Screen Adaptation) */
.content-wrapper {
    width: 100%; 
    max-width: var(--container-max-width);
    margin: 0 auto; 
    display: flex; flex-direction: column;
    min-height: 100%;
}

/* ==========================================================================
   Footer: Bottom Status Bar (No Button Design)
   ========================================================================== */
.chat-footer-status {
    height: var(--footer-height);
    background: white;
    border-top: 1px solid var(--border-light);
    display: flex; align-items: center; padding: 0 16px;
    flex-shrink: 0;
}

.status-bar {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.2s ease;
}

.status-bar.clickable {
    cursor: pointer;
    background-color: rgba(74, 144, 226, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
}

.status-bar.clickable:hover {
    background-color: rgba(74, 144, 226, 0.2);
    transform: translateY(-1px);
}

.status-text { font-size: 13px; color: var(--accent-color); font-weight: 500; }

/* Mini Waveform - Only jumps when listening */
.mini-wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.mini-wave .bar { width: 3px; background: #D1D5DB; border-radius: 2px; height: 4px; transition: all 0.2s; }

/* Waveform Animation in Active State */
.mini-wave.active .bar { background: var(--accent-color); animation: miniWave 1s infinite ease-in-out; }
.mini-wave.active .bar:nth-child(1) { animation-delay: 0.1s; }
.mini-wave.active .bar:nth-child(2) { animation-delay: 0.2s; }
.mini-wave.active .bar:nth-child(3) { animation-delay: 0.3s; }
.mini-wave.active .bar:nth-child(4) { animation-delay: 0.1s; }

@keyframes miniWave { 
    0%, 100% { height: 4px; } 
    50% { height: 14px; } 
}

/* Responsive Adaptation */
@media screen and (min-width: 800px) {
    .chat-header, .chat-footer-status { padding-left: 40px; padding-right: 40px; }
}

@media screen and (max-height: 350px) {
    .chat-header { padding: 0 12px; }
    .meta h1 { font-size: 14px; }
    .avatar-container { width: 28px; height: 28px; }
    .avatar-container .avatar { border-radius: 8px; }
    .chat-footer-status { padding: 0 10px; }
    .status-text { font-size: 12px; }
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}