/*
 * == GENIUS-LEVEL UI ENGINEERING -- V6.0 (Final) ==
 *
 * Integrated for AI Killier by Cascade
 * Core Philosophy:
 * 1. The UI is not a flat plane; it is a physical object with depth and material properties.
 * 2. Interaction is not a state change; it is a physical response to the user's presence.
 * 3. Aesthetics are not decoration; they are the logical result of functional and material simulation.
*/

:root {
    --apple-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --liquid-motion-curve: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Apply perspective to the chat container to create a 3D space for the lens effect */
.chat-app-container {
    perspective: 1500px;
}

.glass-ui-container {
    max-width: 450px;
    margin: 0 auto 12px auto; /* Add some bottom margin */
    border-radius: var(--radius-xl);
    background: var(--unified-glass); /* 统一玻璃背景 */
    backdrop-filter: blur(50px) saturate(1.25);
    -webkit-backdrop-filter: blur(50px) saturate(1.25);
    border: 1px solid var(--unified-border);
    padding: 8px;
    position: relative;
    z-index: 10;
    transform: rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    transition: all 0.6s var(--apple-ease);
    box-shadow:
        inset 0px 2px 8px rgba(255, 255, 255, 0.07),
        inset -1px -2px 4px rgba(255, 255, 255, 0.04),
        0 40px 80px -20px rgba(0, 0, 0, 0.35);
}



.glass-ui-container:hover {
    transform: scale(1.05) rotateX(5deg) rotateY(-7deg) translateZ(10px);
    box-shadow:
        inset 0px 4px 15px rgba(255, 255, 255, 0.1),
        inset -2px -4px 8px rgba(255, 255, 255, 0.05),
        0 60px 100px -20px rgba(0, 0, 0, 0.4);
}



.buttons-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateZ(20px);
}

.active-state-indicator {
    position: absolute;
    top: 4px;
    left: 0;
    height: calc(100% - 8px);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-md);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
    z-index: 0;
    will-change: transform, width;
    transition: transform 0.8s var(--liquid-motion-curve), width 0.8s var(--liquid-motion-curve), background 0.5s var(--apple-ease), box-shadow 0.5s var(--apple-ease);
}

.pill-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 18px; /* 增加内边距 */
    font-size: 15px; /* 增加字体大小 */
    font-weight: 800; /* 更粗的字体重量，更显眼 */
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.85); /* 增加文字对比度 */
    cursor: pointer;
    z-index: 1;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
    transition: all 0.5s var(--apple-ease);
}

.pill-button.active {
    color: var(--unified-text); /* 统一文字色 */
    font-weight: 900; /* 最粗的字体重量，激活状态更显眼 */
    text-shadow: 0 1px 2px rgba(255,255,255,0.5); /* 添加白色阴影增强对比 */
    background: var(--unified-bg); /* 统一激活背景 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* 增强阴影深度 */
}