/* 全局样式重置 */
* {margin: 0;padding: 0;box-sizing: border-box;}

body {font-family: '微软雅黑';line-height: 1.6;color: #333;background-color: #fff;}
.right-container{display:none;position:fixed;z-index:9999;top:0px;right:0px;width:280px;height:100%;
    background:#fff;border-left:1px solid #E6ECFB;
}
.right-container .rtop-box{background:#fff;border-bottom:1px solid #F0F0F0;padding:10px 10px 10px 20px;}
.right-container .rtop-box .rtop-title{display:inline-block;width:224px;font-size:15px; font-weight:bold;}
.right-container .rtop-box .rtop-close{display:inline-block; vertical-align:middle;
    background:url('../images/icon_close.png') no-repeat; background-size:auto 100%; width:14px;height:14px;
}
.right-container .content{height: calc(100% - 80px); padding:15px;line-height:180%;font-size:14px;
    overflow-y:auto; overflow-x:hidden;
}

/* 头部样式 */
.header {height: 220px;background: url(../images/bg-topimg01a.png);color: #000;}
.header-content {max-width: 900px;margin: 0 auto;padding: 40px 0 0 0;}
.logo {display: flex;align-items: center;gap: 40px;}
.logo-icon {}
.logo-text {font-size: 18px;font-weight: bold;font-family: '微软雅黑';}

/* 主内容区域 */
.main-content {margin-top: -120px;}
.container {max-width: 900px;margin: 0 auto;}

/* 输入区域 */
.input-section {margin-bottom: 30px;}
.text-input-container {position: relative;background: white;border: none;border-radius: 15px;overflow: hidden;box-shadow: 0px 0px 20px 2px #99999977;}
.main-textarea {width: 100%;min-height: 185px;max-height: 185px;padding: 20px 20px 0 20px;border: none;outline: none;resize: none;
    font-size: 16px;line-height: 2;background: transparent;text-align: justify;font-family: '微软雅黑';
}
.main-textarea::placeholder {color: #999;}
.textarea-footer {display: flex;justify-content: space-between;align-items: center;padding: 0 20px 15px;background: #fafafa;border-top: 1px solid #e0e0e0;}
.description {font-size: 14px;color: #666;flex: 1;}
.char-counter {font-size: 14px;color: #999;text-align: right;margin-right: 15px;padding-bottom: 5px;}
.clear-btn {position: absolute;top: 10px;right: 10px;width: 24px;height: 24px;border: none;background: #f0f0f0;color: #666;
    border-radius: 50%;cursor: pointer;font-size: 16px;display: flex;align-items: center;justify-content: center;transition: background-color 0.3s ease;
	line-height: 24px;
}
.clear-btn:hover {background: #e0e0e0;}

/* 题目类型选择 */
.question-type-section {margin-bottom: 25px;}

.question-type-options {display: flex;gap: 20px;flex-wrap: wrap;justify-content: center;}
.question-type-options span{cursor: pointer;font-size: 16px;}
.question-type-options span.selected{color: #288ce2;}
.question-type-options span.selected b.hx-icon{color: #288ce2;}

/* 生成区域 */
.generation-controls {margin-bottom: 25px;display: flex;justify-content: center;}
.generation-controls span{font-size: 16px;line-height: 26px;margin: 0 5px;}

/* AI出题按钮 */
.generate-section {margin-bottom: 30px;text-align: center;}
.generate-btn {background: #1e88e5;color: white;border: none;padding: 10px 40px;font-size: 18px;font-weight: 500;
    border-radius: 6px;cursor: pointer;transition: background-color 0.3s ease;min-width: 200px;
}
.generate-btn:hover {background: #1976d2;}
.generate-btn:disabled {background: #cccccc;color: #fff;cursor: not-allowed;}
.generate-btn:disabled:hover {background: #cccccc;}

/* 输出区域 */
.output-section{width:100%;height: auto;min-height: 150px;max-height: 800px;padding:20px;background:#fff;border-radius:15px;border: 1px solid #e0e0e0;
    margin-bottom: 40px;box-sizing: border-box;
}
.chat-bot{width:100%;height: auto;max-height: 760px;overflow-y:auto;box-sizing: border-box;font-size:16px;min-height: 110px;}
.chat-bot::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 6px;
    /* 对应横向滚动条的宽度 */
    height: 6px;
}

/* 滚动条上的滚动滑块 */
.chat-bot::-webkit-scrollbar-thumb {background-color: #DFE7FC;border-radius: 32px;}

/* 滚动条轨道 */
.chat-bot::-webkit-scrollbar-track {background-color: #fff;border-radius: 32px;}

.chat-bot p{line-height:200%; padding:8px 0px;}
.chat-bot .user-bot{float:right;align-self: flex-end;padding:7px 25px;border-radius: 20px;border-bottom-right-radius: 0;
    width:auto;background-color:#4C80F6;color:#fff;word-break: break-all;line-height: 200%;
}
.chat-bot .ai-bot{float:left;background:#F3F6FD;padding:7px 25px;border-radius: 20px;border-bottom-left-radius: 0;
    line-height: 200%;width:100%;background-color: #F3F6FD;color:#333;
    word-break: break-all;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
}
.chat-bot .ai-res{position:absolute;right:0px;top:0px;margin-top:-40px;height:20px;line-height:20px;font-size:12px;color:#C0C4D5;}
.chat-bot .chat-think{border-radius:10px;background:#ffff;padding:10px 20px 20px 20px;margin-top:20px;}
.chat-bot .chat-think .think-title{height:28px;line-height:28px;border-bottom: 1px solid #eee;margin-bottom:10px;}
.chat-bot .chat-think .think-content{font-size:14px;line-height:160%;max-height:150px;overflow-x:hidden;overflow:auto;}
/* 整个滚动条 */
.chat-bot .chat-think .think-content::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 6px;
    /* 对应横向滚动条的宽度 */
    height: 6px;
}

/* 滚动条上的滚动滑块 */
.chat-bot .chat-think .think-content::-webkit-scrollbar-thumb {background-color: #DFE7FC;border-radius: 32px;}
/* 滚动条轨道 */
.chat-bot .chat-think .think-content::-webkit-scrollbar-track {background-color: #fff;border-radius: 32px;}
.chat-bot div:nth-child(3){display: none;}

.aExample a{display: block;float: left;line-height: 100%;font-size: 14px;margin: 0px 10px 10px 0px;
    background-color: #F3F6FD;padding: 10px 15px;text-decoration: none;border-radius: 17px;color: #333;
	position: relative;
}
.aExample a.repeat{padding-left:30px; font-size: 14px; background:#F3F6FD url(../images/icon_g3_03.png) no-repeat left 10px center;background-size: auto 48%;}
.aExample a.eval{float:right; padding:8px 8px; background:#F3F6FD url(../images/spacer_line.png) no-repeat center;}
.aExample a.eval b{display:inline-block;width:16px; height:16px; margin:0px 10px 0px 10px; background-size:100% auto;background-position:0px 0px; background-repeat:no-repeat; }
.aExample a.eval b:hover{background-position:0 -16px; }
.aExample a.eval b.ding{background-image:url(../images/icon_ding.png); }
.aExample a.eval b.cai{background-image:url(../images/icon_cai.png);}
.aExample a.eval b.copy{background-image:url(../images/icon47.png);}
.aExample a.eval b.play{background-image:url(../images/icon_play.png);}
.aExample a.eval b.selected{background-position:0 -16px;}

/* 鼠标悬停提示 */
.aExample a.eval b.ding:hover::after{content: "满意";position: absolute;background: rgba(0,0,0,0.5);color: white;padding: 4px 8px;
    border-radius: 4px;font-size: 12px;white-space: nowrap;z-index: 1000;margin-top: -30px;margin-left: -12px;
}
.aExample a.eval b.cai:hover::after{content: "不满意";position: absolute;background: rgba(0,0,0,0.5);color: white;padding: 4px 8px;
    border-radius: 4px;font-size: 12px;white-space: nowrap;z-index: 1000;margin-top: -30px;margin-left: -20px;
}
.aExample a.eval b.copy:hover::after{content: "复制";position: absolute;background: rgba(0,0,0,0.5);color: white;padding: 4px 8px;
    border-radius: 4px;font-size: 12px;white-space: nowrap;z-index: 1000;margin-top: -30px;margin-left: -12px;
}


/* 上传区域 */
.upload-section {margin-bottom: 40px;}
.upload-container {border: 1px dashed #ddd;border-radius: 15px;padding: 30px 0px;text-align: center;transition: border-color 0.3s ease;}
.upload-icon {margin: 0 auto 10px;color: #1e88e5;}
.upload-text {margin-bottom: 10px;}
.upload-title {font-size: 18px;font-weight: 500;color: #333;}
.upload-subtitle {font-size: 14px;color: #666;}

.file-types {display: flex;justify-content: center;gap: 15px;flex-wrap: wrap;}
.file-types a{display: flex;justify-content: center;gap: 15px;flex-wrap: wrap;}
.file-type {width: 40px;height: 40px;border-radius: 6px;display: flex;align-items: center;justify-content: center;
    font-size: 12px;font-weight: 500;color: white;
}
.help-text{position: relative;text-align: center;margin-top: 10px;}
.help-text a{display: flex;justify-content: center;align-items: center;gap: 5px;color: #1e88e5;}
.help-text .qtip {display: block;width: 14px;height: 14px;background: #ff9900;border-radius: 7px;color: #f0f0f0;font: normal 12px / 14px '微软雅黑';text-align: center;text-decoration: none;}


/* 底部样式 */
.footer {background-color: #424242;color: white;padding: 35px 0;text-align: center;}
.footer-content {max-width: 1200px;margin: 0 auto;padding: 0 20px;}
.footer-text {font-size: 18px;font-weight: 500;margin-bottom: 10px;color: #fff;}
.footer-text a{color:#fff;}
.footer-text a:hover{color:#fff;}
.copyright {font-size: 12px;color: #fff;}
.copyright a{color: #fff;text-decoration: none;}

/* 响应式设计 */
@media (max-width: 950px) {
    .header-content{padding: 40px 15px 0 15px;}
    .container {padding: 0 15px;}
    .question-type-options {gap: 15px;}
}

@media (max-width: 768px) {
	.header{height:165px;}
    .header-content{padding: 40px 15px 0 15px;}
    .logo-text span{display: none;}

    .main-content {margin-top: -65px;}
	.container {padding: 0 15px;}

    .question-type-options {gap: 15px;}

    .main-textarea,
    .output-textarea {min-height: 100px;}

    .file-types {gap: 10px;}
    .file-type {width: 35px;height: 35px;font-size: 11px;}

    .output-section{width:100%;height: auto;min-height: 150px;max-height: 600px;}
    .chat-bot{max-height: 560px;}
}

@media (max-width: 480px) {
    .header-content{padding: 40px 15px 0 15px;}

    .question-type-options {flex-direction: row;gap: 10px;justify-content: center;flex-wrap: wrap;}
    .question-count-control {flex-direction: column;gap: 5px;}

    .generate-btn {width: 100%;min-width: auto;}

    .output-section{width:100%;height: auto;min-height: 100px;max-height: 600px;}
    .chat-bot{max-height: 560px;}
	
	/* 鼠标悬停提示 */
    .aExample a.eval b.ding:hover::after{content: "";background:transparent;}
    .aExample a.eval b.cai:hover::after{content: "";background:transparent;}
    .aExample a.eval b.copy:hover::after{content: "";background:transparent;}

} 

@media (max-width: 400px) {
    .header-content{padding: 40px 15px 0 15px;}
    
    .question-type-options {flex-direction: row;gap: 5px;justify-content: center;flex-wrap: wrap;}
    .question-count-control {flex-direction: column;gap: 1px;}

    .generate-btn {width: 100%;min-width: auto;}

    .output-section{width:100%;height: auto;min-height: 100px;max-height: 600px;}
    .chat-bot{max-height: 560px;}
}
@media (max-width: 300px) {
    .header-content{padding: 40px 15px 0 15px;}
    
} 

@media (min-height: 900px) {
    
    .output-section {
        min-height: 250px;
    }
    
    .chat-bot {
        min-height: 200px;
    }
}

@media (min-height: 1200px) {
    
    .output-section {
        min-height: 350px;
    }
    
    .chat-bot {
        min-height: 300px;
    }
}