body{
    font-family: 'Open Sans', sans-serif;
    max-width: 60em;
    margin: 0 auto;
    padding: 0 1em; /* 添加左右内边距 */
    color: #333;
    background-color: white;
    align-items: center;
    width: 100%;
    box-sizing: border-box; /* 确保padding包含在宽度内 */
}

p {
    margin: 0;
}

#title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
}

#paper-title {
    font-family: 'Lato', sans-serif;
    font-size: xx-large;
    font-weight: bold;
    text-align: center;
}

#authors{
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.author {
    margin-right: 0.6em;
    font-weight: 600;
    color: #666;
    font-size: large;
    text-decoration: none;
}

.ack-author {
    text-decoration: none;
}

.author:hover {
    text-decoration: underline;
}

#authors .author:last-child {
    margin-right: 0;
}

.author sup {
    font-size: small;
    font-weight: normal;
    color: #999;
}

#affiliations {
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.affiliation {
    margin-right: 0.6em;
    font-size: medium;
    color: #333;
}

#affiliations .affiliation:last-child {
    margin-right: 0;
}


#affiliations .affiliation:first-child {
    flex: 1 100%;
    text-align: center;
}

.affiliation sup {
    font-size: small;
    font-weight: normal;
    color: #999;
}

#conference-name {
    margin-top: 1em;
    font-size: medium;
    font-weight: bold;
    color: #333;
    text-align: center;
}

#social-buttons {
    margin-top: 2em;
    display: flex;
    justify-content: center;
}

.social-button {
    margin-right: 1.6em;
    font-size: medium;
    color: #333;
    display: flex;
    align-items: center;
    text-decoration: none;
    border: 1px solid #333;
    padding: 0.3em 1.8em;
    border-radius: 0.6em;
    cursor: pointer;
}

.social-button:hover {
    box-shadow: 0 0 0 0.1em #333;
}

.social-button:last-child {
    margin-right: 0;
}

.social-button i {
    margin-right: 0.4em;
}

#tldr-container {
    margin-top: 2em;
    text-align: center;
    font-style: italic;
}

#tldr-first {
    font-weight: bold;
}

.section-container {
    margin-top: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-header {
    font-size: x-large;
    font-weight: bold;
}

.section-sub-header {
    font-size: larger;
    font-weight: bold;
    align-self: normal;
    margin-top: 2em;
}

.section-text {
    margin-top: 1em;
}

.section-text a {
    color: #333;
}

.highlighted-text {
    color: #c49329;
    font-weight: bold;
}

.section-image {
    margin-top: 2em;
    max-width: 100%;
    margin-bottom: 1em;
}

.section-image:last-child {
    margin-bottom: 2em;
}

.section-gif-container {
    display: flex;
}

.section-gif {
    width: 9vw;
    margin-bottom: -1em;
}

.gif-text-morphology-class{
    font-size: large;
    font-weight: bold;
    align-content: center;
    width: 9vw;
    text-align: center;
}

.section-gif-header-container {
    display: flex;
}

.section-gif-header {
    font-size: large;
    font-weight: bold;
    width: 9vw;
    text-align: center;
    margin-bottom: 1em;
}

.section-video {
    margin-top: 1em;
    max-width: 100%;
}

.section-deployment-video-container {
    width: 100%;
}

.section-deployment-video-container-header {
    font-size: larger;
    font-weight: bold;
    text-align: center;
}

.section-deployment-video-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 0em;
    gap: 40px; /* 固定间距，不会随缩放改变 */
}

.section-deployment-video-container:last-child  {
    margin-top: 3em;
}

.deployment-video-header {
    font-size: large;
    font-weight: bold;
    text-align: center;
    margin-top: 0.5em;
}

.deployment-video-block {
    flex: 1;
    max-width: 400px; /* 固定最大宽度 */
    min-width: 300px; /* 固定最小宽度 */
}

.deployment-video-block .video-container {
    width: 100%;
    aspect-ratio: 16/9; /* 保持视频宽高比 */
    overflow: hidden;
    border-radius: 0.6em;
}

.deployment-video-block .control-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.deployment-video {
    margin-top: 0.5em;
    border-radius: 0.6em;
    flex: 1;
    max-width: calc(35% - 15px); /* 保持两列布局 */
    min-width: 0px; /* 确保视频不会太小 */
}

.deployment-video .video-container {
    width: 100%;
    aspect-ratio: 16/9; /* 保持视频宽高比 */
    overflow: hidden;
}

.youtube-iframe {
    margin-top: 1em;
    width: 940.8px;
    height: 529.2px;
    border-radius: 0.6em;
}

.demo-video {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    object-fit: cover;  /* 保持完整视频内容 */
    background: #f8f9fa;  /* 浅色背景替代黑色 */
}

/* custom.css */
.fixed-size-gif {
  width: 448px;
  height: 252px;
  margin-top: 0.5em;
  margin-right: 0.5em;
  object-fit: cover; /* 防止GIF变形 */
}

@media (max-width: 768px) {
    .demo-video {
        height: 300px;
    }
}

.citation-container {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.citation-content {
  font-family: monospace;
  white-space: pre-wrap; /* 保留换行和空格，但允许自动换行 */
  max-width: 60%;
  overflow-x: auto; /* 添加水平滚动条，以防内容仍然溢出 */
}



#website-inspiration {
    margin-top: 3em;
    text-align: center;
    margin-bottom: 3em;
    font-size: small;
}

#website-inspiration a {
    color: #333;
}


/* 演示容器 */
.demo-container {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
    background-color: #1e1e1e;
    color: #eee;
    max-width: 1000px;
    margin: 20px 0;
}

/* 任务面板 */
.task-panel {
    width: 250px;
    background-color: #1e1e1e;
    padding: 15px;
    box-sizing: border-box; /* 确保padding不会增加总宽度 */
}

.task-panel h3 {
    margin-top: 0;
    color: white;
    font-size: 1.2em;
    word-wrap: break-word; /* 长单词换行 */
    line-height: 1.5; /* 与聊天内容保持一致 */
    font-family: 'Times New Roman', serif;
    font-style: italic;
}

.task-item {
    background-color: #333;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
    word-wrap: break-word; /* 允许长单词换行 */
    overflow-wrap: break-word; /* 更好的浏览器兼容性 */
    hyphens: auto; /* 自动连字符 */
}

.task-item.selected {
    background-color: #444;
}

.task-item p {
    margin: 0;
    word-wrap: break-word; /* 长单词换行 */
    overflow-wrap: break-word;
    line-height: 1.5; /* 改为与聊天内容一致 */
    font-family: 'Times New Roman', serif;
    font-style: italic;
}

.task-description {
    font-size: 0.9em;
    color: #aaa;
    margin-top: 5px !important;
    word-wrap: break-word; /* 长单词换行 */
    overflow-wrap: break-word;
    line-height: 1.5; /* 改为与聊天内容一致 */
    font-family: 'Times New Roman', serif;
    font-style: italic;
}

/* 聊天界面 */
.chat-interface {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 控制面板 */
.control-panel {
    background-color: #1e1e1e;
    padding: 15px;
    display: flex;
    border-bottom: 1px solid #444;
}

.control-group {
    margin-right: 20px;
}

.control-group label {
    margin-right: 5px;
}

.control-select {
    background-color: #333;
    color: white;
    border: 1px solid #555;
    padding: 2px 5px;
    border-radius: 3px;
}



/* 或者如果你想要固定尺寸 */
.control-video {
    width: 432px;          /* 固定宽度 */
    height: 243px;         /* 固定高度 */
    object-fit: cover;     /* 填充整个区域，可能会裁剪一部分内容 */
}
/* 聊天内容 */
.chat-content {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    max-height: 500px;
    word-wrap: break-word; /* 处理长单词 */
    overflow-wrap: break-word;
}

.chat-message {
    margin-bottom: 20px;
    word-wrap: break-word; /* 处理长单词 */
    overflow-wrap: break-word;
}

.robot-message {
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.human-message {
    background-color: #303030;
    padding: 15px;
    border-radius: 5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.message-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5; /* 提高可读性 */
}

.message-text p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 10px;
}

.message-text ul, .message-text ol {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.message-text li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 5px;
}

.message-image {
    margin-bottom: 15px;
}

.message-image img {
    max-width: 100%;
    border-radius: 5px;
}

/* 可折叠内容 */
.expandable {
    margin: 10px 0;
}

.expandable summary {
    cursor: pointer;
    color: #aaa;
}

.expanded-content {
    margin-top: 10px;
    padding: 10px;
    background-color: #333;
    border-radius: 5px;
}

.expanded-text-content {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
}

/* 长技术名词处理 */
.tech-term {
    font-family: 'Courier New', monospace; /* 等宽字体，更适合技术术语 */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
    word-break: break-all; /* 在任何字符处换行 */
    overflow-wrap: anywhere; /* 最新的CSS属性 */
}

/* 对于特别长的对象名称 */
.object-name {
    font-weight: bold;
    color: #4CAF50; /* 绿色高亮 */
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.4;
}


.sidebar-nav {
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: none;
    transition: all 0.3s ease;
}

/* 只在大屏幕上显示侧边导航 */
@media (min-width: 1200px) {
    .sidebar-nav {
        display: block;
    }
    
    /* 不修改body的margin，保持居中 */
}

.nav-item {
    position: relative;
    margin-bottom: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #bdc3c7;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #333333;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.nav-item.active .nav-dot {
    background-color: #000000;
    box-shadow: 0 0 0 2px #000;
    transform: scale(1.2);
}

.nav-item:hover .nav-dot {
    background-color: #555;
    box-shadow: 0 0 0 2px #555;
    transform: scale(1.1);
}

.nav-label {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #2c3e50;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.nav-item:hover .nav-label {
    opacity: 1;
    visibility: visible;
    left: 35px;
}

/* 连接线效果 */
.nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    width: 2px;
    height: 25px;
    background-color: #ecf0f1;
    transform: translateX(-50%);
    z-index: 1;
}

.nav-item.active:not(:last-child)::after {
    background-color: #3498db;
}




/* 大模块样式 */
.major-section {
    padding: 60px 0;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
    max-width: 60em;
    margin: 0 auto;
    box-sizing: border-box;
}

.major-section-alt {
    background-color: #f8f9fa;
}

.major-section-header {
    font-size: 2.5em !important;
    font-weight: 600 !important;
    text-align: center;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.major-section-header h2 {
    font-size: 2.5em !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
}

.major-section-subtitle {
    font-size: 1.2em;
    color: #7f8c8d;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

.major-section .section-container .section-header {
    font-size: x-large;
    font-weight: bold;
    margin-bottom: 40px;
}



.major-section .section-container:last-child {
    margin-bottom: 0;
}




.section-image {
    margin-top: 2em;
    max-width: 100%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 小尺寸图片 - 40% 宽度 */
.section-image-small {
    margin-top: 2em;
    max-width: 40%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 中等尺寸图片 - 60% 宽度 */
.section-image-medium {
    margin-top: 2em;
    max-width: 60%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 大尺寸图片 - 80% 宽度 */
.section-image-large {
    margin-top: 2em;
    max-width: 80%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 超大尺寸图片 - 95% 宽度 */
.section-image-xlarge {
    margin-top: 2em;
    max-width: 95%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 固定宽度选项 */
.section-image-300 {
    margin-top: 2em;
    width: 300px;
    max-width: 100%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.section-image-400 {
    margin-top: 2em;
    width: 400px;
    max-width: 100%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.section-image-500 {
    margin-top: 2em;
    width: 500px;
    max-width: 100%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.section-image-600 {
    margin-top: 2em;
    width: 600px;
    max-width: 100%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.section-image-800 {
    margin-top: 2em;
    width: 800px;
    max-width: 100%;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 章节容器 */
.section-container {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin: 20px auto; /* 改为居中 */
    max-width: 100%;
    box-sizing: border-box;
}

.section-header {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
}

.section-text {
    margin-bottom: 15px;
}

/* YouTube 嵌入视频 */
.youtube-iframe {
    width: 100%;
    height: 400px;
    border-radius: 8px;
}

.section-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.section-image-grid .section-image {
    width: 100%;
    height: auto;
}


/* 响应式设计 */
@media (max-width: 768px) {
    .demo-container {
        flex-direction: column;
    }

    .task-panel {
        width: 100%;
    }

    .control-panel {
        flex-wrap: wrap;
    }

    .control-group {
        margin-bottom: 10px;
        width: 50%;
    }

    .youtube-iframe {
        height: 300px;
    }

    .section-image-grid {
        grid-template-columns: 1fr;
    }
    
    body {
        padding: 0 0.5em;
    }
    
    /* 小屏幕上视频垂直排列 */
    .section-deployment-video-row {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .deployment-video-block {
        max-width: 100%;
        min-width: 280px;
    }
}

/* 确保在所有缩放级别下都居中 */
@media (min-width: 769px) {
    body {
        padding: 0 2em;
    }
}