// 定义颜色变量
$light-blue: #e0f7fa;
$blue: #77a0cc;
$dark-blue: #587fb6;
$text-color: #333;

ion-title {
  flex: 1; // 使标题占据可用空间
  text-align: center; // 确保文字左对齐
  font-size: 30px;
  margin-left: 16px; // 左侧边距，可以根据需要调整
  margin-top: 5px;
  // font-family: 楷体;
  // font-style: italic;
  }

ion-header {
  background-color: #f5f7fc; // 设置头部背景色
  color: white; // 设置头部文字颜色
}

ion-content {
  background-color: #f9f9f9; // 内容背景颜色
}

// AI陪聊搭子区域样式
#one {
  margin: 15px;
  ion-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    ion-card-header {
      background-color: $blue;
      ion-card-title {
        color: rgb(37, 37, 37);
        font-size: 1.5rem;
      }
    }

    ion-card-content {
      ion-list {
        ion-item {
          display: flex;
          align-items: center;
          margin-top: 15px;

          ion-thumbnail {
            margin-right: 16px;
            img {
              border-radius: 50%;
              width: 50px;
              height: 50px;
            }
          }

          .filmpartner-info {
            flex: 1;
            h3 {
              color: $dark-blue;
              margin: 4px 0 0 0 0;
              font-size: 1.1rem;
            }
            p {
              color: $text-color;
              margin: 6px 0;
            }
          }

          ion-button {
            --background:#036a99;
            color: white;
            border-radius: 20px;
            &:hover {
              background-color: darken($blue, 10%);
            }
            
          }
        }
      }
    }
  }
}

// 角色互动区域样式
#two {
  margin: 15px;

  ion-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    ion-card-header {
      background-color: $blue;
      ion-card-title {
        color: rgb(37, 37, 37);
        font-size: 1.5rem;
      }
    }

    ion-card-content {
      ion-list {
        ion-item {
          margin-top: 15px;
          display: flex;
          align-items: center;

          ion-thumbnail {
            margin-right: 16px;
            img {
              border-radius: 50%;
              width: 50px;
              height: 50px;
            }
          }

          .filmpartner-info {
            flex: 1;
            h3 {
              color: $dark-blue;
              margin: 0;
              font-size: 1.1rem;
            }
            p {
              color: $text-color;
              margin: 6px 0;
            }
          }

          ion-button {
            --background:#036a99;
            color: white;
            border-radius: 20px;
            &:hover {
              background-color: darken($blue, 10%);
            }
          }
        }
      }
    }
  }
}
