.container {
  --message-container-height: 100%; /* 设置容器的固定高度 */
  //border: #e17474 1px solid;
  flex: 3;

  background-color: var(--chat-bg);

  display: flex;
  flex-direction: column;
  //height: 100%;
  min-width: 480px;
  height: 768px;

  .messageContainer {
    //border: #4f65d2 1px solid;

    --margin-gap: 18px;
    --avatar-width: 42px;
    --avatar-height: 42px;
    --message-padding: 12px;
    --message-font-size: 12px;
    --message-border-radius: 6px;
    --message-min-width: 20px;
    --message-max-width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 将消息容器中的内容右对齐 */
    padding: 10px;
    margin-top: 20px;
    //border: 1px solid #e17474;

    flex: 1;
    //height: var(--message-container-height); /* 设置容器的高度 */
    //height: calc(100% - var(--input-container-height)); /* 动态计算高度 */
    overflow-y: auto !important; /* 当内容超出容器高度时显示垂直滚动条 */
    -ms-overflow-style: none; /* 隐藏 IE 浏览器的滚动条 */
    //scrollbar-width: none; /* 隐藏 Firefox 浏览器的滚动条 */

    /* 隐藏滚动条 */
    //&::-webkit-scrollbar {
    //  display: none;
    //}

    .userMessageCell {
      display: flex;
      flex-direction: row-reverse; /* 反转用户消息单元的方向，使其右对齐 */
      align-self: flex-end; /* 单独将用户消息单元右对齐 */
      padding: 10px;
      margin-bottom: 20px;
      //border: 1px solid red;
      width: 100%;

      .userAvatar {
        width: var(--avatar-width);
        height: var(--avatar-height);
        //border: #b7902b 1px solid;
      }

      .message {
        background-color: #d2ecb2;
        margin-right: var(--margin-gap);
        font-size: var(--message-font-size);
        padding: var(--message-padding);
        border-radius: var(--message-border-radius);
        //border: #63de3a 1px solid;
        min-width: var(--message-min-width); /* Set a fixed width */
        max-width: var(--message-max-width); /* Set a fixed width */
        word-wrap: break-word; /* Allow content to wrap automatically */
        overflow-wrap: break-word; /* For older browsers */
        line-height: 2;
      }
    }

    .aiMessageCell {
      display: flex;
      flex-direction: row; /* AI消息单元保持默认方向，即左对齐 */
      align-self: flex-start; /* 单独将AI消息单元左对齐 */
      margin-bottom: 20px;
      width: 100%;
      //border: 1px solid blue;

      .aiAvatar {
        width: var(--avatar-width);
        height: var(--avatar-height);
        //border: #b7902b 1px solid;
      }

      .message {
        background-color: #daedf5;
        margin-left: var(--margin-gap);
        margin-right: var(--margin-gap);
        font-size: var(--message-font-size);
        padding: var(--message-padding);
        border-radius: var(--message-border-radius);
        //border: #63de3a 1px solid;
        min-width: var(--message-min-width); /* Set a fixed width */
        max-width: var(--message-max-width); /* Set a fixed width */
        word-wrap: break-word; /* Allow content to wrap automatically */
        overflow-wrap: break-word; /* For older browsers */
        line-height: 2;
        .markdownContent {
          max-width: 100%; /* 不超出容器 */
          word-wrap: break-word; /* 自动换行 */
          overflow-wrap: break-word; /* 兼容性换行 */
          line-height: 1.6;
          //padding: 16px;
          //background-color: #f9f9f9; /* 背景色 */
          border-radius: 8px;
        }

        /* 段落 */
        .markdownContent p {
          max-width: 100%;
          margin: 1em 0;
          color: #333;
          white-space: pre-wrap; /* 允许换行 */
        }

        /* 标题样式 */
        .markdownContent h1,
        .markdownContent h2,
        .markdownContent h3,
        .markdownContent h4,
        .markdownContent h5,
        .markdownContent h6 {
          font-weight: bold;
          color: #222;
          line-height: 1.3;
          margin: 1.2em 0 0.8em;
        }

        .markdownContent h1 {
          font-size: 2em;
        }
        .markdownContent h2 {
          font-size: 1.75em;
        }
        .markdownContent h3 {
          font-size: 1.5em;
        }
        .markdownContent h4 {
          font-size: 1.25em;
        }
        .markdownContent h5 {
          font-size: 1.1em;
        }
        .markdownContent h6 {
          font-size: 1em;
        }

        /* 列表样式 */
        .markdownContent ul,
        .markdownContent ol {
          max-width: 100%;
          padding-left: 1.5em;
          margin: 1em 0;
        }

        .markdownContent li {
          max-width: 100%;
          line-height: 1.6;
        }

        /* 引用块 */
        .markdownContent blockquote {
          max-width: 100%;
          margin: 1em 0;
          padding: 0.8em 1em;
          border-left: 4px solid #ccc;
          background-color: #f7f7f7;
          color: #555;
        }

        /* 代码块 */
        .markdownContent pre {
          max-width: 100%;
          background-color: #f4f4f4;
          padding: 1em;
          border-radius: 6px;
          overflow-x: auto;
          white-space: pre-wrap; /* 允许超长内容自动换行 */
          word-wrap: break-word;
          color: #333;
        }

        /* 行内代码 */
        .markdownContent code {
          font-family: monospace;
          background-color: #eaeaea;
          padding: 0.2em 0.4em;
          border-radius: 4px;
          font-size: 0.95em;
        }

        /* 链接样式 */
        .markdownContent a {
          color: #1a73e8;
          text-decoration: none;
        }

        .markdownContent a:hover {
          text-decoration: underline;
        }

        /* 表格样式 */
        .markdownContent table {
          width: 100%;
          border-collapse: collapse;
          margin: 1em 0;
        }

        .markdownContent th,
        .markdownContent td {
          padding: 0.75em;
          border: 1px solid #ddd;
        }

        .markdownContent th {
          background-color: #f5f5f5;
          font-weight: bold;
        }

        /* 图片样式 */
        .markdownContent img {
          max-width: 100%;
          height: auto;
          border-radius: 4px;
          margin: 1em 0;
        }
        .error {
          color: darkred;
        }
      }
    }
  }

  .inputContainer {
    --input-container-height: 260px; /* 设置 inputContainer 的高度 */
    --input: 140px;

    //border: #5d57c9 1px solid;
    position: relative;
    margin-top: auto; /* 将输入容器移动到容器的底部 */
    width: 100%; /* 将宽度设置为100% */
    align-self: flex-end; /* 将输入容器底部对齐 */
    height: var(--input-container-height); /* 设置 inputContainer 的高度 */
    //flex:1;

    border-top: var(--bgSoft) 1px solid;
    .imagePreview {
      padding: 8px;
      background-color: #f5f5f5;
      border-radius: 4px;
      margin-bottom: 8px;

      .previewContent {
        display: flex;
        align-items: center;
        gap: 8px;

        img {
          border-radius: 4px;
        }

        button {
          padding: 4px;
          &:hover {
            background-color: rgba(0, 0, 0, 0.05);
          }
        }
      }
    }

    .inputTool {
      border: #eee 1px solid;
      border-radius: 6px;
      margin: 0 4px;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .left {
      }
      .buttonTool {
        margin: 6px;
      }
    }
    .right {
    }

    .inputMessage {
      //border: #9d336c 1px solid;
      padding: 10px;

      .input {
        padding: 6px;
        border-radius: 4px;
        font-size: 14px;
        width: 100%;
        height: var(--input);
        /* 输入框样式 */
      }

      .error {
        border: #ff006a 1px solid; // 错误时的边框颜色
      }
    }

    .inputCommand {
      display: flex;
      flex-direction: row;
      padding: 4px;
      justify-content: flex-end;
      align-items: center; /* 垂直居中 */
      //border: #63de3a 1px solid;

      .shortCut {
        margin-right: 12px;
        font-size: 12px;
        padding: 4px;
        //border: #5d57c9 1px solid;
      }

      .sendButton {
        font-size: 12px;
      }
    }
  }
}
