/* search-styles.css */

/* 
  关于宽度一致性的说明：
  下面的 .search-bar-container 设置为 width: 100%，它将填充其父元素 (.controls-section)。
  要使整个搜索部分（输入框+按钮）与下面的下载/分享按钮（.action-buttons）具有一致的总宽度，
  你需要确保 .controls-section 和 .action-buttons 在你的HTML结构和整体CSS中具有可比较的宽度。
  例如，它们可能都需要 width: 100% 并共享一个共同的、有宽度约束的父元素，
  或者它们都被赋予了相同的 max-width 和居中样式。
*/

.search-bar-container {
    display: flex;
    align-items: stretch; /* 改为 stretch 以确保子元素填充高度，然后内部对齐 */
    margin-bottom: 10px;
    position: relative; 
    width: 100%; /* 使其填充父容器 (.controls-section) */
    height: 40px; /* 给容器一个明确的高度 */
}

#searchInput {
    flex-grow: 8;  /* 占据8份可用空间 */
    flex-shrink: 1; /* 必要时允许收缩 */
    flex-basis: 0;  /* 基于 flex-grow 分配空间 */
    padding: 0 12px; /* 调整内边距以帮助垂直居中文本 */
    border: 1px solid #ccc;
    border-right: none; /* 与按钮形成统一边框 */
    border-radius: 4px 0 0 4px; /* 左侧圆角 */
    font-size: 16px;
    box-sizing: border-box;
    margin: 0; /* 移除默认边距以帮助对齐 */
    line-height: 40px; /* 尝试通过行高对齐 */
}

#searchInput:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

#searchButton {
    flex-grow: 2;  /* 占据2份可用空间 */
    flex-shrink: 0; /* 防止按钮被过度压缩 */
    flex-basis: 0;  /* 基于 flex-grow 分配空间 */
    padding-left: 18px;  /* 文本的水平内边距 */
    padding-right: 18px; /* 文本的水平内边距 */
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
    border-radius: 0 4px 4px 0; /* 右侧圆角 */
    cursor: pointer;
    font-size: 16px;
    box-sizing: border-box;
    white-space: nowrap; /* 防止按钮文字换行 */
    margin: 0; /* 移除默认边距以帮助对齐 */

    display: flex; /* 用于在按钮内部居中文本 */
    align-items: center;
    justify-content: center;
    height: 100%; /* 确保按钮填充容器高度 */
}

#searchButton:hover {
    background-color: #0056b3;
}

#searchResultsContainer {
    position: absolute;
    top: 100%; /* 定位在搜索栏下方 */
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ddd; 
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 300px; 
    overflow-y: auto;
    z-index: 1000; /* 确保在其他元素之上 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    display: none; /* Initially hidden */
}

#searchResultsContainer.active {
    display: block;
}

.search-result-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #f5f5f5; 
}

.search-result-item strong {
    font-weight: 600; 
    color: #007bff; 
}

.search-result-item .operator {
    font-size: 0.9em;
    color: #555; 
    display: block;
    margin-top: 2px;
}

.no-results {
    padding: 10px 12px;
    color: #777; 
    text-align: center;
}

/* 旧的 Algolia 弹窗特定样式 - 强制隐藏 */
.search-modal {
    display: none !important;
}

/* 确保 controls-section 可以正确包含绝对定位的 searchResultsContainer */
.controls-section {
    position: relative; 
    /* width: 100%; */ /* 如果需要，确保它占据可用宽度 */
    /* box-sizing: border-box; */
}