/**
 * xychat - CSS变量系统
 * 日间/夜间主题
 * 参考: docs/5-VARIABLES.md
 */

:root {
  /* === 品牌色 (Brand Colors) === */
  /* 品牌色和品牌副色理解为高亮色（用于按钮、链接等交互元素） */
  --brand-primary: #007AFF;
  --brand-primary-hover: #0051D5;
  --brand-primary-active: #004BB8;
  --brand-secondary: #5856D6;
  --brand-accent: #FF9500;
  
  /* === 语义色 (Semantic Colors) === */
  --semantic-success: #34C759;
  --semantic-warning: #FF9500;
  --semantic-error: #FF3B30;
  --semantic-info: #007AFF;
  
  /* === 背景层 (Background Layers) === */
  --bg-app: #F2F2F7;
  --bg-phone: #000000;
  --bg-screen: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-input: #F2F2F7;
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-active: rgba(0, 0, 0, 0.1);
  --bg-primary: var(--bg-screen);
  --bg-secondary: #F7F7FA;
  --bg-tertiary: #EAEAEE;
  
  /* === 文本层 (Text Layers) === */
  --text-primary: #000000;
  --text-secondary: #8E8E93;
  --text-tertiary: #C7C7CC;
  --text-quaternary: #D1D1D6;
  --text-on-primary: #FFFFFF;
  --text-on-dark: #FFFFFF;
  --text-link: #007AFF;
  
  /* === 组件层 (Component Layers) === */
  --border-color: #C6C6C8;
  --border-light: #E5E5EA;
  --divider-color: #E5E5EA;
  --shadow-color: rgba(0, 0, 0, 0.1);
  
  /* === 特殊组件颜色 === */
  --statusbar-bg: rgba(248, 248, 248, 0.92);
  --tabbar-bg: var(--bg-screen);
  --navbar-bg: rgba(248, 248, 248, 0.9);
  /* 系统状态栏颜色（不带透明度，用于meta theme-color和桌面背景） */
  --statusbar-system-color: #F8F8F8;
  --statusbar-meta-color: var(--statusbar-system-color);
  --statusbar-app-bg: var(--statusbar-system-color);
  --statusbar-surface-bg: transparent;

  /* 悬浮球（AI 队列悬浮球）基础颜色 - 日间模式 */
  --float-ball-bg-rgb: 248, 248, 248;
  --float-ball-bg-alpha: 0.86;
  --float-ball-border: rgba(255, 255, 255, 0.7);
  --float-ball-shadow-alpha: 0.28;
  --float-ball-badge-bg: rgba(var(--accent-color-rgb), 0.95);
  --float-ball-pulse-border: rgba(var(--accent-color-rgb), 0.45);

  /* 兼容旧代码的变量（未来可移除） */
  --island-bg: rgba(var(--float-ball-bg-rgb), var(--float-ball-bg-alpha));
  --island-text: #FFFFFF;
  --nav-bg: var(--navbar-bg);
  --card-bg: var(--bg-card);
  --input-bg: var(--bg-input);
  --hover-bg: var(--bg-hover);
  --accent-color: var(--brand-primary);
  --accent-secondary: var(--brand-secondary);
  --accent-color-rgb: 0, 122, 255;
  /* 边框色调（高亮色理解为边框发光色，用于主题按钮等组件的边框发光效果，默认使用accent-color） */
  --border-tint-highlight: var(--accent-color);
  --border-tint-rgb: var(--accent-color-rgb);
  --success-color: var(--semantic-success);
  --error-color: var(--semantic-error);
  --semantic-success-rgb: 52, 199, 89;
  --semantic-error-rgb: 255, 59, 48;
  --semantic-warning-rgb: 255, 149, 0;
  
  /* === 遮罩和透明度颜色 === */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --toast-success-bg: rgba(52, 199, 89, 0.9);
  --toast-error-bg: rgba(255, 59, 48, 0.9);
  --toast-warning-bg: rgba(255, 149, 0, 0.9);
  --toast-default-bg: rgba(0, 0, 0, 0.85);
  --error-bg-light: rgba(255, 59, 48, 0.1);
  
  /* === 聊天气泡 === */
  --bubble-user: #007AFF;
  --bubble-ai: #E5E5EA;
  --bubble-user-text: #FFFFFF;
  --bubble-ai-text: #000000;
  
  /* === 动画/阴影 === */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color);
  --shadow-lg: 0 8px 24px var(--shadow-color);
  
  /* === 尺寸变量 === */
  --phone-width: 375px;
  --phone-height: 812px;
  --phone-radius: 40px;
  --notch-height: 30px;
  --statusbar-height: 30px;
  --tabbar-height: 49px;
  --android-composer-boost: 40vh;
  --safe-area-bottom: 0px;

  
  /* === 字体变量 === */
  /* 默认使用系统字体，内置字体仅为可选项，版权声明需保留 */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xxs: 10px;      /* 超小号 - 辅助信息 */
  --font-size-xs: 11px;       /* 极小号 - 次要辅助信息 */
  --font-size-xs-md: 12px;    /* 极小中号 - 次要文本 */
  --font-size-sm: 13px;       /* 小号 - 次要文本 */
  --font-size-md: 14px;       /* 中小号 - 次要文本 */
  --font-size-base: 15px;     /* 基础字号 - 正文 */
  --font-size-base-lg: 16px;  /* 基础大号 - 正文强调 */
  --font-size-lg: 17px;       /* 大号 - 标题 */
  --font-size-xl: 20px;       /* 超大号 - 大标题 */
  --font-size-xl-lg: 22px;    /* 超大号+ - 特殊标题 */
  --font-size-2xl: 24px;      /* 2倍超大 - 页面标题 */
  --font-size-3xl: 28px;      /* 3倍超大 - 大页面标题 */
  --font-size-4xl: 40px;      /* 4倍超大 - 特殊展示 */
  --font-size-5xl: 48px;      /* 5倍超大 - 特殊展示 */
  
  /* === 层级变量 === */
  --z-phone: 1000;
  --z-screen: 1001;
  --z-statusbar: 1100;
  --z-navbar: 1100;
  --z-tabbar: 1100;
  --z-island: 1200;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-loading: 3100;
  
  /* === 桌面图标变量 === */
  --icon-size: 60px; /* 桌面图标尺寸，与desktop.css中实际使用的值一致 */
  --icon-size-dock: 56px; /* Dock图标尺寸（已废弃，使用--dock-icon-size） */
  --icon-svg-size: 40px;
  --icon-svg-size-dock: 32px;
  --icon-radius: 14px;
  --icon-radius-dock: 12px;
  --icon-gap: 20px;
  --icon-gap-dock: 8px;
  
  /* === 统一玻璃效果变量（小组件和DOCKER栏共用） === */
  --glass-blur: 0.8px; /* 统一的毛玻璃模糊值，比之前低 */
  --glass-bg: rgba(255, 255, 255, 0.2); /* 日间模式：优雅的白色半透明背景 */
  --glass-border: rgba(255, 255, 255, 0.4); /* 日间模式：柔和的白色边框 */
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* 日间模式：柔和的阴影 */
  
  /* === Dock栏变量 === */
  --dock-height: 95px; /* 固定高度,不随设备变化 */
  --dock-icon-size: 56px; /* 固定图标尺寸 */
  --dock-bottom: 12px;
  --dock-bg: var(--glass-bg); /* 使用统一玻璃背景色 */
  --dock-border: var(--glass-border); /* 使用统一变量 */
  --dock-shadow: var(--glass-shadow); /* 使用统一变量 */
  --dock-backdrop: blur(var(--glass-blur)); /* 使用统一变量 */
  --dock-border-radius: 24px;
  --dock-padding: 12px 16px;
  --dock-gap: 8px;
  
  /* === 小组件变量 === */
  --widget-surface: rgba(255, 255, 255, 0.85);
  --widget-surface-strong: rgba(255, 255, 255, 0.95);
  --widget-surface-muted: rgba(255, 255, 255, 0.65);
  --widget-text-strong: rgba(20, 24, 35, 0.98);
  --widget-text-muted: rgba(20, 24, 35, 0.7);
  --widget-glass-bg: var(--glass-bg); /* 使用统一玻璃背景色 */
  --widget-glass-bg-hover: rgba(255, 255, 255, 0.8); /* 悬停时稍微更不透明 */
  --widget-border: var(--glass-border); /* 使用统一变量 */
  --widget-border-strong: var(--glass-border); /* 使用统一变量 */
  --widget-card-bg-start: rgba(255, 255, 255, 0.6); /* 渐变起始，使用统一风格 */
  --widget-card-bg-end: rgba(255, 255, 255, 0.4); /* 渐变结束，使用统一风格 */
  --widget-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --widget-box-shadow: var(--glass-shadow); /* 使用统一变量 */
  --widget-border-radius: 24px;
  --widget-border-radius-sm: 18px;
  --widget-border-radius-lg: 28px;
  --widget-carousel-dot: rgba(0, 0, 0, 0.25);
  --widget-carousel-dot-active: rgba(0, 0, 0, 0.6);
  --widget-polaroid-bg: #fffdf8;
  --widget-polaroid-text: rgba(40, 40, 40, 0.75);
  --widget-player-border: rgba(0, 0, 0, 0.08);
  --blur-amount: var(--glass-blur); /* 使用统一变量 */
  --blur-strong: var(--glass-blur); /* 使用统一变量（不再区分强弱） */
  --text-white: #ffffff;
  
  /* 小组件渐变色 */
  --widget-gradient-1-start: #ff6b6b;
  --widget-gradient-1-end: #4ecdc4;
  --widget-gradient-2-start: #ff6b6b;
  --widget-gradient-2-end: #ff8e53;
  --widget-gradient-3-start: #4ecdc4;
  --widget-gradient-3-end: #44a08d;
  --widget-gradient-4-start: #667eea;
  --widget-gradient-4-end: #764ba2;
  
  /* === 页面变量 === */
  --page-padding: 16px;
  --page-padding-mobile: 12px;
  --icon-gap-mobile: 10px;
  --page-indicator-height: 20px;
  --page-indicator-bg: rgba(0, 0, 0, 0.06);
  --page-indicator-border: rgba(0, 0, 0, 0.08);
  --page-dot-bg: rgba(0, 0, 0, 0.18);
  --page-dot-active-bg: var(--brand-primary);
  --font-size-xxl: 32px;
  --desktop-grid-columns: 4;
  --desktop-grid-rows: 6;
  --icon-size-min: 48px;
  --icon-size-max: 72px;
  
  /* === 全局导航栏标准变量 === */
  --navbar-height: 44px;
  --navbar-padding: 12px 16px;
  --navbar-bg-standard: var(--navbar-bg);
  --navbar-border: var(--border-color);
  --nav-title-font-size: 18px;
  --nav-title-font-weight: 600;
  --navbar-btn-color: #007AFF;
  
  /* === 兼容性变量别名（用于旧代码） === */
  --color-bg: var(--bg-screen);
  --color-surface: var(--bg-card);
  --color-border: var(--border-color);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-primary: var(--brand-primary);
  --color-primary-light: rgba(var(--accent-color-rgb), 0.1);
  --color-success: var(--semantic-success);
  --color-warning: var(--semantic-warning);
  --color-error: var(--semantic-error);
  --color-info: var(--semantic-info);
  
  /* === Novel/Moments应用变量别名 === */
  --background: var(--bg-screen);
  --surface: var(--bg-card);
  --border: var(--border-color);
  --hover: var(--bg-hover);
  --primary: var(--brand-primary);
  --success: var(--semantic-success);
  --warning: var(--semantic-warning);
  --error: var(--semantic-error);
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  :root {
    --safe-area-bottom: env(safe-area-inset-bottom);
  }
}

@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  :root {
    --safe-area-bottom: constant(safe-area-inset-bottom);
  }
}

/* === 夜间主题 === */
[data-theme="dark"] {
  /* 品牌色 */
  /* 品牌色和品牌副色理解为高亮色（用于按钮、链接等交互元素） */
  --brand-primary: #0A84FF;
  --brand-primary-hover: #409CFF;
  --brand-primary-active: #0077ED;
  --brand-secondary: #5E5CE6;
  --brand-accent: #FF9F0A;
  
  /* 语义色 */
  --semantic-success: #30D158;
  --semantic-warning: #FF9F0A;
  --semantic-error: #FF453A;
  --semantic-info: #0A84FF;
  
  /* 背景层 */
  --bg-app: #000000;
  --bg-phone: #000000;
  --bg-screen: #1C1C1E;
  --bg-card: #2C2C2E;
  --bg-elevated: #3A3A3C;
  --bg-input: #1C1C1E;
  --bg-hover: rgba(255, 255, 255, 0.1);
  --bg-active: rgba(255, 255, 255, 0.2);
  --bg-primary: var(--bg-screen);
  --bg-secondary: #2C2C2E;
  --bg-tertiary: #3A3A3C;
  
  /* 文本层 */
  --text-primary: #FFFFFF;
  --text-secondary: #8E8E93;
  --text-tertiary: #48484A;
  --text-quaternary: #3A3A3C;
  --text-on-primary: #FFFFFF;
  --text-on-dark: #FFFFFF;
  --text-link: #0A84FF;
  
  /* 组件层 */
  --border-color: #38383A;
  --border-light: #2C2C2E;
  --divider-color: #38383A;
  --shadow-color: rgba(0, 0, 0, 0.5);
  
  /* 特殊组件 */
  --statusbar-bg: rgba(28, 28, 30, 0.9);
  --tabbar-bg: rgba(28, 28, 30, 0.9);
  --navbar-bg: rgba(28, 28, 30, 0.9);
  /* 系统状态栏颜色（不带透明度，用于meta theme-color） */
  --statusbar-system-color: #1C1C1E;
  --statusbar-meta-color: var(--statusbar-system-color);
  --statusbar-app-bg: var(--statusbar-system-color);
  --statusbar-surface-bg: transparent;
  --island-bg: #3A3A3C;
  --island-text: #FFFFFF;
  --nav-bg: var(--navbar-bg);
  --card-bg: var(--bg-card);
  --input-bg: var(--bg-input);
  --hover-bg: rgba(255, 255, 255, 0.08);
  --accent-color: var(--brand-primary);
  --accent-secondary: var(--brand-secondary);
  --accent-color-rgb: 10, 132, 255;
  /* 边框色调（高亮色理解为边框发光色，用于主题按钮等组件的边框发光效果，默认使用accent-color） */
  --border-tint-highlight: var(--accent-color);
  --border-tint-rgb: var(--accent-color-rgb);
  --success-color: var(--semantic-success);
  --error-color: var(--semantic-error);
  --semantic-success-rgb: 48, 209, 88;
  --semantic-error-rgb: 255, 69, 58;
  --semantic-warning-rgb: 255, 159, 10;
  
  /* === 统一玻璃效果变量（夜间模式） === */
  --glass-bg: rgba(28, 28, 30, 0.2); /* 夜间模式：深色半透明背景，优雅的暗色 */
  --glass-border: rgba(255, 255, 255, 0.18); /* 夜间模式：微妙的白色边框，形成精致对比 */
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* 夜间模式：更深的阴影，增强层次感 */
  
  /* === Dock栏变量（夜间模式） === */
  --dock-bg: var(--glass-bg); /* 使用统一玻璃背景色 */
  --dock-border: var(--glass-border); /* 使用统一变量 */
  --dock-shadow: var(--glass-shadow); /* 使用统一变量 */
  
  /* 悬浮球（AI 队列悬浮球）基础颜色 - 夜间模式 */
  --float-ball-bg-rgb: 44, 44, 46;
  --float-ball-bg-alpha: 0.9;
  --float-ball-border: rgba(255, 255, 255, 0.22);
  --float-ball-shadow-alpha: 0.45;
  --float-ball-badge-bg: rgba(var(--accent-color-rgb), 0.98);
  --float-ball-pulse-border: rgba(var(--accent-color-rgb), 0.55);
  
  /* === 小组件变量（夜间模式） === */
  --widget-surface: rgba(40, 40, 44, 0.8);
  --widget-surface-strong: rgba(58, 58, 60, 0.92);
  --widget-surface-muted: rgba(44, 44, 46, 0.65);
  --widget-text-strong: #FFFFFF;
  --widget-text-muted: rgba(255, 255, 255, 0.72);
  --widget-glass-bg: var(--glass-bg); /* 使用统一玻璃背景色 */
  --widget-glass-bg-hover: rgba(28, 28, 30, 0.75); /* 悬停时稍微更不透明 */
  --widget-border: var(--glass-border); /* 使用统一变量 */
  --widget-border-strong: var(--glass-border); /* 使用统一变量 */
  --widget-card-bg-start: rgba(40, 40, 44, 0.7); /* 渐变起始，使用统一风格 */
  --widget-card-bg-end: rgba(28, 28, 30, 0.5); /* 渐变结束，使用统一风格 */
  --widget-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --widget-box-shadow: var(--glass-shadow); /* 使用统一变量 */
  --widget-carousel-dot: rgba(255, 255, 255, 0.3);
  --widget-carousel-dot-active: rgba(255, 255, 255, 0.88);
  --widget-polaroid-bg: #2C2C2E;
  --widget-polaroid-text: rgba(255, 255, 255, 0.72);
  --widget-player-border: rgba(255, 255, 255, 0.25);
  
  /* === 页面变量（夜间模式） === */
  --page-indicator-bg: rgba(255, 255, 255, 0.08);
  --page-indicator-border: rgba(255, 255, 255, 0.15);
  --page-dot-bg: rgba(255, 255, 255, 0.25);
  --page-dot-active-bg: rgba(255, 255, 255, 0.9);
  
  /* === 遮罩和透明度颜色（夜间模式） === */
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --toast-success-bg: rgba(48, 209, 88, 0.9);
  --toast-error-bg: rgba(255, 69, 58, 0.9);
  --toast-warning-bg: rgba(255, 159, 10, 0.9);
  --toast-default-bg: rgba(0, 0, 0, 0.9);
  --error-bg-light: rgba(255, 69, 58, 0.15);
  
  /* 聊天气泡 */
  --bubble-user: #0A84FF;
  --bubble-ai: #2C2C2E;
  --bubble-user-text: #FFFFFF;
  --bubble-ai-text: #FFFFFF;
  
  /* === 全局导航栏标准变量（夜间模式） === */
  --navbar-bg-standard: var(--navbar-bg);
  --navbar-btn-color: #0A84FF;
  
  /* === 兼容性变量别名（夜间模式） === */
  --color-bg: var(--bg-screen);
  --color-surface: var(--bg-card);
  --color-border: var(--border-color);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-primary: var(--brand-primary);
  --color-primary-light: rgba(var(--accent-color-rgb), 0.1);
  
  /* === Novel/Moments应用变量别名（夜间模式） === */
  --background: var(--bg-screen);
  --surface: var(--bg-card);
  --border: var(--border-color);
  --hover: var(--bg-hover);
  --primary: var(--brand-primary);
  --success: var(--semantic-success);
  --warning: var(--semantic-warning);
  --error: var(--semantic-error);
}

/* ==================== 全局按钮样式 ==================== */
/* 全局保存按钮样式 */
.btn-save,
.beautify-btn-save {
  background: var(--accent-color);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-sm);
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-save:hover,
.beautify-btn-save:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-save:active,
.beautify-btn-save:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* 全局重置按钮样式 */
.btn-reset,
.beautify-btn-reset {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  padding: 12px;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-reset:hover,
.beautify-btn-reset:hover {
  background: var(--bg-hover);
  box-shadow: var(--shadow-md);
}

.btn-reset:active,
.beautify-btn-reset:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-sm);
}

/* ==================== 全局确认弹窗样式 ==================== */
/* 遮罩层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  animation: modalFadeIn var(--transition-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-overlay.show {
  opacity: 1;
}

/* 确认弹窗对话框 */
.modal-dialog {
  background: var(--card-bg);
  border-radius: 16px;
  width: 80%;
  max-width: 260px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: modalScaleIn 0.2s;
  border: 1px solid var(--border-light);
}

.modal-dialog .modal-header {
  padding: 20px 20px 12px;
  text-align: center;
}

.modal-dialog .modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.modal-dialog .modal-body {
  padding: 0 20px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.6;
}

.modal-dialog .modal-body p {
  margin: 0;
}

.modal-dialog .modal-footer {
  display: flex;
  /* 移除分隔线 */
}

.modal-dialog .modal-footer .btn {
  flex: 1;
  padding: 12px 16px;
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 0;
  min-height: 44px;
}

.modal-dialog .modal-footer .btn:first-child {
  border-bottom-left-radius: 16px;
}

.modal-dialog .modal-footer .btn:last-child {
  border-bottom-right-radius: 16px;
}

.modal-dialog .modal-footer .btn-secondary {
  color: var(--text-secondary);
}

.modal-dialog .modal-footer .btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal-dialog .modal-footer .btn-secondary:active {
  background: var(--bg-active);
}

.modal-dialog .modal-footer .btn-primary {
  color: var(--accent-color);
  font-weight: 600;
}

.modal-dialog .modal-footer .btn-primary:hover {
  background: rgba(var(--accent-color-rgb), 0.1);
  color: var(--accent-color);
}

.modal-dialog .modal-footer .btn-primary:active {
  background: rgba(var(--accent-color-rgb), 0.15);
}

.modal-dialog .modal-footer .btn + .btn {
  border-left: 1px solid var(--divider-color);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalScaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}