/* 设置页面的背景颜色 */
ion-content {
    --background: #f0f8ff; /* 浅蓝色背景 */
    padding: 16px; /* 内容内边距 */
    font-family: 'Comic Sans MS', cursive, sans-serif; /* 可爱的字体 */
    position: relative; /* 允许绝对定位的子元素 */
  }
  
  h1 {
    font-size: 30px; /* 标题字体大小 */
    color: #d85144; /* 可爱的粉色 */
    // margin-bottom: 12px; /* 标题底部间距 */
    // text-align: left; /* 左对齐 */
    // text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.5); /* 文字阴影 */
  }
  
  /* 标题样式 */
  h2 {
    font-size: 26px; /* 标题字体大小 */
    color: #ff6f61; /* 可爱的粉色 */
    margin-bottom: 12px; /* 标题底部间距 */
    text-align: left; /* 左对齐 */
    // text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.5); /* 文字阴影 */
  }
  
  /* 输入框和文本区域样式 */
  ion-input,
  ion-textarea {
    background-color: #ffffff; /* 白色背景 */
    border: 2px solid #ff6f61; /* 粗虚线边框，粉色 */
    border-radius: 12px; /* 圆角 */
    padding: 12px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
    margin-bottom: 20px; /* 输入框底部间距 */
    transition: border-color 0.3s ease; /* 动画效果 */
  }
  
  /* 输入框聚焦时的样式 */
  ion-input:focus,
  ion-textarea:focus {
    border-color: #007bff; /* 聚焦时的边框颜色，蓝色 */
    // box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* 聚焦时的阴影效果 */
  }
  
  /* 按钮样式 */
  ion-button {
    --background: #036a99;/* 按钮背景色，蓝色 */
    color: white; /* 按钮字体颜色 */
    --border-radius: 20px; /* 按钮圆角 */
    font-size: 18px; /* 按钮字体大小 */
    transition: background-color 0.3s ease, transform 0.2s; /* 动画效果 */
  }
  
  /* 按钮悬停样式 */
  ion-button:hover {
    transform: scale(1.05); /* 悬停时放大按钮 */
  }
  
  /* 消息展示区域样式 */
  div {
    background-color: #ffe4e1; /* 浅粉色背景 */
    border-radius: 12px; /* 圆角 */
    padding: 12px; /* 内边距 */
    margin-top: 20px; /* 顶部间距 */
    font-size: 16px; /* 字体大小 */
    color: #333; /* 字体颜色 */
    //border-left: 5px solid #ff6f61; /* 左侧边框，粉色 */
    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  }
  
  /* Markdown 预览样式 */
  fm-markdown-preview {
    background-color: #ffffff; /* 白色背景 */
    border-radius: 12px; /* 圆角 */
    padding: 12px; /* 内边距 */
    margin-top: 20px; /* 顶部间距 */
    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    // border: 2px #ff6f61; /* 虚线边框，粉色 */
  }