@charset "utf-8";
/*!
 * rc_znss.css —— 智能搜索（站内搜索框增强）样式
 * ---------------------------------------------------------------------------
 * 与 rc_znss.js 配合使用，页面只需引入两个文件即可，无需改造 HTML。
 * 所有类名统一 rc-znss- 前缀，关键属性加 !important，避免被站点全局样式覆盖。
 *
 * 可调颜色（覆盖同名变量即可，例如放在 rc_znss.css 之后的自定义样式里）：
 *   --rc-znss-primary   主色（政务蓝），默认 #1a56b8
 *   --rc-znss-title     面板标题文字色，默认 #888888
 *   --rc-znss-text      标签文字色
 *   --rc-znss-tag-bg    标签底色
 *   --rc-znss-tag-hover 标签悬停底色
 */

/* ---------------------------------------------------------------------------
 * 1.「大家都在搜」下拉面板
 * ------------------------------------------------------------------------ */
.rc-znss-panel {
    --rc-znss-primary: #1a56b8;
    --rc-znss-title: #888888;
    --rc-znss-text: #555555;
    --rc-znss-tag-bg: #f5f6f8;
    --rc-znss-tag-hover: #e8effa;

    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 2147483000 !important;
    display: none;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    width: 300px;
    max-width: calc(100vw - 16px);
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
    text-align: left !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.rc-znss-panel.is-open {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

/* 面板标题：大家都在搜 */
.rc-znss-panel .rc-znss-panel-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.rc-znss-panel .rc-znss-panel-title {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--rc-znss-title) !important;
    background: none !important;
    border: none !important;
}

/* 标签容器（不支持 flex 的浏览器会回退为 block + inline-block 流式排列） */
.rc-znss-panel .rc-znss-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    margin: 0 0 -10px 0 !important;   /* 负下边距抵消标签的 margin-bottom */
    padding: 0 !important;
    list-style: none !important;
}

/* 单个热词标签 */
.rc-znss-panel .rc-znss-tag {
    display: inline-block !important;
    box-sizing: border-box !important;
    margin: 0 10px 10px 0 !important;
    padding: 6px 12px !important;
    max-width: 100%;
    background: var(--rc-znss-tag-bg) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--rc-znss-text) !important;
    font-size: 13px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer !important;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rc-znss-panel .rc-znss-tag:hover,
.rc-znss-panel .rc-znss-tag:focus,
.rc-znss-panel .rc-znss-tag.is-active {
    background: var(--rc-znss-tag-hover) !important;
    color: var(--rc-znss-primary) !important;
    text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. 输入框清空按钮（×）
 *    外观、尺寸、显示与否都在这里定义（显示由 .is-visible 控制）；
 *    top / left 由 JS 按输入框实际位置实时写入内联样式（坐标是动态的，站点之间不配置）。
 * ------------------------------------------------------------------------ */
.rc-znss-clear {
    position: fixed !important;
    z-index: 2147483000 !important;
    display: none;                 /* 由 .is-visible 控制显示 */
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #c4c4c4 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    /* 与演示稿保持一致：<button> 在演示稿里用的是浏览器默认 UI 字体，
       这里显式写死同一套字体栈，避免被站点/页面的正文字体（如微软雅黑）改变 ✕ 的字形。
       图标字体、标签字体都会连带影响，所以用 !important 覆盖。 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
    font-variant-numeric: normal;
    line-height: 1 !important;
    text-align: center;
    cursor: pointer !important;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.2s ease;
}

.rc-znss-clear.is-visible {
    display: flex !important;
}

.rc-znss-clear:hover,
.rc-znss-clear:focus {
    background-color: #999999 !important;
}

/* 清空按钮内为文字「✕」（12px），与演示稿一致，无需额外图标样式 */

/* ---------------------------------------------------------------------------
 * 3. 移动端适配
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    .rc-znss-panel {
        padding: 12px 14px 14px !important;
        border-radius: 6px !important;
    }

    .rc-znss-panel .rc-znss-tags {
        margin-bottom: -8px !important;
    }

    .rc-znss-panel .rc-znss-tag {
        margin: 0 8px 8px 0 !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

/* 用户开启“减少动效”时不做过渡动画 */
@media (prefers-reduced-motion: reduce) {
    .rc-znss-panel,
    .rc-znss-panel .rc-znss-tag,
    .rc-znss-clear {
        transition: none !important;
    }
}

/* 打印时不显示注入的浮层 */
@media print {
    .rc-znss-panel,
    .rc-znss-clear {
        display: none !important;
    }
}