:root {--primary-color: #dceaff; --lightblue-color: #f3f8ff; --darkblue-color: #588BEB; --darkgreen-color: #42887B; --gray-color: #808080; --gray-bg-color: #F3F4F6; --border-color: #e5e7eb; --black-font-color: #3B3B3B;}
.bg-blue-wrap {background-color: #f0f3fa !important; border: 1px solid #cfd9f1}
.bg-yellow-wrap {background-color: #faf7f0 !important; border: 1px solid #f1e2cf}
.bg-light-blue {background-color: #e9f1f8}
.border-left-0 {border-left: 0;}
.border-right-0 {border-right: 0;}
/*主布局区域*/
.main-content { width: 100%; }
.page-content {padding: calc(10px + 5px) calc(20px / 2) 60px calc(20px / 2)}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {padding-left: 0; padding-right: 0;}
.form-group {margin-bottom: 20px}
.col-form-label {text-align: right}
.close {padding: 5px; border-radius: 5px;}
.image-preview { margin: 10px;}
.title-wrap { border-radius: 8px; line-height: 32px; margin-bottom: 10px; border-left: 5px solid #588BEB; background: #ececec; }
.title-padding { padding: 10px 20px;}
.avatar-preview{ padding: 2px;}
/*页面*/
body {height: 100vh;color: var(--black-font-color) !important;font-size: .875rem; line-height: 1.5; -webkit-text-size-adjust: 100%}
.app-container {height: 100vh;display: grid;grid-template-rows: auto 1fr; background-color: #FAF9F7;bottom:0}
.header {background: white;border-bottom: 1px solid var(--border-color);padding: 0.3rem 1rem; display: flex;}
.logo { font-size: 1.2rem;font-weight: bold; color: transparent; background-image: linear-gradient(106deg, #588BEB 0, #31daa7 50%, #588BEB 100%);  -webkit-background-clip: text; background-clip: text; align-items: center;}
.logo_chat_text { color: var(--darkblue-color)}
/* 自定义上传按钮样式 */
.custom-upload-btn { background-color: #dddddd; border: none; color: #5c5c5c; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s ease;}
/* 用户头像样式 */
.user-header { display: flex; align-items: center; gap: 10px; position: relative;cursor: pointer;}
.user-avatar { width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background-color: #C5D9FF; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 2px solid var(--primary-color);}
.user-menu { position: absolute; top: 50px; right: 0; background-color: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); display: none; min-width: 150px; z-index: 1000;}
.user-menu.show { display: block; z-index: 1000; border: 2px solid var(--primary-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); padding: 2px;}
.user-menu-item {cursor: pointer; color: #333;}
.user-menu-item:last-child {border-bottom: none;}
.user-menu-item:hover { background-color: #f3f4f6;}
.user-menu-item a{ padding: 10px; display: block;  cursor: pointer; color: #333;}
/*首页登录*/
.auth {background: #588BEB}
.auth .form-wrapper { width: 980px; margin: 0 auto; min-height: 100vh; display: flex;align-items: center;justify-content: center;padding: 30px 15px;}
.auth .form-wrapper .container, .auth .form-wrapper .container-fluid, .auth .form-wrapper .container-lg, .auth .form-wrapper .container-md, .auth .form-wrapper .container-sm, .auth .form-wrapper .container-xl, .auth .form-wrapper .container-xxl {min-height: 100%}
.auth .card {border: none;margin: auto;border-radius: .5rem;overflow: hidden}
.auth .card .row .col {padding: 30px;min-height: 500px}
.auth .social-links {display: block}
.auth .social-links a {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-webkit-transition: all .3s;transition: all .3s;color: #000;margin-bottom: 15px;border-radius: 10px;border: 1px solid #ccc;padding: 2px 20px 2px 2px}
.auth .social-links a, .auth .social-links a i {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center}
.auth .social-links a i {width: 40px;font-size: 20px;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;color: #fff;height: 40px;border-radius: 10px;margin-right: 15px}
.auth .social-links a:focus, .auth .social-links a:hover {text-decoration: none;border-color: #4776e6}
[data-close-chat] {display: none}
.auth .form-wrapper .container, .auth .form-wrapper .container-fluid, .auth .form-wrapper .container-lg, .auth .form-wrapper .container-md, .auth .form-wrapper .container-sm, .auth .form-wrapper .container-xl, .auth .form-wrapper .container-xxl {min-height: 100%}
/* 自定义Tab样式  登录*/
.nav-tabs-custom {border-bottom: none; }
.nav-tabs-custom .nav-link {border: none;color: #6c757d;padding: 12px 20px;font-weight: 500;position: relative;transition: all 0.3s;font-size: 16px;}
.nav-tabs-custom .nav-link:after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 3px;background-color: #588BEB;transition: all 0.3s ease;}
.nav-tabs-custom .nav-link:hover {color: #262626;border: none;}
.nav-tabs-custom .nav-link.active {color: #262626;background: none;border: none;}
.nav-tabs-custom .nav-link.active:after {width: 100%;}
/* 横向模型选择按钮样式 */
.model-tabs { display: flex; gap: 10px;}
.model-tabs .model-item { padding: 6px 10px; cursor: pointer; color: var(--black-font-color); background-color: var(--gray-bg-color); border-radius: 10px; font-size: 0.9rem;}
.model-tabs .model-item:hover { background-color: #f3f4f6;}
.model-tabs .model-item.active { background-color: #deeaff; color: var(--black-font-color); font-weight: bold}
/* 手机端下拉按钮样式 */
.mobile-model-select { display: none; position: relative; color: var(--darkblue-color);}
.model-btn { color: var(--darkblue-color); cursor: pointer; font-size: 1rem;}
.model-btn i { font-size: 1.2rem;}
/* 模型下拉菜单 */
.model-menu { position: absolute; top: 40px; right: 0; background-color: #F5F5F5; border-radius: 1rem; display: none; min-width: 250px; z-index: 1000;}
.model-menu.show { display: block; z-index: 1000; border: 2px solid var(--primary-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); padding: 2px; }
.model-menu .model-item { padding: 6px 10px; cursor: pointer; color: #333; font-size: 0.9rem; border-bottom: 1px solid #e3d9cf; }
.model-menu .model-item:last-child {border-bottom: none;}
.model-menu .model-item:hover { background-color: #f1f1f1;}
.model-menu .model-item.active { background-color: #F5F0EB; color: #6c655c;}
/*底部版权*/
.copyright {text-align: center; font-size: 0.7rem; color: #9498a1; margin-bottom: 2rem;}
@media (max-width: 768px) {
    .header {padding: 0.3rem 0.2rem;}
    .logo {font-size: 1rem; }
    .auth .form-wrapper { width: 100%; margin: 0 auto;}
    .mobile-model-select { display: flex; align-items: center; }
    .model-tabs { display: none; }
    h2 {font-size: 1.3rem;}
}