/* 全局样式重置 */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }

 body {
   background: linear-gradient(#f5f5f7, #ffffff 30%);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
 }

 /* 顶部导航 */
 header {
   height: 80px;
   box-sizing: border-box;
   background-color: #fff;

   border-bottom: 3px solid rgba(0, 0, 0, 0.05);
   padding: 12px 16px;
   position: sticky;
   top: 0;
   z-index: 10;
 }

 .header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: calc(100% - 20px);
   margin: 0 auto;
 }

 .header-container .left {
   display: flex;
   align-items: center;
   gap: 40px;
   justify-content: flex-start;
 }

 .logo {
   background: url(/static/img/logo.png?v=1) no-repeat;
   background-size: cover;
   width: 97px;
   height: 56px;
 }



 /* 主聊天区域 */
 main {
   display: flex;
   padding: 0;
   overflow: hidden;
 }

 .chat-list {
   width: 240px;
   height: calc(100vh - 80px);
   font-size: 14px;
   background: #F2F4F9;
   padding: 20px;

 }

 .chat-list.expanded {
   margin-left: -240px;
 }

 .chat-list .title {
   padding: 0;
   position: relative;
 }

 .chat-list .title .icon {
   float: right;
   font-size: 20px;
   margin-top: -6px;
   cursor: pointer;
 }

 .chat-list .title .icon2 {
   display: none;
   font-size: 20px;
   position: absolute;
   right: 0px;
   top: 40px;
   font-size: 20px;
   opacity: 0;
 }

 .chat-list .icon {
   margin-right: 5px;
 }

 .newduihua {
   width: 100%;
   height: 32px;
   line-height: 32px;
   text-align: center;
   margin: 20px auto;
   background: #fff;
   border-radius: 6px;
   cursor: pointer;
 }

 .chat-list .list {
   font-size: 12px;
   padding: 10px 0 0 20px;
   color: #6b7280;
   line-height: 24px;
 }
  .chat-list .list p{
    cursor: pointer;
  }
  .chat-list .list .active{
    color: #000;
  }

 .chat-list.expanded .title .icon {
   transform: translateX(60px);
   -webkit-transform: translateX(60px);
 }

 .chat-list.expanded .title .icon2 {
   display: block;
   opacity: 1;
 }

 .chat-container {
   max-width: calc(100% - 300px);
   width: 760px;
   height: calc(100vh - 120px);
   margin: 16px auto;
   background-color: #fff;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }

 /* 消息区域 */
 .messages {
   flex: 1;
   padding: 20px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 /* 滚动条样式 */
 .messages::-webkit-scrollbar {
   width: 6px;
 }

 .messages::-webkit-scrollbar-thumb {
   background-color: #d1d5db;
   border-radius: 3px;
 }

 .messages::-webkit-scrollbar-thumb:hover {
   background-color: #9ca3af;
 }

 /* 消息气泡 */
 .msg {
   animation: fadeIn 0.3s ease forwards;
   max-width: 80%;
 }

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

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

 .msg-ai {
   align-self: flex-start;
   display: flex;
   gap: 10px;
 }

 .msg-user {
   align-self: flex-end;
   display: flex;
   gap: 10px;
 }


 .avatar-ai {
   background-color: rgba(37, 99, 235, 0.1);
   color: #2563eb;
 }

 .avatar-user {
   background-color: #f3f4f6;
   color: #6b7280;
 }

 .msg-content {
   padding: 12px 16px;
   border-radius: 18px;
   line-height: 1.5;
   word-break: break-word;
 }

 /* 列表样式优化（有序/无序列表统一对齐） */
 .msg-content ul,
 .msg-content ol {
   margin: 8px 0;
   padding-left: 24px;
   /* 统一左内边距，避免缩进混乱 */
 }

 .msg-content li {
   margin: 4px 0;
   padding: 2px 0;
   text-align: left;
   /* 左对齐，保持工整 */
 }

 /* 嵌套列表样式（避免层级混乱） */
 .msg-content ul ul,
 .msg-content ul ol,
 .msg-content ol ul,
 .msg-content ol ol {
   margin: 4px 0;
   padding-left: 20px;
 }

 /* 表格样式（豆包经典清晰表格） */
 .msg-content table {
   width: 100%;
   border-collapse: collapse;
   /* 合并边框，避免双边框 */
   margin: 12px 0;
   font-size: 14px;
   background: #fff;
   border-radius: 4px;
   overflow: hidden;
   /* 配合边框圆角 */
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
   /* 轻微阴影，提升质感 */
 }

 .msg-content th,
 .msg-content td {
   padding: 10px 12px;
   /* 内边距，避免内容拥挤 */
   border: 1px solid #e5e7eb;
   /* 浅灰色边框，清晰区分单元格 */
   text-align: left;
   /* 表头/内容左对齐（按需可改为center） */
 }

 .msg-content th {
   background-color: #f9fafb;
   /* 表头浅灰背景，突出区分 */
   font-weight: 600;
   /* 表头字体加粗 */
   color: #2d3748;
 }

 /* 表格hover效果（可选，提升交互体验） */
 .msg-content tr:hover {
   background-color: #fefefe;
 }

 /* 适配移动端（避免表格溢出） */
 @media (max-width: 768px) {
   .msg-content table {
     display: block;
     overflow-x: auto;
     /* 横向滚动，避免单元格挤压 */
   }
 }

 .content-ai {
   background-color: #f9fafb;
   color: #111827;
 }

 .content-user {
   background-color: rgba(37, 99, 235, 0.1);
   color: #111827;
 }

 .content-error {
   background-color: rgba(239, 68, 68, 0.05);
   color: #dc2626;
 }

 /* 加载中动画 */
 .typing {
   display: flex;
   gap: 4px;
   padding: 8px 16px;
 }

 .typing-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #9ca3af;
   animation: blink 1.4s infinite both;
 }

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

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

 @keyframes blink {

   0%,
   80%,
   100% {
     opacity: 0.4;
   }

   40% {
     opacity: 1;
   }
 }

 /* 输入区域 */
 .input-area {
   border-top: 1px solid #f3f4f6;
   padding: 16px;
 }

 .chat-form {}

 .user-input-box {
   padding: 14px 16px;

   border: 1px solid #d1d5db;
   border-radius: 24px;
   display: flex;
   gap: 10px;
 }

 .user-input {
   flex: 1;

   border: none;

   resize: none;
   font-size: 16px;
   line-height: 1.5;
   transition: border-color 0.2s, box-shadow 0.2s;
 }

 .user-input:focus {
   outline: none;

 }

 .send-btn {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: none;
   background-color: #2563eb;
   color: white;
   font-size: 18px;
   cursor: pointer;
   transition: background-color 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .send-btn:hover {
   background-color: #1d4ed8;
 }


 /* 提示框 */
 .toast {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translate(-50%, 20px);
   padding: 12px 20px;
   border-radius: 8px;
   color: white;
   font-size: 14px;
   font-weight: 500;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   opacity: 0;
   transition: opacity 0.3s, transform 0.3s;
   z-index: 100;
 }

 .toast-success {
   background-color: #10b981;
 }

 .toast-error {
   background-color: #ef4444;
 }

 .nav a.active {
   font-weight: bolder;
 }

 .nav a:hover,
 .nav a:active {
   color: #cc0303;
 }

 .nav a {
   text-decoration: none;
   color: #000;
   margin: 0 10px;
 }

 @media (max-width: 820px) {
   .chat-container {
     height: calc(100vh - 95px);
   }

   header {
     height: 60px;
   }

   .logo {
     height: 36px;
     width: 64px;
   }

   .nav {
     display: none;
   }

   .msg {
     max-width: 100% !important;
   }
 }