/* Body 元素样式 */
body {
    font-family: Arial, sans-serif;  
    background-color: #060e1b;  
    color: #d2d1d1;  
    margin: 0;  
    padding: 0;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    height: 100vh;  
    width: 100vw;  
    flex-direction: column;  
    position: relative;  
}

/* 父容器 T1 样式 */
.T1 {
    display: flex;  
    flex-direction: column;  
    align-items: flex-start;  
    position: absolute;  
    top: 21vh;  
    left: 15vw;  
    text-align: center;  
}

/* 第一个文本样式 */
.first-text {
    font-size: 2.3vw;  
    font-weight: bold;  
    margin-bottom: 1vh;  
}

/* 第二个文本样式 */
.second-text {
    font-size: 0.8vw;  
}

/* 输入框、下拉菜单和搜索按钮放置在同一行的容器 .S */
.S {
    display: flex;  
    align-items: center;  
    margin-top: 1vh;  
    text-align: center;  
    position: absolute;  
    top: 30vh;  
    left: 41vw;  
}

/* 输入框样式 */
.inputtext {
    width: 25vw;  
    height: 3.7vh;  
    padding: 0.5vh 0.5vw;  
    font-size: 0.8vw;  
    color: #333;  
    background-color: #d2d1d1;  
    border: none;  
    border-radius: 0;  
    outline: none;  
}

/* 下拉菜单样式 */
.search-engine {
    width: 3.6vw;  
    height: 3.7vh;  
    padding: 0.5vh 0vw;  
    font-size: 0.8vw;  
    color: #333;  
    background-color: #d2d1d1;  
    border: none;  
    border-radius: 0;  
    outline: none;  
    text-align: left;  
}

/* 搜索按钮样式 */
.search-button {
    width: 8vw;  
    height: 3.9vh;  
    background-color: #357edd;  
    color: #fff;  
    border-radius: 0 0.5vh 0.5vh 0;  
    cursor: pointer;  
    font-size: 0.8vw;  
    padding: 0.5vh 1vw;  
    border: none;  
    outline: none;  
}

/* 容器 T2 样式 */
.T2 {
    display: flex;  
    justify-content: center;  
    flex-direction: column;  
    align-items: center;  
    margin-top: 16vh;  
    text-align: center;  
}

/* 容器 T2a 样式 */
.T2a {
    display: flex;  
    justify-content: center;  
    margin-bottom: 8vh;  
}

/* 容器 T2b 样式 */
.T2b {
    display: flex;  
    justify-content: center;  
    margin-top: 8vh;  
}

/* T2 容器内的数字元素样式 */
.number {
    font-size: 1.5vw;  
    margin-left: 5vw;  
    margin-right: 5vw;  
    cursor: pointer;  
    transition: color 0.3s ease;  
    text-decoration: none;  
    color: inherit;  
    width: 7vw;  
    height: 2vh;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    text-align: center;  
}

/* 鼠标悬停时数字元素样式 */
.number:hover {
    color: #0d6efd;  
}

/* 底部容器样式 */
footer {
    position: absolute;  
    bottom: 2vh;  
    right: 1vw;  
    font-size: 0.8vw;  
    text-align: center;  
    display: inline-block;  
}

/* 底部链接样式 */
footer a {
    color: #d2d1d1;  
    margin: 0;  
    text-decoration: none;  
    transition: color 0.3s ease;  
}

/* 鼠标悬停时底部链接样式 */
footer a:hover {
    color: #fff;  
}

/* 天气信息容器样式 */
#weather-info {
  position: absolute;   /* 将容器绝对定位，相对于其最近的具有相对定位或固定定位的父元素 */
  top: 28vh;            /* 距离页面顶部的距离 */
  left: 39vw;           /* 距离页面左侧的距离为  */
}

/* 天气信息段落样式 */
#weather-info a {
  font-size: 0.9vw;      /* 设置段落字体大小为  */
  margin-left: 2.5vw;    /* 设置段落的左侧间距为  */
  margin-right: 2.5vw;   /* 设置段落的右侧间距为  */
}

/* 下拉菜单容器 - 用于定位下拉菜单 */
.ai-dropdown-container {
    position: relative; /* 相对定位，作为下拉菜单的定位基准 */
    display: inline-block; /* 保持在同一行显示 */
}

/* 下拉菜单样式（合并重复定义，统一管理） */
.ai-dropdown-menu {
    display: none !important; /* 强制默认隐藏（!important确保优先级，覆盖可能的冲突样式） */
    position: absolute; /* 绝对定位，相对于容器定位 */
    left: 50%; /* 水平方向居中对齐容器 */
    transform: translateX(-50%); /* 水平居中调整，确保在文字正下方 */
    top: 100%; /* 垂直方向与触发文字底部对齐 */
    width: 5.73vw; /* 固定宽度（原注释写"最小宽度"，实际是固定宽度） */
    margin: 0; /* 清除默认外边距 */
    padding: 0.26vw 0; /* 上下内边距，增加菜单上下空间 */
    list-style: none; /* 去除默认列表样式 */
    background-color: #2c3e50; /* 深色背景（与深色页面协调） */
    border: 1px solid #2c3e50; /* 边框与背景同色，弱化边框感 */
    border-radius: 0.31vw; /* 圆角边框，柔和视觉效果 */
    box-shadow: 0 0.16vw 0.52vw rgba(0, 0, 0, 0.3); /* 加深阴影，在深色背景上更明显 */
    z-index: 9999; /* 最高层级，确保不被其他元素遮挡 */
    margin-top: 0.52vw; /* 与触发文字保持距离，避免紧贴 */
}

/* 下拉菜单项容器 */
.ai-dropdown-menu li {
    margin: 0; /* 清除默认外边距 */
    padding: 0; /* 清除默认内边距 */
}

/* 下拉菜单项链接样式 */
.ai-dropdown-menu li a {
    display: block; /* 块级显示，使点击区域充满整个菜单项 */
    padding: 0.42vw 0.83vw; /* 内边距，增加点击区域大小 */
    color: #ecf0f1; /* 浅色文字，与深色背景形成对比，确保可读性 */
    text-decoration: none; /* 去除默认下划线 */
    font-size: 0.8vw; /* 适当字体大小 */
    text-align: center; /* 文字居中对齐 */
    transition: all 0.2s ease; /* 所有属性变化添加过渡动画，提升交互感 */
    white-space: nowrap; /* 防止文字换行 */
}

/* 下拉菜单项 hover 效果 */
.ai-dropdown-menu li a:hover {
    background-color: #34495e; /* 悬停时背景变为浅色 */
    color: #0d6efd; /* 悬停时文字变为主色调（蓝色），增强交互反馈 */
}

/* 显示下拉菜单的类（优先级高于默认隐藏） */
.ai-dropdown-visible {
    display: block !important; /* 强制显示（!important确保覆盖默认隐藏） */
    animation: aiDropdownFadeIn 0.25s ease-out; /* 应用淡入动画，提升体验 */
}

/* 下拉菜单淡入动画 */
@keyframes aiDropdownFadeIn {
    from {
        opacity: 0; /* 初始透明度为0 */
        transform: translate(-50%, -0.26vw); /* 初始位置向上偏移5px，营造弹出感 */
    }
    to {
        opacity: 1; /* 结束时完全不透明 */
        transform: translate(-50%, 0); /* 结束时回到正常位置 */
    }
}