* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         font-family: Arial, sans-serif;
         height: 100vh;
         overflow: hidden;
     }


     #live2d {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 0;
         overflow: hidden;
     }




     .debug-marker {
         position: fixed;
         width: 8px;
         height: 8px;
         background: #ff0000;
         border-radius: 50%;
         pointer-events: none;
         z-index: 9999;
     }








     .chat-bubble {
         z-index: 10;
         position: fixed;
         background: rgba(255, 255, 255, 0.9);
         padding: 12px 18px;
         border-radius: 20px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         opacity: 0;
         transform: translateY(20px);
         transition: all 0.3s ease;
         pointer-events: none;
         max-width: 200px;
         text-align: center;
     }

     .chat-bubble.active {
         opacity: 1;
         transform: translateY(0);
     }




     /* 聊天容器 */
     #chat-container {
         position: fixed;
         bottom: 80px;
         left: 0;
         width: 100%;
         height: 25dvh;
         padding: 20px 20px 0;
         overflow-y: auto;

         display: flex;
         flex-direction: column;
         mask-image: linear-gradient(to top,
                 transparent 0%,
                 rgba(0, 0, 0, 0.8) 15%,
                 rgba(0, 0, 0, 1) 30%);
     }

     /* 输入框区域 */
     #input-container {
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         padding: 15px;
         background: rgba(255, 255, 255, 0.9);
         box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
         z-index: 3;
     }

     .input-group {
         display: flex;
         gap: 10px;
         max-width: 800px;
         margin: 0 auto;
     }

     #message-input {
         flex: 1;
         padding: 12px;
         border: 1px solid #ddd;
         border-radius: 25px;
         outline: none;
         background: rgba(255, 255, 255, 0.9);
     }

     #send-button {
         padding: 12px 25px;
         background: #007bff;
         color: white;
         border: none;
         border-radius: 25px;
         cursor: pointer;
     }

     /* 侧边栏 */
     .sidebar {
         position: fixed;
         top: 0;
         right: -300px;
         width: 300px;
         height: 100%;
         background: rgba(255, 255, 255, 0.95);
         box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
         transition: transform 0.3s ease;
         padding: 50px 20px 20px;
         z-index: 1000;
         backdrop-filter: blur(5px);

     }

     .setup {
         writing-mode: vertical-rl;


         text-orientation: upright;


     }

     .sidebar.active {
         transform: translateX(-300px);
     }

     /* 侧边栏按钮 */
     #settings-button {
         position: fixed;
         top: 20px;
         right: 20px;
         padding: 12px 18px;
         background: rgba(0, 123, 255, 0.9);
         color: white;
         border: none;
         border-radius: 50%;
         cursor: pointer;
         z-index: 1;
         backdrop-filter: blur(2px);
     }

     .close-btn {
         position: absolute;
         top: 15px;
         right: 15px;
         padding: 10px 15px;
         background: #dc3545;
         color: white;
         border: none;
         border-radius: 50%;
         cursor: pointer;
         font-size: 20px;
         line-height: 1;
     }

     /* 消息样式 */
     .message {
         margin-bottom: 15px;
         padding: 12px 18px;
         border-radius: 20px;
         max-width: 80%;
         position: relative;
         backdrop-filter: blur(2px);
         animation: messageAppear 0.3s ease;
     }

     .user-message {
         background: rgba(0, 123, 255, 0.9);
         color: white;
         margin-left: auto;
     }

     .bot-message {
         background: rgba(255, 255, 255, 0.9);
         color: #333;
         margin-right: auto;
     }

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

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

     @media (max-width: 768px) {
         .sidebar {
             width: 100%;
             right: -100%;
         }

         .sidebar.active {
             transform: translateX(-100%);
         }

         .close-btn {
             padding: 12px 18px;
             font-size: 24px;
         }

         #chat-container {
             padding: 10px 10px 0;
             height: 35vh;
             mask-image: linear-gradient(to top,
                     transparent 0%,
                     rgba(0, 0, 0, 0.8) 10%,
                     rgba(0, 0, 0, 1) 20%);
         }
     }

     .button {
         /* 基础样式 */

         position: relative;
         padding: 0.3em 0.3em;
         border: none;
         border-radius: 1.5em;
         background: linear-gradient(135deg, #6e8efb, #a777e3);
         color: white;
         font-family: 'Segoe UI', sans-serif;
         font-size: 0.8rem;
         font-weight: 600;
         cursor: pointer;
         transition: all 0.3s ease;

         /* 3D立体效果 */
         box-shadow: 0 5px 15px rgba(158, 133, 242, 0.4),
             inset 0 -2px 4px rgba(0, 0, 0, 0.1);

         /* 点击动效容器 */
         overflow: hidden;
     }

     /* 悬停效果 */
     .button:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 25px rgba(158, 133, 242, 0.6);
         background: linear-gradient(135deg, #7d9cff, #b886f8);
     }

     /* 点击效果 */
     .button:active {
         transform: translateY(1px);
         box-shadow: 0 3px 10px rgba(158, 133, 242, 0.4);
     }

     .button::after {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         background: linear-gradient(45deg,
                 transparent 25%,
                 rgba(255, 255, 255, 0.3) 50%,
                 transparent 75%);
         background-size: 200% 200%;
         border-radius: 1.5em;
         opacity: 0.6;
         animation: shine 3s linear infinite;
         pointer-events: none;
         will-change: transform, opacity;
     }

     @keyframes shine {
         0% {
             background-position: 100% 100%;
         }

         100% {
             background-position: -50% -50%;
         }
     }


     a {
         color: #8be9fd;
         position: relative;
         text-decoration: none;
         transition: all 0.3s ease;
     }

     a:after {
         content: '';
         position: absolute;
         bottom: -2px;
         left: 0;
         width: 0;
         height: 2px;
         background: linear-gradient(90deg, #8be9fd, #50fa7b);
         transition: width 0.3s ease;
     }

     a:hover {
         color: #50fa7b;
     }

     a:hover::after {
         width: 100%;
     }