html,
 body {
     height: 100%;
     margin: 0;
     padding: 0;
     display: block;
     /* 移除flex布局 */
 }

 body {
     min-height: 100vh;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .main-content {
     width: 100%;
     display: flex;
     flex-direction: column;
 }

 /* 修复容器宽度 */
 .container.clearfix {
     width: 100%;
     max-width: none;
     padding: 0;
     margin: 0;
 }

 /* 导航栏样式修复 */
 .navbar {
     width: 100%;
     padding: 0;
     margin: 0;
     background-color: #ffffff;
 }

 .navnavbar-nav {
     width: 100%;
     margin: 0;
     padding: 0;
     list-style-type: none;
     overflow: hidden;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .menu-item {
     display: flex;
     align-items: center;
 }

 .menu-item:first-child {
     margin-right: auto;
 }

 .menu-item:not(:first-child) {
     margin-left: 10px;
 }

 /* 修改这里：移除背景色改变，添加横杠效果 */
 .menu-item a {
     display: block;
     color: #000;
     text-align: center;
     padding: 20px 16px;
     text-decoration: none;
     position: relative;
     transition: all 0.3s ease;
 }

 /* 横杠效果 */
 .menu-item a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 0;
     height: 3px;
     background: #FB0;
     transition: all 0.3s ease;
     transform: translateX(-50%);
 }

 .menu-item a:hover::after {
     width: 80%;
 }

 .menu-item a:hover {
     color: #FB0;
     background-color: transparent;
     /* 移除背景色 */
 }

 .menu-item .search-container {
     display: block;
     color: rgb(0, 0, 0);
     text-align: center;
     padding: 20px 16px;
     border: none;
 }

 .menu-item .search-container form {
     display: flex;
     align-items: center;
 }

 .menu-item .search-container input {
     padding: 8px 12px;
     border: 1px solid #ddd;
     border-radius: 4px;
     outline: none;
     color: dimgray;
 }

 .menu-item .search-container button {
     padding: 8px 12px;
     margin-left: 5px;
     background: #bab6b6;
     font-size: 15px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }

 .menu-item .search-container button:hover {
     background: #a7a7a7;
 }

 .solid0 {
     border-top: 1px solid #C6C6C6;
     width: 100%;
     margin: 0;
 }

 /* 内容区域样式 */
 .content {
     padding: 40px;
     text-align: center;
 }

 h1 {
     color: #FB0;
     margin-bottom: 20px;
     font-size: 2.5rem;
 }

 p {
     line-height: 1.6;
     margin-bottom: 20px;
     color: #555;
 }

 .demo-text {
     background: #f8f9fa;
     padding: 20px;
     border-radius: 8px;
     margin-top: 30px;
     text-align: left;
 }

 .demo-text h2 {
     color: #FB0;
     margin-bottom: 15px;
     font-size: 1.5rem;
 }

 /* 响应式设计 */
 @media (max-width: 768px) {
     .navnavbar-nav {
         flex-direction: column;
         align-items: stretch;
     }

     .menu-item {
         margin: 0 !important;
         justify-content: center;
     }

     .menu-item:not(:first-child) {
         margin-left: 0;
     }

     .menu-item a {
         padding: 15px 10px;
     }

     .menu-item .search-container {
         padding: 15px 10px;
     }
 }

 .solid0 {
     border-top: 1px solid #C6C6C6;
     width: 100%;
     margin: 0;
 }

 /* 聊天界面样式 */
 .chat-container {
     width: 100%;
     max-width: 1200px;
     margin: 20px auto;
     background: white;
     border-radius: 12px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     height: 80vh;
 }

 .chat-header {
     background: #ffffff;
     color: white;
     padding: 20px;
     text-align: center;
     position: relative;
 }

 .chat-header h1 {
     color: #FB0;
     font-family: "Noto Sans S Chinese";
     font-size: 48px;
     font-style: normal;
     font-weight: 700;
     line-height: 64px;
     position: relative;
     display: inline-block;

 }

 .chat-header h5 {
     color: var(--Text-Color, #464646);
     /* Ano */
     font-family: "Noto Sans S Chinese";
     font-size: 12px;
     font-style: normal;
     font-weight: 700;
     line-height: 16px;
     /* 133.333% */

 }

 .avata-containerr {
     position: relative;
     display: inline-block;
 }

 .monkey-avatar {
     border-radius: 50%;
 }



 @keyframes pulse {

     0%,
     100% {
         transform: scale(1) rotate(0deg);
         opacity: 0.8;
     }

     50% {
         transform: scale(1.2) rotate(10deg);
         opacity: 1;
     }
 }

 .status {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-size: 0.9rem;
 }

 .status-indicator {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     display: inline-block;
 }

 .connected {
     background: #4cd964;
 }

 .disconnected {
     background: #ff3b30;
 }

 .chat-messages {
     flex: 1;
     padding: 20px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 15px;
     background: #f8f9fa;
 }

 .message {
     max-width: 70%;
     padding: 12px 16px;
     border-radius: 18px;
     line-height: 1.4;
     position: relative;
     animation: fadeIn 0.3s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .user-message {
     align-self: flex-end;
     background: #FB0;
     color: white;
     border-bottom-right-radius: 5px;
 }

 .ai-message {
     align-self: flex-start;
     background: #e9ecef;
     color: #333;
     border-bottom-left-radius: 5px;
 }

 .message-info {
     font-size: 0.7rem;
     margin-top: 5px;
     opacity: 0.8;
 }

 .chat-input-container {
     padding: 15px 20px;
     background: white;
     border-top: 1px solid #e0e0e0;
     display: flex;
     gap: 10px;
 }

 .chat-input {
     flex: 1;
     padding: 12px 15px;
     border: 1px solid #ddd;
     border-radius: 24px;
     outline: none;
     font-size: 1rem;
     transition: border-color 0.3s;
 }

 .chat-input:focus {
     border-color: #FB0;
 }

 .send-button {
     background: #FB0;
     color: white;
     border: none;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: background 0.3s;
 }

 .send-button:hover {
     background: #FB0;
 }

 .api-settings {
     padding: 15px 20px;
     background: #f1f3f5;
     border-top: 1px solid #e0e0e0;
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     align-items: center;
 }

 .api-settings input {
     padding: 10px 15px;
     border: 1px solid #ddd;
     border-radius: 4px;
     outline: none;
     font-size: 0.9rem;
     flex: 1;
     min-width: 200px;
 }

 .btn {
     padding: 10px 20px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-weight: 500;
     transition: all 0.3s;
 }

 .connect-btn {
     background: #FB0;
     color: white;
 }

 .connect-btn:hover {
     background: #FB0;
 }

 .clear-btn {
     background: #6c757d;
     color: white;
 }

 .clear-btn:hover {
     background: #5a6268;
 }

 .typing-indicator {
     align-self: flex-start;
     background: #e9ecef;
     color: #666;
     padding: 12px 18px;
     border-radius: 18px;
     display: none;
 }

 .typing-indicator span {
     height: 8px;
     width: 8px;
     background: #666;
     border-radius: 50%;
     display: inline-block;
     margin: 0 2px;
     animation: typing 1s infinite;
 }

 .typing-indicator span:nth-child(2) {
     animation-delay: 0.2s;
 }

 .typing-indicator span:nth-child(3) {
     animation-delay: 0.4s;
 }

 @keyframes typing {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-5px);
     }
 }

 @media (max-width: 768px) {
     .chat-container {
         height: 85vh;
     }

     .message {
         max-width: 85%;
     }

     .api-settings {
         flex-direction: column;
         align-items: stretch;
     }

     .api-settings input {
         min-width: unset;
     }

     .menu-item a {
         padding: 20px 10px;
     }

     .menu-item .search-container {
         padding: 20px 10px;
     }
 }

 @media (max-width: 768px) {
     .navnavbar-nav {
         flex-direction: column;
         align-items: stretch;
     }

     .menu-item {
         margin: 0 !important;
         justify-content: center;
     }

     .menu-item a {
         padding: 15px 10px;
     }

     .menu-item .search-container {
         padding: 15px 10px;
     }

     .big-search {
         width: 90%;
     }

     .row {
         flex-direction: column;
     }

     .vl {
         width: 100%;
         height: 1px;
         margin: 20px 0;
     }
 }

 /* 添加过渡效果 */
 body {
     transition: all 0.4s ease;
 }

 .navbar-nav,
 .menu-item a,
 .search-container,
 .chat-container,
 .chat-header,
 .avatar-container,
 .monkey-avatar,
 .quick-questions,
 .chat-messages,
 .chat-input-container,
 .api-settings {
     transition: all 0.4s ease;
 }

 /* 聊天激活状态下的样式 */
 body.chat-active .navbar-nav {
     padding: 5px 0;
 }

 body.chat-active .menu-item a {
     padding: 10px 12px;
     font-size: 14px;
 }

 body.chat-active .search-container {
     padding: 10px 12px;
 }

 body.chat-active .search-container input {
     width: 120px;
     font-size: 13px;
 }

 /* 聊天框放大效果 */
 body.chat-active .chat-container {
     height: calc(100vh - 60px);
     margin: 10px auto;
 }

 body.chat-active .chat-header {
     padding: 15px 20px;
 }

 body.chat-active .monkey-avatar {
     width: 60px;
     height: 60px;
 }

 body.chat-active .chat-header h1 {
     font-size: 36px;
     line-height: 48px;
 }

 body.chat-active .chat-header h5 {
     font-size: 11px;
 }

 body.chat-active .quick-questions {
     padding: 10px 15px;
     margin: 10px 0;
 }

 body.chat-active .question-btn {
     padding: 6px 12px;
     font-size: 13px;
 }

 body.chat-active .chat-messages {
     padding: 15px 20px;
 }

 body.chat-active .chat-input-container {
     padding: 10px 15px;
 }

 body.chat-active .api-settings {
     padding: 10px 15px;
 }

 /* 移动端响应式 */
 @media (max-width: 768px) {
     body.chat-active .menu-item:not(:first-child):not(:last-child) {
         display: none;
     }

     body.chat-active .search-container {
         display: none;
     }
 }

 /* 修改 chat-header 为水平布局 */
 body.chat-active .chat-header {
     background: #ffffff;
     padding: 15px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid #e0e0e0;
     transition: all 0.4s ease;
 }

 body.chat-active .avatar-container {
     display: flex;
     align-items: center;
     gap: 15px;
     transition: all 0.4s ease;
 }

 body.chat-active .monkey-avatar {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border: 3px solid #FB0;
     transition: all 0.4s ease;
 }

 body.chat-active .greeting-text h1 {
     color: #FB0;
     font-family: "Noto Sans S Chinese";
     font-size: 24px;
     font-weight: 700;
     line-height: 32px;
     margin-bottom: 5px;
     transition: all 0.4s ease;
 }

 body.chat-active .greeting-text h5 {
     color: var(--Text-Color, #464646);
     font-family: "Noto Sans S Chinese";
     font-size: 12px;
     font-weight: 700;
     line-height: 16px;
     transition: all 0.4s ease;
 }

 body.chat-active .status {
     display: flex;
     align-items: center;
     gap: 8px;
     background: #f8f9fa;
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 12px;
     transition: all 0.4s ease;
 }


 /* 响应式设计 */
 @media (max-width: 768px) {
     .chat-header {
         flex-direction: column;
         gap: 10px;
         text-align: center;
     }

     .avatar-container {
         flex-direction: column;
         gap: 10px;
     }

     .status {
         align-self: center;
     }

     body.chat-active .chat-header {
         flex-direction: row;
         justify-content: space-between;
     }

     body.chat-active .avatar-container {
         flex-direction: row;
     }
 }