/* AI客服系统 - CSS变量定义 - 基于现有样式效果 */
/* 基础变量 - 完全按照现有CSS效果定义 */
:root {
    /* 字体 - 与现有样式保持一致 */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* 间距 - 基于现有样式 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* 圆角 - 基于现有样式 */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 50%;
    
    /* 阴影 - 基于现有样式 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    
    /* 过渡动画 - 基于现有样式 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 毛玻璃效果（默认主题 - 完全按照现有样式） */
    --primary-color: #007AFF;
    --primary-hover: #0056CC;
    --secondary-color: #6c757d;
    --success-color: #00C851;
    --warning-color: #ffa726;
    --danger-color: #ff3b30;
    --info-color: #17a2b8;
    
    /* 背景和文本 - 完全按照现有渐变背景 */
    --background: linear-gradient(135deg, 
        #ff9a9e 0%, 
        #fecfef 25%, 
        #fecfef 50%, 
        #a8edea 75%, 
        #d299c2 100%);
    --text-color: #1a1a1a;
    --text-color-secondary: #666;
    --text-color-muted: #999;
    
    /* 卡片和容器 - 完全按照现有毛玻璃效果 */
    --card-background: rgba(255, 255, 255, 0.95);
    --card-background-hover: rgba(255, 255, 255, 0.98);
    --card-background-light: rgba(255, 255, 255, 0.85);
    --border-color: rgba(255, 255, 255, 0.2);
    --border-color-hover: rgba(255, 255, 255, 0.3);
    --border-color-input: rgba(0, 0, 0, 0.1);
    
    /* 毛玻璃效果 - 完全按照现有样式 */
    --backdrop-filter: blur(20px);
    --backdrop-filter-light: blur(10px);
    --backdrop-filter-mini: blur(3px);
    
    /* 按钮样式 - 完全按照现有样式 */
    --button-primary-bg: #007AFF;
    --button-primary-color: white;
    --button-primary-hover: #0056CC;
    --button-secondary-bg: white;
    --button-secondary-color: #1a1a1a;
    --button-secondary-hover: #f8f9fa;
    
    /* 输入框样式 - 完全按照现有样式 */
    --input-background: white;
    --input-border: rgba(0, 0, 0, 0.1);
    --input-border-focus: #007AFF;
    --input-placeholder: #999;
    
    /* 状态颜色 - 完全按照现有样式 */
    --status-online: #00C851;
    --status-offline: #ff6b6b;
    --status-reconnecting: #ffa726;
    --status-error: #f44336;
    
    /* 用户头像渐变 - 完全按照现有样式 */
    --avatar-gradient: linear-gradient(135deg, #FF8A65, #FF7043);
    --avatar-shadow: 0 2px 8px rgba(255, 138, 101, 0.3);
    
    /* AI头像渐变 - 完全按照现有样式 */
    --ai-avatar-gradient: linear-gradient(135deg, #007AFF, #0056CC);
    --ai-avatar-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
    
    /* 消息气泡样式 - 完全按照现有样式 */
    --user-message-bg: #007AFF;
    --user-message-color: white;
    --user-message-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
    
    /* 通知样式 - 完全按照现有样式 */
    --notification-bg: white;
    --notification-border: rgba(0, 0, 0, 0.1);
    --notification-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    /* 加载动画 - 完全按照现有样式 */
    --loading-bg: rgba(255, 255, 255, 0.1);
    --loading-border: rgba(255, 255, 255, 0.1);
    --loading-text: rgba(255, 255, 255, 0.7);
}

/* 主题变量将在各个主题文件中定义 */