style.css

#mainContainer {
    display: flex;
    justify-content: center; /* 水平居中 */
    max-width:500px;
    margin: 0 auto; /* 居中 */
    padding: 20px;
}

#searchBox {
    width: 150px; /* 初始宽度 */
    transition: width 0.3s; /* 宽度变化的过渡效果 */
}

#searchBox input {
    width: 100%; /* 使输入框填满整个容器 */
}

#searchBox:focus-within {
    width: 200px; /* 聚焦时的宽度 */
}

#searchButton {
    padding: 0; /* 移除内边距以减少按钮大小，使其与输入框对齐 */
    margin-left: -25px; /* 使按钮紧贴输入框 */
    background-color: transparent; /* 使按钮背景透明 */
    border: none; /* 移除边框 */
}

#resultsContainer {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 为搜索建议添加阴影 */
    z-index: 1000; /* 确保搜索建议在其他元素上方显示 */
    border-radius: 5px; /* 为容器添加圆角 */
    overflow: hidden; /* 防止子元素溢出容器圆角 */
    background-color: #fff; /* 为了更好的视觉效果，可能需要设置背景色 */
}

.ui.list.bordered {
    border: 1px solid rgba(34,36,38,.15); /* 添加边框 */
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); /* 添加阴影 */
}

.ui.list{
    margin: 0;;
}

#resultsContainer .item {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
    margin-top: 5px;
    margin-bottom: 5px; /* 在项之间添加一些间隔 */
    border: none; /* 确保没有边框 */
    transition: background-color 0.3s; /* 添加背景色变化的过渡效果 */
}

#resultsContainer .item:hover {
    background-color: #e2e2e2; /* 鼠标悬浮时的背景色 */
}

#suggestionContainer {
    display: none;
}

#resultsList {
    padding: 10px;
    background-color: #0f0f0f; /* 为结果列表添加背景色 */
    border-bottom: 1pxrgb(42, 36, 36)#ddd; /* 在列表和答案之间添加一条边界线 */
}

#answerContainer {
    padding: 10px;
    background-color: #f7f7f7;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    display: none;
}

#feedbackContainer {
    margin-top: 10px;
    align-items: center;
    border-top: gray solid 1px;
    padding: 5px;
    min-height: 30px;
}

#likeButton, #dislikeButton {
    cursor: pointer;
    margin-right: 10px;
    float: left;
}

#copyButton {
    cursor: pointer;
    float: right;
}

#likeButton:hover, #dislikeButton:hover, #copyButton:hover {
    color: #007bff;
}