/* 全局样式重置和基础设定 */
body {
    margin: 0; /* 移除默认外边距 */
    width: 100%; /* 宽度占满视口 */
    font-family: "PingFang SC", "Microsoft Yahei", sans-serif; /* 设置优先字体栈，优先使用苹方和微软雅黑 */
    overflow-x: hidden; /* 防止水平方向出现滚动条 */
}

/*
    空的 :root {} 规则已被删除。
    理由：该规则没有任何CSS变量或属性定义，属于无效代码。
*/

/* 页面主容器样式 */
.container {
    width: 100%; /* 容器宽度占满父元素 */
    min-height: 100vh; /* 容器最小高度为视口高度，确保内容至少撑满一屏 */
    background-color: #000; /* 默认背景色为黑色 (视频加载时或失败时的底色) */
    box-sizing: border-box; /* border和padding不计入元素的width和height */
    position: relative; /* 设置为相对定位，作为内部绝对定位元素的基准 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* flex子元素垂直排列 */
    z-index: 0; /* 基础堆叠顺序 (确保伪元素在其下方) */
    overflow: hidden; /* 防止内部元素溢出容器，特别是视频可能超出边界 */
}

/* 容器的::before伪元素，用于创建半透明黑色遮罩层，叠加在背景视频之上 */
.container::before {
    content: ""; /* 伪元素必须有content属性才能显示 */
    position: absolute; /* 绝对定位，相对于.container */
    top: 0; left: 0; right: 0; bottom: 0; /* 铺满整个.container */
    background-color: rgba(0,0,0,0.7); /* 半透明黑色背景 */
    z-index: -1; /* 使其位于.container内容之下，但在#bg-video之上 */
    pointer-events: none; /* 使遮罩层不响应鼠标事件，事件可以穿透到下层元素 */
}

/*
    .container::after { content: none; } 规则已被删除。
    理由：如果::after伪元素没有默认内容或继承内容需要被明确设置为空，这条规则是多余的。
          通常只有在需要覆盖已有的::after内容时才使用 content: none;
*/

/* 背景视频样式 */
#bg-video {
    position: absolute; /* 绝对定位，相对于.container */
    top: 50%; /* 垂直居中定位 */
    left: 50%; /* 水平居中定位 */
    min-width: 100%; /* 最小宽度为容器宽度 */
    min-height: 100%; /* 最小高度为容器高度 */
    width: auto; /* 宽度自适应，保持宽高比 */
    height: auto; /* 高度自适应，保持宽高比 */
    transform: translate(-50%, -50%); /* 通过transform实现精确居中 */
    object-fit: cover; /* 视频内容将填充整个元素框，保持宽高比，多余部分裁剪 */
    z-index: -2; /* 使其位于最底层，在.container::before遮罩层之下 */
}

/*
    被注释掉的特斯拉风格导航栏相关CSS样式已被删除。
    这些样式对应HTML中被删除的导航栏部分。
*/

/* 主内容区域flex布局 */
.main-content-area {
    display: flex; /* 使用flex布局，使标题区和AI导游区水平排列 */
    flex-grow: 1; /* 占据容器内剩余的可用空间 */
    width: 100%; /* 宽度100% */
    padding: 20px 8% 20px 8%; /* 内边距：上下20px，左右8% */
    box-sizing: border-box; /* padding不计入width */
    align-items: center; /* 子元素在交叉轴上居中对齐 (垂直居中) */
    gap: 2%; /* 标题区和AI导游区之间的间隙 */
    position: relative; /* 确保其内容在遮罩层之上 */
    z-index: 10; /* 堆叠顺序高于背景和遮罩 */
}

/* 左侧标题区域 */
.title-area {
    width: 60%; /* 占据主内容区域60%的宽度 */
    align-self: stretch; /* 在交叉轴上拉伸以填充父容器高度 */
    display: flex; /* 内部也使用flex布局 */
    flex-direction: column; /* 标题等内容垂直排列 */
    justify-content: center; /* 主轴上居中 (垂直居中其内容) */
    align-items: flex-start; /* 交叉轴上从起始位置对齐 (水平靠左其内容) */
    overflow: hidden; /* 防止标题过长时溢出 */
    position: relative; /* 用于可能的内部绝对定位元素 */
}

/* "邕城" 大标题样式 */
.bt {
    font-family: "LingWai SC", "STKaiti", "Kaiti SC", serif; /* 特殊字体栈，用于艺术字效果 */
    margin: 0; /* 移除默认外边距 */
    padding: 0; /* 移除默认内边距 */
    white-space: nowrap; /* 防止文字换行 */
    font-weight: normal; /* 正常字重 */
    color: rgba(255, 255, 255, 0.88); /* 文字颜色，带透明度 */
    -webkit-text-stroke: 1px rgba(40, 40, 40, 0.6); /* Webkit内核文字描边 */
    text-stroke: 1px rgba(40, 40, 40, 0.6); /* 标准文字描边 */
    text-shadow: 3px 3px 6px rgba(0,0,0,0.35), 0 0 18px rgba(255,255,255,0.22); /* 多重文字阴影效果 */
    text-align: left; /* 文字左对齐 */
    /* 响应式字体大小：最小100px，随视口宽度30vw变化，最大600px */
    font-size: clamp(100px, 30vw, 600px);
    line-height: 0.7; /* 行高，小于1可以使多行文字更紧凑 (此处为单行，影响不大但可能是为了垂直对齐) */
}

/* 右侧AI导游区域 */
.ai-guide-area {
    width: 38%; /* 占据主内容区域38%的宽度 (与.title-area的60%和gap的2%相加为100%) */
    background-color: rgba(20, 20, 20, 0.75); /* 半透明深灰色背景 */
    border-radius: 12px; /* 圆角边框 */
    padding: 20px; /* 内边距 */
    box-sizing: border-box; /* padding不计入width */
    color: #e8e8e8; /* 默认文字颜色 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 内部元素垂直排列 (标题、聊天窗口、输入区) */
    max-height: 80vh; /* 最大高度为视口高度的80% */
    min-height: fit-content; /* 最小高度根据内容自适应 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.35); /* 盒子阴影效果 */
    overflow: hidden; /* 当内容超出max-height时隐藏，配合内部滚动 */
    transition: height 0.3s ease-out, max-height 0.3s ease-out; /* 高度变化时的过渡动画 */
}

/* AI导游区域内的H3标题 */
.ai-guide-area h3 {
    margin-top: 0; /* 移除顶部外边距 */
    margin-bottom: 15px; /* 底部外边距 */
    color: #ffffff; /* 文字颜色 */
    text-align: center; /* 文字居中 */
    font-size: 1.4em; /* 字体大小 */
    border-bottom: 1px solid rgba(255,255,255,0.2); /* 底部边框作为分割线 */
    padding-bottom: 10px; /* 边框与文字的间距 */
    flex-shrink: 0; /* 防止在flex布局中被压缩 */
}

/* 聊天窗口容器 (包含聊天记录和输入区) */
.chat-window {
    flex-grow: 1; /* 占据AI导游区域内剩余的垂直空间 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 内部元素(聊天记录、输入区)垂直排列 */
    overflow: hidden; /* 隐藏溢出内容，配合内部滚动条 */
    min-height: 0; /* Flexbox hack: 允许内部可滚动元素正确计算其高度 */
}

/* 聊天记录显示区域 */
.chat-log {
    flex-grow: 1; /* 占据聊天窗口内主要的可用空间 */
    overflow-y: auto; /* 当内容超出时，垂直方向显示滚动条 */
    padding: 10px; /* 内边距 */
    margin-bottom: 15px; /* 与下方输入区域的间距 */
    border-radius: 5px; /* 圆角 */
    min-height: 30px; /* 最小高度，即使没有消息也保持一定高度 */
    transition: background-color 0.3s ease, border 0.3s ease, max-height 0.3s ease-out; /* 样式变化的过渡效果 */
    max-height: 55vh; /* 最大高度限制，防止聊天记录过长 */
}

/* 当聊天记录中有内容时应用的样式 (通过JS添加此类名) */
.chat-log.has-content {
    border: 1px solid rgba(100,100,100,0.2); /* 添加浅色边框 */
    background-color: rgba(0,0,0,0.3); /* 添加半透明黑色背景 */
}

/* 单条消息的通用样式 */
.message {
    margin-bottom: 10px; /* 消息间的垂直间距 */
    padding: 8px 12px; /* 消息内边距 */
    border-radius: 15px; /* 消息气泡圆角 */
    max-width: 85%; /* 消息最大宽度，防止占满整行 */
    word-wrap: break-word; /* 长单词或URL自动换行 */
    line-height: 1.4; /* 行高 */
}

/* 用户发送的消息样式 */
.user-message {
    background-color: #40AF4E; /* 用户消息背景色 (绿色) */
    color: white; /* 用户消息文字颜色 */
    margin-left: auto; /* 使其靠右对齐 */
    border-bottom-right-radius: 3px; /* 右下角调整为较小的圆角，形成对话气泡感 */
}

/* AI回复的消息样式 */
.ai-message {
    background-color: #4A4A4A; /* AI消息背景色 (深灰色) */
    color: #e0e0e0; /* AI消息文字颜色 */
    margin-right: auto; /* 使其靠左对齐 */
    border-bottom-left-radius: 3px; /* 左下角调整为较小的圆角 */
}

/* 聊天输入区域 (包含输入框和发送按钮) */
.chat-input-area {
    display: flex; /* 使用flex布局，使输入框和按钮水平排列 */
    border-top: 1px solid rgba(255,255,255,0.2); /* 顶部边框作为与聊天记录的分割线 */
    padding-top: 15px; /* 顶部内边距 */
    flex-shrink: 0; /* 防止在flex布局中被压缩，保持其固定高度 */
}

/* 用户输入框样式 */
#user-input {
    flex-grow: 1; /* 占据输入区域主要的可用空间 */
    padding: 10px 12px; /* 内边距 */
    border: 1px solid rgba(255,255,255,0.3); /* 边框颜色 */
    border-radius: 20px; /* 圆角 */
    background-color: rgba(255,255,255,0.05); /* 背景色，非常淡的白色 */
    color: #e0e0e0; /* 输入文字颜色 */
    margin-right: 10px; /* 与发送按钮的间距 */
    outline: none; /* 移除获取焦点时的默认轮廓 */
    font-size: 1em; /* 字体大小 */
}

/* 用户输入框获取焦点时的样式 */
#user-input:focus {
    border-color: #40AF4E; /* 边框变为主题绿色 */
}

/* 发送按钮样式 */
#send-button {
    padding: 10px 20px; /* 内边距 */
    background-color: #40AF4E; /* 背景色 (主题绿色) */
    color: white; /* 文字颜色 */
    border: none; /* 移除默认边框 */
    border-radius: 20px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    font-weight: bold; /* 字体加粗 */
    transition: background-color 0.3s ease; /* 背景色变化的过渡动画 */
    font-size: 1em; /* 字体大小 */
}

/* 发送按钮鼠标悬停时的样式 */
#send-button:hover {
    background-color: #367c43; /* 背景色变深 */
}


/* 声音切换按钮样式 */
.sound-toggle {
    position: fixed; /* 固定定位，相对于视口 */
    bottom: 25px; /* 距离视口底部25px */
    right: 25px; /* 距离视口右侧25px */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    z-index: 1000; /* 确保在页面最上层 */
    background-color: rgba(20, 20, 20, 0.6); /* 半透明背景 */
    border-radius: 50%; /* 圆形按钮 */
    padding: 10px; /* 内边距，使图标与边缘有距离 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 按钮阴影 */
    transition: background-color 0.2s ease; /* 背景色变化的过渡动画 */
}
.sound-toggle:hover {
    background-color: rgba(0, 0, 0, 0.8); /* 鼠标悬停时背景色变深 */
}
.sound-toggle img {
    width: 28px; /* 图标宽度 */
    height: 28px; /* 图标高度 */
    display: block; /* 移除图片下方的额外空间 */
}

/* START: 版权信息悬浮按钮样式 */
/* 版权按钮容器 */
#copyright-button-container {
    position: fixed; /* 固定定位 */
    bottom: 25px; /* 距离视口底部25px */
    left: 25px; /* 距离视口左侧25px */
    z-index: 1000; /* 确保在页面最上层 */
    cursor: default; /* 容器本身光标为默认，交互在触发器上 */
}

/* 版权符号触发器 (©) */
#copyright-trigger {
    display: inline-block; /* 使其表现像行内元素但可设置宽高和padding/margin */
    background-color: rgba(20, 20, 20, 0.6); /* 半透明背景 */
    color: #fff; /* 文字颜色 */
    padding: 10px 15px; /* 内边距 */
    border-radius: 20px; /* 圆角 */
    font-size: 18px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 阴影 */
    transition: background-color 0.2s ease; /* 背景色变化的过渡动画 */
}

#copyright-trigger:hover {
    background-color: rgba(0, 0, 0, 0.8); /* 鼠标悬停时背景色变深 */
}

/* 版权信息弹出层 */
#copyright-info-popup {
    position: absolute; /* 绝对定位，相对于 #copyright-button-container */
    bottom: 100%; /* 定位在触发器的正上方 */
    /* MODIFIED: 将 left 从 200% 改为 50% 以便结合 transform 实现相对于父容器的居中 */
    left: 300%; /* 水平方向上，使其左边缘位于父容器的中心线 */
    /* transform 用于精确调整位置：translateX(-50%) 使其自身水平居中，translateY 调整垂直位置和动画 */
    transform: translateX(-50%) translateY(10px); /* 初始时向下偏移10px (用于动画) */
    margin-bottom: 10px; /* 弹出层与触发器之间的间距 */
    background-color: rgba(10, 10, 10, 0.9); /* 深色半透明背景 */
    padding: 15px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* 阴影效果 */
    opacity: 0; /* 初始状态为完全透明 */
    visibility: hidden; /* 初始状态为不可见 (且不占空间) */
    /* 过渡动画效果：透明度、可见性、transform变换 */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    min-width: 250px; /* 最小宽度 */
    color: #ddd; /* 文字颜色 */
    font-size: 13px; /* 字体大小 */
    line-height: 1.5; /* 行高 */
    text-align: center; /* 内部文本居中对齐 (原为left) */
}

/*
    #copyright-info-popup img 样式规则已被删除。
    理由：当前的HTML结构中，#copyright-info-popup 内部没有 <img> 元素，此规则无效。
          如果将来添加图片，可以再恢复或定义新的样式。
*/

/* 弹出层内部的每行版权文本 */
#copyright-info-popup .copyright-text {
    margin-bottom: 5px; /* 行间距 */
    padding: 0; /* 移除默认内边距 */
    color: #e0e0e0; /* 文字颜色 */
    font-size: 12px; /* 字体大小 */
    white-space: normal; /* 允许文本正常换行 (如果需要强制不换行，则用nowrap) */
}
/* 移除最后一行文本的底部外边距 */
#copyright-info-popup .copyright-text:last-child {
    margin-bottom: 0;
}

/* 当鼠标悬停在 #copyright-button-container (即触发器区域) 时，显示弹出层 */
#copyright-button-container:hover #copyright-info-popup {
    opacity: 1; /* 变为完全不透明 */
    visibility: visible; /* 变为可见 */
    transform: translateX(-50%) translateY(0); /* 向上移动到最终位置，完成动画 */
}
/* END: 版权信息悬浮按钮样式 */