/* 隐藏滚动条但保持滚动功能 */
#chat-history,#conversationList {
  overflow: auto;
  -ms-overflow-style: none;  /* IE和Edge */
  scrollbar-width: none;     /* Firefox */
}

#chat-history::-webkit-scrollbar,#conversationList::-webkit-scrollbar {
  display: none;  /* Chrome, Safari和Opera */
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Microsoft YaHei', 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1d1d1f;
  overflow-y: hidden;
  font-size:16px;
}

input[type="text"],textarea {
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size:16px;
}

a{text-decoration: none; color:#333;}

.tc { text-align:center;}
.dn { display:none;}

.abtn {
    display:inline-block;
    padding:8px 15px;
    border:1px solid #e5e5e5;
    background:#fff;
    font-size:14px;
}

        hr {
            height: 1px;            /* 高度1px */
            border: none;           /* 移除默认边框 */
            background-color: #ddd; /* 灰色背景 */
            background-image: repeating-linear-gradient(
                to right,
                transparent,
                transparent 4px,
                #ddd 4px,
                #ddd 8px
            );                      /* 虚线效果 */
            margin: 20px 0;         /* 上下边距 */
        }

table {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
            font-family: Arial, sans-serif;
            margin: 20px 0;
        }
        
        th, td {
            border: 1px solid #ddd; /* 1px灰色边框 */
            padding: 8px;
            text-align: left;
        }
        
        th {
            background-color: #f2f2f2; /* 表头浅灰色背景 */
            font-weight: bold;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9; /* 偶数行浅灰色背景 */
        }
        
        tr:hover {
            background-color: #f1f1f1; /* 鼠标悬停效果 */
        }

pre{
   line-height: 1.8;
    background:#f6f6f6;
    padding:20px;
    border-radius:10px;
}
pre code{
    font-size:14px;
}

pre code.language-text {
    display: block; 
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height:1.8 !important;
  font-size:14px;
  color:#888;
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
padding-left:20px;
}

  .ban-txt {
    max-width: 800px;
    margin: 0 auto; /* 居中容器 */
    text-align: center; /* 文本居中 */
    padding-top:10vw;
  }

    .ban-txt .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }

   .ban-txt .sub-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
  }

.container {
    width:90%;
  max-width: 1000px;
  margin: 0px auto;
  padding: 0;
  background-color: #ffffff;
  overflow: hidden;
}

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-header {
  background-color: #fff;
  padding: 16px;
  color: #555;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h2 {
  margin: 0;
  font-size: 20px;
}

#clear {
  background-color: #eee;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

#clear:hover {
  background-color: #ddd;
}

#chat-history {
  flex: 1;
  overflow-y: auto;
  background-color: #fff;
}

.default-questions {
  padding: 16px 0;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.default-question {
  padding: 8px 16px;
  background-color: #ffffff;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.default-question:hover {
  background-color: #0071e3;
  color: white;
  border-color: #0071e3;
}

.message-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.message-container.user {
  flex-direction: row-reverse;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  display:none;
}

.avatar.bot {
  background-color: #0071e3;
  color: white;
}

.avatar.user {
  background-color: #34c759;
  color: white;
}

.message {
  max-width: 90%;
  padding: 12px;
  border-radius: 8px;
  position: relative;
  line-height:1.8;
}

.message p { margin: 0;}

.user-message {
  background-color: #f3f3f3;
  color: #000;
}

.bot-message {
  background-color: #ffffff;
  line-height:1.8;
}



.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #0071e3;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 提示词工具栏 */

.tag-container {
            display: flex;
            gap: 10px;
            position: relative;
            margin-bottom:10px;
        }
        
        .tag-item {
            background-color: white;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            font-size:14px;
        }
        
        .tag-item:hover {
            background-color: #f9f9f9;
            border-color: #e3e3e3;
        }
        
        .expand-btn {
            background-color: white;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            padding: 8px 15px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size:14px;
        }
        
        .expand-btn:hover {
            background-color: #f9f9f9;
            border-color: #e3e3e3;
        }
        
        .expanded-panel {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 100%;
            background-color: white;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: none;
            z-index: 10;
            height:60vh;
            overflow:auto;
             box-sizing: border-box;
        }
        
        .expanded-panel .box{
             display: flex;
              flex-wrap: wrap;
              gap: 10px;
        }
        
        .expanded-card {
            flex-basis: calc(50% - 20px);
            padding: 10px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            transition: all 0.2s ease;
             box-sizing: border-box;
             
            cursor: pointer;
        }
        
        .expanded-card:hover {
            background-color: #f9f9f9;
            border-color: #e0e0e0;
        }
        
        .card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
        }
        
        .card-prompt {
            color: #666;
            font-size: 0.9em;
            margin-left: 28px;
        }
        
        .use-btn {
            align-self: flex-end;
            background-color: #f0f0f0;
            border: none;
            border-radius: 15px;
            padding: 5px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.8em;
        }
        
        .use-btn:hover {
            background-color: #e0e0e0;
        }

.input-area {
  padding: 10px;
  background-color: #f6f6f6;
  border: 1px solid #e5e5e5;
  border-radius:15px;
  position:relative;
}

.input-area textarea {
  width:100%;
  resize: none;
  background:none;
  border:0;
  font-size: 16px;
  outline:none;
}

.input-area .input-bottom{
    display:flex;
      justify-content: space-between; /* 两端对齐 */
  align-items: flex-end;        /* 底部对齐 */
    
}

.input-area .btns {
     
}

.blank {height:20px;}

#stop,#submit  {
  width: 50px;
  height: 50px;
  background-color: #ff3b30;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#stop:hover {
  background-color: #ff1a1a;
}

#submit {
  background-color: #0071e3;
}

#submit:hover {
  background-color: #0062cc;
}


.body {
            display: flex;
            height: 100vh; /* 全屏高度 */
            width: 100%;   /* 全屏宽度 */
        }
        .sidebar {
            width: 260px;
            height: 100vh; /* 与屏幕同高 */
            background-color: #f6f6f6;
            color: #555;
            display: flex;
            flex-direction: column;
            border-right:1px solid #e5e5e5;
        }
        
        /* 顶部区域 */
        .top-section {
            padding: 20px;
            border-bottom: 1px solid #e5e5e5;
        }
        
        .logo {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 35px;
            display: flex;
            align-items: center;
        }
        
        .logo img {
            margin-right: 8px;
        }
        
        .new-chat-btn {
            width: 100%;
            padding: 5px;
            background-color: #fff;
            color: #707070;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid #e5e5e5;
            font-size:14px;
        }
        
        .new-chat-btn:hover {
            background-color: #f6f6f6;
        }
        
        /* 中间对话列表 */
        .conversation-list {
            flex: 1; /* 占据剩余空间 */
            overflow-y: auto;
            padding: 10px 0;
            font-size:14px;
        }
        
        .conversation-item {
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            margin: 2px 10px;
        }
        .conversation-item.ok {background:#fff;}
        .conversation-item .actions { display:none;}
        
        .conversation-item:hover {
            background-color: #f3f3f3;
        }
        
        .conversation-item:hover .actions { display:block;}
        
        /* 底部个人中心 */
        .bottom-section {
            padding: 15px;
            border-top: 1px solid #e5e5e5;
            display: flex;
            align-items: center;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #7f8c8d;
            margin-right: 10px;
            overflow: hidden;
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .user-name {
            font-size: 14px;
        }
        
        main{
             flex: 1;
        }
        
        
        /* 模型选择菜单 */
        
    .dropdown {
    font-size:14px;
  }

  .dropdown div.tit {
    cursor: pointer;
    padding: 0 10px;
    background-color: #fff;
    color: #333;
    border: 1px solid #e5e5e5;
    text-align: center;
    display: flex;
    border-radius:8px;
    height:30px;
     justify-content: center; 
    align-items: center;
  }
  
  .dropdown div.tit svg{ margin-right:5px;}

  .dropdown-content {
    display: none;
    position: absolute;
    left:0;
    bottom:30px;
    background-color: #fff;
    min-width: 130px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius:10px;
    overflow:hidden;
  }

  .dropdown-content a {
    color: black;
    padding: 8px 0 8px 15px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {background-color: #f5f5f5}

  .dropdown:hover .dropdown-content {
    display: block;
  }

  .dropdown div.tit:hover {
    color:#000;
  }
  
  /* 折叠菜单按钮 */
  
          .menu-toggle {
            width: 30px;
            height: 30px;
            position: fixed;
            cursor: pointer;
            background: none;
            border:1px solid #e5e5e5;
            padding: 0;
            left:210px;
            top:20px;
            background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAMVJREFUSEvVVUEOwzAIKz9bH4VyXHdMeFT7MyakEiVbIyUdtFpvkRDGxqYwOX/g3H+qAIjoYQGIiJv2yQAxxgUAnhYAALAh4iy9MgARrcxswoCZXyGEpQKQh5VE0ktlunbJFvp/9riHgThKl/Qrqy8G6iYAmHVRo8s/zMHuomxVBTiTj8McCEBKiXMCdwYyPTOvI1I1c1CycJFIp3Rd8ogUPbX35KBnst6a8pqaXNLy0FXX9IzfWyz+/3/QPBW9ixupc7fpG2LtbRm7ZO7hAAAAAElFTkSuQmCC) no-repeat center #fff;
            background-size:20px 20px;
            
    border-radius:5px;
        }
        
        /* 点击后变成X */
        .menu-toggle.active {
            transform: rotate(180deg);
            left:20px;
        }
        
        .sidebar { display:none;}
            .sidebar.open { display:flex;}
            
        @media screen and (max-width:768px){
            .avatar { display:none;}
            .message {max-width:100%;}
            .menu-toggle { display:block; z-index:999;}
            .body { display:block;}
            .sidebar {display:none; position:fixed; left:0; top:0; z-index:998;}
            .chat-header { padding-left:30px;}
        }