/**
 * ChatScreen 样式定义
 * 支持响应式布局
 */

import { StyleSheet, Dimensions } from 'react-native';
import { colors, spacing, shadows } from '../../../../theme';

const { width: SCREEN_WIDTH } = Dimensions.get('window');

// 响应式断点
const BREAKPOINTS = {
  tablet: 768,
  desktop: 1024,
};

// 判断是否为宽屏
const isWideScreen = SCREEN_WIDTH >= BREAKPOINTS.desktop;
const isTablet = SCREEN_WIDTH >= BREAKPOINTS.tablet;

export const chatScreenStyles = StyleSheet.create({
  // 容器
  container: {
    flex: 1,
    backgroundColor: '#F0F2F5',
  },
  
  // 头部
  headerContainer: {
    backgroundColor: '#FFFFFF',
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255, 107, 53, 0.12)',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.06,
    shadowRadius: 10,
    elevation: 5,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm + 2,
    backgroundColor: '#FFFFFF',
  },
  backButton: {
    width: 38,
    height: 38,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 19,
    backgroundColor: `${colors.primary.main}12`,
    borderWidth: 1,
    borderColor: `${colors.primary.main}26`,
  },
  headerCenter: {
    alignItems: 'stretch',
    flex: 1,
    marginHorizontal: spacing.sm,
  },
  titleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 14,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs + 1,
    gap: spacing.xs + 2,
    flex: 1,
  },
  titleLeading: {
    width: 34,
    height: 34,
    borderRadius: 17,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: `${colors.primary.main}14`,
  },
  titleContent: {
    flex: 1,
    minWidth: 0,
  },
  subtitleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 2,
    gap: spacing.xs,
    minHeight: 16,
  },
  headerName: {
    fontWeight: '700',
    color: colors.text.primary,
    fontSize: 17,
    letterSpacing: -0.3,
  },
  memberCount: {
    fontSize: 12,
    color: colors.text.secondary,
    fontWeight: '500',
  },
  typingHint: {
    fontSize: 12,
    color: colors.primary.dark,
    backgroundColor: `${colors.primary.main}14`,
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 1,
  },
  moreButton: {
    width: 38,
    height: 38,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 19,
    backgroundColor: '#F7F8FA',
    borderWidth: 1,
    borderColor: '#ECEFF3',
  },
  
  // 消息列表
  messageListContainer: {
    flex: 1,
  },
  listContent: {
    paddingHorizontal: spacing.md,
    paddingTop: spacing.md,
    paddingBottom: spacing.xl,
  },
  
  // 时间分隔 - QQ风格：更明显的时间标签
  timeContainer: {
    alignItems: 'center',
    marginVertical: spacing.lg,
  },
  timeText: {
    color: '#8E8E93',
    fontSize: 12,
    backgroundColor: 'rgba(142, 142, 147, 0.12)',
    paddingHorizontal: spacing.md,
    paddingVertical: 6,
    borderRadius: 14,
    fontWeight: '600',
    overflow: 'hidden',
    letterSpacing: 0.3,
  },
  
  // 系统通知
  systemNoticeContainer: {
    alignItems: 'center',
    marginVertical: spacing.sm,
    paddingHorizontal: spacing.md,
  },
  systemNoticeText: {
    fontSize: 12,
    color: '#8E8E93',
    backgroundColor: 'rgba(142, 142, 147, 0.12)',
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.xs,
    borderRadius: 12,
    overflow: 'hidden',
  },
  
  // 消息行
  messageRow: {
    flexDirection: 'row',
    marginBottom: spacing.md,
    alignItems: 'flex-end',
  },
  myMessageRow: {
    justifyContent: 'flex-end',
  },
  theirMessageRow: {
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
  
  // 头像
  avatarWrapper: {
    marginHorizontal: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.08,
    shadowRadius: 2,
    elevation: 2,
  },
  groupAvatarWrapper: {
    marginHorizontal: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.08,
    shadowRadius: 2,
    elevation: 2,
  },
  
  // 消息内容 - 自适应宽度，限制最大宽度
  messageContent: {
    maxWidth: '75%',
    marginHorizontal: spacing.xs,
    alignItems: 'flex-start',
  },
  senderName: {
    fontSize: 13,
    color: '#4A88C7',
    marginBottom: 4,
    marginLeft: 4,
    fontWeight: '600',
  },
  
  // 消息气泡 - Telegram风格：浅色背景，统一字体颜色
  messageBubble: {
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm + 4,
    borderRadius: 16,
    // 自适应内容宽度
    minWidth: 60,
  },
  myBubble: {
    backgroundColor: '#DFF2FF', // Telegram风格的浅蓝色
    borderBottomRightRadius: 4, // 右下角尖，箭头在右下
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.08,
    shadowRadius: 2,
    elevation: 2,
  },
  theirBubble: {
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 4, // 左上角尖，箭头在左上
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.08,
    shadowRadius: 2,
    elevation: 2,
  },
  recalledBubble: {
    backgroundColor: '#F5F7FA',
    borderWidth: 1,
    borderColor: '#E8E8E8',
    borderStyle: 'dashed',
  },
  myBubbleText: {
    color: '#1A1A1A', // 统一使用深色字体
    fontSize: 16,
    lineHeight: 23,
    letterSpacing: 0.2,
    fontWeight: '400',
  },
  theirBubbleText: {
    color: '#1A1A1A', // 统一使用深色字体
    fontSize: 16,
    lineHeight: 23,
    letterSpacing: 0.2,
    fontWeight: '400',
  },
  // 选中状态
  selectedBubble: {
    borderWidth: 2,
    borderColor: '#7FB6E6',
  },
  myMessageContentPanel: {
    backgroundColor: '#DFF2FF',
    borderRadius: 14,
    paddingHorizontal: 4,
    paddingBottom: 4,
  },
  mySelectedBubble: {
    backgroundColor: '#CFEAFF',
    borderWidth: 2,
    borderColor: '#7FB6E6',
  },
  theirSelectedBubble: {
    backgroundColor: '#EEF5FC',
    borderWidth: 2,
    borderColor: '#7FB6E6',
  },
  selectedText: {
    // 文本选中时的样式
  },
  recalledText: {
    color: '#8E8E93',
    fontStyle: 'italic',
  },
  
  // 图片消息 - QQ风格：更大的图片，更明显的圆角
  imageBubble: {
    borderRadius: 18,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.15,
    shadowRadius: 6,
    elevation: 5,
  },
  myImageBubble: {
    borderBottomRightRadius: 6, // 右下角尖，箭头在右下
  },
  theirImageBubble: {
    borderTopLeftRadius: 6, // 左上角尖，箭头在左上
  },
  messageImage: {
    width: 220,
    height: 220,
    borderRadius: 18,
  },
  
  // 已读状态
  readStatusContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'flex-end',
    marginTop: 2,
    marginRight: 2,
    gap: 2,
  },
  readStatusText: {
    fontSize: 10,
    color: '#8E8E93',
    fontWeight: '500',
  },
  readStatusTextRead: {
    color: '#34C759',
  },
  
  // 输入框区域
  inputWrapper: {
    backgroundColor: 'transparent',
  },
  inputContainer: {
    backgroundColor: colors.background.paper,
    borderWidth: 1,
    borderColor: colors.divider,
    borderRadius: 24,
    marginHorizontal: 14,
    marginBottom: 12,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.sm,
    // 移除明显的阴影效果，改用更微妙的边框
    shadowColor: 'transparent',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0,
    shadowRadius: 0,
    elevation: 0,
  },
  inputInner: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#F7F8FA',
    borderRadius: 20,
    paddingHorizontal: spacing.xs,
    paddingVertical: 4,
    minHeight: 44,
    // 移除阴影效果
    shadowColor: 'transparent',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0,
    shadowRadius: 0,
    elevation: 0,
  },
  inputInnerMuted: {
    backgroundColor: '#F0F0F0',
    opacity: 0.7,
  },
  
  // 禁言提示
  mutedBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFF5F5',
    paddingVertical: spacing.xs,
    paddingHorizontal: spacing.md,
    marginBottom: spacing.xs,
    borderRadius: 8,
    gap: 6,
  },
  mutedBannerText: {
    fontSize: 13,
    color: '#FF3B30',
    fontWeight: '500',
  },
  
  // 图标按钮
  iconButton: {
    width: 38,
    height: 30,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 15,
  },
  iconButtonActive: {
    backgroundColor: `${colors.primary.main}20`,
    transform: [{ translateY: -1 }],
  },
  
  // 发送按钮
  sendButtonActive: {
    width: 38,
    height: 30,
    borderRadius: 15,
    backgroundColor: colors.primary.main,
    alignItems: 'center',
    justifyContent: 'center',
    ...shadows.md,
  },
  sendButtonDisabled: {
    opacity: 0.6,
  },
  
  // 输入框
  inputBox: {
    flex: 1,
    paddingHorizontal: spacing.xs,
    maxHeight: 100,
    justifyContent: 'center',
    // 移除阴影
    shadowColor: 'transparent',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0,
    shadowRadius: 0,
    elevation: 0,
  },
  input: {
    fontSize: 16,
    color: '#1A1A1A',
    paddingTop: 8,
    paddingBottom: 8,
    maxHeight: 100,
    lineHeight: 20,
  },
  inputMuted: {
    color: '#CCC',
  },
  inputTransparent: {
    color: 'transparent',
  },
  
  // 输入框@高亮
  inputHighlightOverlay: {
    ...StyleSheet.absoluteFillObject,
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 8,
    paddingBottom: 8,
  },
  inputHighlightText: {
    fontSize: 16,
    color: '#1A1A1A',
    lineHeight: 20,
  },
  inputHighlightMention: {
    color: colors.primary.main,
    fontWeight: '600',
  },
  
  // 加载状态
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: spacing.xl * 2,
  },
  
  // 面板
  panelWrapper: {
    backgroundColor: '#F5F7FA',
    borderTopWidth: 1,
    borderTopColor: '#E8E8E8',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 8,
  },
  // 表情面板包装器 - 底部 tab 栏是白色，安全区域也用白色填充
  emojiPanelWrapper: {
    backgroundColor: '#FFFFFF',
  },
  panelContainer: {
    flex: 1,
    backgroundColor: '#F5F7FA',
  },
  
  // 表情面板
  emojiGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: spacing.md,
    paddingTop: spacing.md,
    paddingBottom: spacing.xl,
    alignItems: 'flex-start',
  },
  emojiItem: {
    width: '12.5%',
    height: 52,
    alignItems: 'center',
    justifyContent: 'center',
  },
  emojiText: {
    fontSize: 28,
    lineHeight: 34,
  },
  panelFooter: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    borderTopWidth: 1,
    borderTopColor: '#E8E8E8',
  },
  panelCloseButton: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },

  // 面板内容区域
  panelContent: {
    flex: 1,
  },

  // Tab 栏
  panelTabBar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
    borderTopWidth: 1,
    borderTopColor: '#E8E8E8',
    backgroundColor: '#FFFFFF',
  },
  panelTab: {
    width: 44,
    height: 44,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 8,
    marginRight: spacing.xs,
  },
  panelTabActive: {
    backgroundColor: '#DFF2FF',
  },
  panelTabEmoji: {
    fontSize: 24,
  },
  panelTabDivider: {
    width: 1,
    height: 24,
    backgroundColor: '#E8E8E8',
    marginHorizontal: spacing.sm,
  },

  // 自定义表情面板
  stickerLoadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  stickerEmptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: spacing.xl,
  },
  stickerEmptyText: {
    fontSize: 16,
    color: '#666',
    marginTop: spacing.md,
    fontWeight: '500',
  },
  stickerEmptySubText: {
    fontSize: 13,
    color: '#999',
    marginTop: spacing.xs,
  },
  stickerGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: spacing.md,
    paddingTop: spacing.md,
    paddingBottom: spacing.xl,
  },
  stickerItem: {
    width: (SCREEN_WIDTH - spacing.md * 2) / 4 - 8,
    height: (SCREEN_WIDTH - spacing.md * 2) / 4 - 8,
    margin: 4,
    borderRadius: 8,
    overflow: 'hidden',
    backgroundColor: '#F5F5F5',
  },
  stickerImage: {
    width: '100%',
    height: '100%',
  },

  // 更多功能面板
  moreGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: spacing.lg,
  },
  moreItem: {
    width: (SCREEN_WIDTH - spacing.lg * 2) / 4,
    alignItems: 'center',
    marginBottom: spacing.lg,
  },
  moreIconContainer: {
    width: 60,
    height: 60,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: spacing.sm,
    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 4,
    elevation: 2,
  },
  moreItemText: {
    fontSize: 13,
    color: '#666',
    fontWeight: '500',
  },
  
  // @成员选择浮层 - 绝对定位浮在输入框上方
  mentionPanelFloat: {
    position: 'absolute',
    left: 12,
    right: 12,
    backgroundColor: '#FFFFFF',
    borderRadius: 18,
    shadowColor: colors.primary.main,
    shadowOffset: { width: 0, height: -3 },
    shadowOpacity: 0.12,
    shadowRadius: 16,
    elevation: 24,
    zIndex: 100,
    borderWidth: 1,
    borderColor: 'rgba(255, 107, 53, 0.08)',
  },

  // @成员选择面板
  mentionPanelContainer: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    borderRadius: 18,
  },
  mentionPanelDragHandle: {
    alignItems: 'center',
    paddingTop: 8,
    paddingBottom: 2,
  },
  mentionPanelDragBar: {
    width: 32,
    height: 3,
    borderRadius: 2,
    backgroundColor: '#E0E0E0',
  },
  mentionPanelHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: spacing.md,
    paddingTop: 4,
    paddingBottom: 8,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#F0F0F0',
  },
  mentionPanelTitle: {
    fontSize: 12,
    fontWeight: '600',
    color: '#AAAAAA',
    letterSpacing: 0.5,
    textTransform: 'uppercase',
  },
  mentionPanelCloseBtn: {
    width: 26,
    height: 26,
    borderRadius: 13,
    backgroundColor: '#F5F5F5',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mentionList: {
    flex: 1,
  },
  mentionItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: spacing.md,
    paddingVertical: 9,
  },
  mentionItemAll: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: spacing.md,
    paddingVertical: 9,
    backgroundColor: 'rgba(255, 107, 53, 0.04)',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: 'rgba(255, 107, 53, 0.12)',
  },
  mentionAllIcon: {
    width: 38,
    height: 38,
    borderRadius: 19,
    backgroundColor: colors.primary.main,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: colors.primary.main,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 3,
  },
  mentionItemInfo: {
    marginLeft: 10,
    flex: 1,
  },
  mentionItemName: {
    fontSize: 15,
    fontWeight: '500',
    color: '#1A1A1A',
  },
  mentionItemNameAll: {
    fontSize: 15,
    fontWeight: '600',
    color: colors.primary.main,
  },
  mentionItemSub: {
    fontSize: 12,
    color: '#BBBBBB',
    marginTop: 1,
  },
  mentionItemRole: {
    fontSize: 11,
    color: colors.primary.main,
    marginTop: 2,
    fontWeight: '500',
  },
  mentionEmpty: {
    paddingVertical: spacing.xl,
    alignItems: 'center',
  },
  mentionEmptyText: {
    fontSize: 14,
    color: '#C8C8C8',
  },
  
  // 长按菜单 - 底部横条形式（类似QQ）
  menuOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
    justifyContent: 'flex-end',
  },
  // 旧版菜单样式（保留兼容）
  menuContainer: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    minWidth: 160,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 12,
    elevation: 8,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 12,
  },
  menuItemBorder: {
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  menuItemText: {
    fontSize: 15,
    color: '#333',
    fontWeight: '500',
  },
  // 底部菜单容器
  bottomMenuContainer: {
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingTop: spacing.md,
    paddingBottom: spacing.xl,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -4 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 16,
  },
  // 消息预览区域
  messagePreviewContainer: {
    backgroundColor: '#F5F7FA',
    marginHorizontal: spacing.md,
    marginBottom: spacing.md,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    borderRadius: 12,
    maxHeight: 80,
  },
  messagePreviewText: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
  },
  // 操作按钮横条
  menuActionsRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'flex-start',
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.md,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
    marginBottom: spacing.md,
  },
  menuActionItem: {
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 64,
  },
  menuActionItemLast: {
    marginRight: 0,
  },
  menuActionIconContainer: {
    width: 56,
    height: 56,
    borderRadius: 16,
    backgroundColor: '#F0F7FF',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 8,
  },
  menuActionLabel: {
    fontSize: 13,
    color: '#333',
    fontWeight: '500',
  },
  // 取消按钮
  menuCancelButton: {
    backgroundColor: '#F5F7FA',
    marginHorizontal: spacing.md,
    paddingVertical: spacing.md,
    borderRadius: 12,
    alignItems: 'center',
  },
  menuCancelText: {
    fontSize: 16,
    color: '#333',
    fontWeight: '600',
  },
  
  // QQ风格长按菜单
  qqMenuOverlay: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  qqMenuContainer: {
    position: 'absolute',
    backgroundColor: 'rgba(0, 0, 0, 0.9)',
    borderRadius: 6,
    paddingVertical: 6,
    paddingHorizontal: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 10,
  },
  qqMenuItemsRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  qqMenuItem: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 10,
    paddingVertical: 2,
    minWidth: 52,
  },
  qqMenuItemWithBorder: {
    borderRightWidth: 1,
    borderRightColor: 'rgba(255, 255, 255, 0.15)',
  },
  qqMenuItemLabelContainer: {
    marginTop: 4,
  },
  qqMenuItemLabel: {
    fontSize: 11,
    color: '#FFFFFF',
    fontWeight: '500',
  },
  
  // 回复预览
  replyPreviewContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#F5F7FA',
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    borderLeftWidth: 3,
    borderLeftColor: colors.primary.main,
    marginBottom: spacing.xs,
  },
  replyPreviewContent: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  replyPreviewText: {
    flex: 1,
  },
  replyPreviewName: {
    fontSize: 13,
    color: colors.primary.main,
    fontWeight: '600',
  },
  replyPreviewMessage: {
    fontSize: 12,
    color: '#8E8E93',
    marginTop: 2,
  },
  replyPreviewClose: {
    padding: 4,
  },
  
  // 遮罩层
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1000,
  },
  overlayContent: {
    backgroundColor: '#FFFFFF',
    padding: spacing.xl,
    borderRadius: 16,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 12,
    elevation: 8,
  },
  overlayText: {
    marginTop: spacing.md,
    fontSize: 15,
    color: '#666',
    fontWeight: '500',
  },

  // 表情包添加按钮（管理界面第一位）
  stickerAddButton: {
    backgroundColor: '#FFFFFF',
    borderWidth: 1.5,
    borderColor: colors.primary.main,
    borderStyle: 'dashed',
    alignItems: 'center',
    justifyContent: 'center',
  },
  stickerAddContent: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  stickerAddText: {
    fontSize: 11,
    marginTop: 4,
    fontWeight: '500',
  },

  // 表情包管理按钮（表情面板第一位）
  stickerManageButton: {
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#E8E8E8',
    borderStyle: 'dashed',
    alignItems: 'center',
    justifyContent: 'center',
  },
  stickerManageContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  stickerManageText: {
    fontSize: 12,
    color: '#666',
    marginTop: 4,
    fontWeight: '500',
  },

  // 表情管理模态框（2/3高度）
  manageModalOverlay: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  manageModalBackdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
  },
  manageModalHandle: {
    width: 36,
    height: 5,
    borderRadius: 3,
    backgroundColor: '#E0E0E0',
    alignSelf: 'center',
    marginTop: 8,
    marginBottom: 4,
  },
  manageHeaderDivider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#F0F0F0',
  },

  // 表情包选择状态
  stickerItemSelected: {
    borderWidth: 2,
    borderColor: '#7FB6E6',
  },
  stickerCheckOverlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(127, 182, 230, 0.14)',
    alignItems: 'flex-end',
    justifyContent: 'flex-start',
    padding: 4,
  },
  stickerCheckBox: {
    width: 22,
    height: 22,
    borderRadius: 11,
    borderWidth: 2,
    borderColor: '#FFF',
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  stickerCheckBoxSelected: {
    backgroundColor: '#7FB6E6',
    borderColor: '#7FB6E6',
  },

  // 表情管理模态框
  manageModalContainer: {
    backgroundColor: '#F5F7FA',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    overflow: 'hidden',
  },
  manageModalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.md,
    backgroundColor: '#FFFFFF',
    borderBottomWidth: 1,
    borderBottomColor: '#E8E8E8',
  },
  manageHeaderButton: {
    minWidth: 60,
    alignItems: 'center',
  },
  manageModalTitle: {
    fontSize: 17,
    fontWeight: '600',
    color: '#1A1A1A',
  },
  manageDoneText: {
    fontSize: 16,
    color: '#4A88C7',
    fontWeight: '500',
  },
  manageSelectText: {
    fontSize: 16,
    color: '#4A88C7',
    fontWeight: '500',
  },
  manageInfoBar: {
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    backgroundColor: '#FFFFFF',
    borderBottomWidth: 1,
    borderBottomColor: '#E8E8E8',
  },
  manageInfoText: {
    fontSize: 13,
    color: '#8E8E93',
  },
  manageStickerGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: spacing.md,
    paddingTop: spacing.md,
    paddingBottom: spacing.xl,
  },
  manageBottomBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.md,
    backgroundColor: '#FFFFFF',
    borderTopWidth: 1,
    borderTopColor: '#E8E8E8',
    paddingBottom: 34, // 安全区域
  },
  manageSelectAllButton: {
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
  },
  manageSelectAllText: {
    fontSize: 15,
    color: '#4A88C7',
    fontWeight: '500',
  },
  manageDeleteButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FF3B30',
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.sm + 2,
    borderRadius: 20,
    gap: 6,
  },
  manageDeleteButtonDisabled: {
    backgroundColor: '#CCC',
  },
  manageDeleteText: {
    fontSize: 15,
    color: '#FFFFFF',
    fontWeight: '600',
  },
  manageTipBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    backgroundColor: '#FFF9E6',
    gap: 6,
  },
  manageTipText: {
    fontSize: 12,
    color: '#999',
  },

  // 管理界面空状态
  manageEmptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: spacing.xl,
    paddingVertical: spacing['4xl'],
  },
  manageEmptyIconBg: {
    width: 88,
    height: 88,
    borderRadius: 44,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: spacing.lg,
  },
  manageEmptyTitle: {
    fontSize: 17,
    fontWeight: '600',
    marginBottom: spacing.sm,
  },
  manageEmptyDesc: {
    fontSize: 14,
    textAlign: 'center',
  },
});

export default chatScreenStyles;