@charset "utf-8";
/* =========================================================
 * Site-wide tool search (header widget)
 * Loaded by index/common/mate.html; markup in index/common/header.html
 * Wiring/behaviour: public/statics/js/search.js
 * ========================================================= */

.tool-search{
    position:relative;
    /* 长语种下给菜单让位：可压缩但有下限；右对齐由外层 .navbar-actions 负责 */
    flex:0 1 190px;
    margin:0 .5rem;
    min-width:140px;
}

/* optional compact toggle (kept for a future collapsed/mobile header) */
.tool-search__toggle{display:none}

.tool-search__field{
    display:flex;
    align-items:center;
    gap:.4rem;
    padding:.3rem .7rem;
    background:#f1f3f5;
    border:1px solid transparent;
    border-radius:999px;
    transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.tool-search__field:focus-within{
    background:#fff;
    border-color:var(--primary-color);
    box-shadow:0 0 0 .2rem rgba(102,126,234,.15);
}

.tool-search__icon{
    color:var(--text-muted);
    font-size:.85rem;
    line-height:1;
}

.tool-search__input{
    flex:1 1 auto;
    min-width:0;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    font-size:.875rem;
    line-height:1.5;
    color:var(--text-primary);
}

.tool-search__input:focus{outline:0;box-shadow:none}
.tool-search__input::placeholder{color:var(--text-muted);opacity:1}

.tool-search__clear{
    padding:0;
    border:0;
    background:transparent;
    color:var(--text-muted);
    font-size:.85rem;
    line-height:1;
    cursor:pointer;
}

.tool-search__clear:hover{color:var(--danger-color)}

.tool-search__panel{
    position:absolute;
    top:calc(100% + .4rem);
    right:0;
    z-index:1055;
    width:min(30rem,86vw);
    max-height:min(70vh,26rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:var(--card-radius);
    box-shadow:0 1rem 2.5rem rgba(0,0,0,.16);
}

.tool-search__panel[hidden]{display:none!important}

.tool-search__group{
    padding:.5rem .9rem .25rem;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--text-muted);
}

.tool-search__item{
    display:block;
    padding:.5rem .9rem;
    border-top:1px solid var(--bs-light-border-subtle);
    color:var(--text-primary);
}

.tool-search__item:hover,
.tool-search__item.is-active{
    background:var(--background-hover);
    color:var(--text-primary);
    text-decoration:none;
}

.tool-search__title{
    display:block;
    font-size:.9rem;
    font-weight:500;
    line-height:1.4;
}

.tool-search__title mark{
    padding:0 .1rem;
    background:rgba(102,126,234,.18);
    border-radius:.15rem;
    color:var(--primary-color);
}

.tool-search__meta{
    display:flex;
    align-items:baseline;
    gap:.4rem;
    margin-top:.15rem;
    min-width:0;
}

.tool-search__cat{
    flex:0 0 auto;
    padding:.05rem .4rem;
    background:rgba(102,126,234,.1);
    border-radius:999px;
    color:var(--primary-color);
    font-size:.72rem;
}

.tool-search__desc{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:var(--text-muted);
    font-size:.78rem;
}

.tool-search__empty{
    padding:1rem .9rem;
    text-align:center;
    color:var(--text-muted);
    font-size:.85rem;
}

.tool-search__hint{
    display:block;
    margin-top:.3rem;
    font-size:.78rem;
    opacity:.85;
}

.tool-search__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    padding:.5rem .9rem;
    background:#fafbfc;
    border-top:1px solid var(--border-color);
    font-size:.78rem;
    color:var(--text-muted);
}

.tool-search__all{
    flex:0 0 auto;
    font-size:.78rem;
    color:var(--primary-color);
}

/* Collapsed navbar (mobile / tablet): full-width field inside the menu */
@media (max-width:991.98px){
    .tool-search{
        flex:1 1 100%;
        margin:.5rem 0;
    }

    .tool-search__panel{
        right:auto;
        left:0;
        width:100%;
    }
}