:root { --primary: #3498db; --bg: #f5f5f5; --text: #333; --border: #ddd; --green: #2ecc71; --red: #e74c3c; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; }

.container { display: flex; height: 100%; width: 100%; }

/* --- 侧边栏 --- */
.sidebar { width: 320px; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 50; box-shadow: 2px 0 10px rgba(0,0,0,0.1); }

/* 搜索区 */
.search-box { padding: 15px; background: #fff; border-bottom: 1px solid #eee; position: relative; z-index: 100; flex-shrink: 0; }
.search-wrapper { position: relative; width: 100%; }
.search-box input[type="text"] { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; margin-bottom: 10px; }
.search-dropdown { position: absolute; top: 100%; left: 0; width: 100%; max-height: 250px; background: #fff; border: 1px solid #999; border-radius: 0 0 6px 6px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); list-style: none; padding: 0; margin: 0; overflow-y: auto; z-index: 10000; }
.search-dropdown li { padding: 12px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; font-size: 15px; }
.control-row { display: flex; justify-content: space-between; align-items: center; }
#queryBtn { padding: 8px 20px; background: var(--primary); color: #fff; border: none; border-radius: 6px; cursor: pointer; }

/* 线路详情区 */
.info-card { padding: 15px; background: #f9f9f9; border-bottom: 1px solid #eee; flex-shrink: 0; }
.info-card p { margin: 5px 0; font-size: 14px; color: #666; }

/* --- 附近站点列表区 (重构版：标题与内容分离) --- */
.nearby-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid #eee;
    overflow: hidden; 
}

/* 标题栏：永远显示，不可折叠 */
.nearby-header {
    flex-shrink: 0;
    padding: 15px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    background: #fff;
    z-index: 10;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}

/* 列表内容区：负责动画折叠 */
.nearby-list-content {
    overflow-y: auto;
    /* 关键动画：高度、透明度、flex伸缩 */
    transition: flex-grow 0.3s ease, min-height 0.3s ease, opacity 0.3s;
    
    /* 默认展开状态 */
    flex-grow: 1;
    opacity: 1;
    min-height: 100px; /* 默认给一点高度 */
}

/* 折叠状态 */
.nearby-list-content.collapsed {
    flex-grow: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
}

.nearby-station-name { color: var(--primary); margin-left: 5px; }

/* 箭头旋转 */
.toggle-icon {
    font-size: 12px;
    margin-right: 6px;
    color: #666;
    transition: transform 0.3s ease;
    display: inline-block;
}
.toggle-icon.rotate {
    transform: rotate(-90deg);
}

.nearby-line-item { padding: 12px 0; border-bottom: 1px solid #f5f5f5; display: flex; justify-content: space-between; align-items: center; cursor: pointer; margin: 0 15px; }
.nearby-line-item:active { background: #f0f0f0; }
.nl-left { display: flex; flex-direction: column; }
.nl-name { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 4px; }
.nl-dir { font-size: 12px; color: #999; }
.nl-right { text-align: right; }
.nl-status { font-size: 14px; color: var(--primary); font-weight: 500; }
.nl-dist { font-size: 12px; color: #999; margin-top: 2px; }

/* 动画 */
.loading-dots::after { content: '...'; animation: dots 1.5s infinite; }
@keyframes dots { 0%{content:'.'} 33%{content:'..'} 66%{content:'...'} }

/* --- 主内容区 --- */
.main-content { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; position: relative; z-index: 1; }
.station-strip-container { height: 160px; background: #fff; border-bottom: 1px solid #ccc; overflow-x: auto; white-space: nowrap; position: relative; z-index: 10; scroll-behavior: smooth; }
.station-strip { display: inline-flex; padding: 50px 20px 20px 20px; min-width: 100%; }

.station-node { position: relative; width: 80px; text-align: center; vertical-align: top; cursor: pointer; }
.dot { width: 12px; height: 12px; background: #fff; border: 2px solid #ccc; border-radius: 50%; margin: 0 auto 10px auto; position: relative; z-index: 2; transition: all 0.3s; }
.line-segment { position: absolute; top: 5px; left: 50%; width: 100%; height: 2px; background: #eee; z-index: 1; }
.station-node:last-child .line-segment { display: none; }
.st-name { font-size: 12px; color: #333; white-space: normal; line-height: 1.2; }

/* 高亮样式 */
.station-node.nearest .dot { border-color: var(--green); background: #e8f8f5; transform: scale(1.3); box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.2); }
.station-node.nearest .st-name { color: #27ae60; font-weight: bold; }
.nearest-tag { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 10px; white-space: nowrap; z-index: 6; animation: bounce 2s infinite; }
.nearest-tag::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border-width: 4px 4px 0; border-style: solid; border-color: var(--green) transparent transparent; }
@keyframes bounce { 0%, 100% { transform:translate(-50%, 0); } 50% { transform:translate(-50%, -5px); } }

.bus-float { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 5; white-space: nowrap; }
.bus-float::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border-width: 4px 4px 0; border-style: solid; border-color: var(--primary) transparent transparent; }

#mapContainer { flex: 1; width: 100%; background: #eee; }

@media (max-width: 768px) {
    .container { flex-direction: column; }
    .sidebar { width: 100%; height: auto; max-height: 45vh; flex-shrink: 0; display: flex; flex-direction: column; }
    /* 手机端修复：不要定死最小高度，让 flex 控制 */
    .nearby-container { min-height: auto; } 
    .search-box { padding: 10px; }
    .info-card { display: none; } 
    .station-strip-container { height: 140px; }
    .main-content { height: 55vh; }
}