/* ============================================================
   NexoFlow FAQ Widget — final UI (2026-10-13)
   设计口径：只用「品牌深蓝黑 → 动作蓝」一族渐变；彩色只做线/条/淡底/图标底。
   白标：所有彩色与 focus 光晕均派生自 --nfx-brand-color（由 BrandVars 注入），
   不出现硬编码 rgba(37,99,235,*) —— 否则白标切换主色时描边不跟随。
   ============================================================ */

.nfx-embedded-faqs {
    --nf-surface-1: var(--nfx-surface-1, #f8fafc);
    --nf-surface-2: var(--nfx-surface-2, #fff);
    --nf-surface-3: var(--nfx-surface-3, #f1f5f9);
    --nf-border: var(--nfx-border, #e2e8f0);
    --nf-text: var(--nfx-text, #1e293b);
    --nf-muted: var(--nfx-muted, #475569);
    --nf-on-brand: var(--nfx-on-brand, #fff);

    margin: 24px 0;
    padding: 20px;
    background: var(--nf-surface-1);
    border: 1px solid var(--nf-border);
    border-radius: 12px;
}
.nfx-embedded-faqs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nfx-embedded-faq-item {
    background: var(--nf-surface-2);
    border: 1px solid var(--nf-border);
    border-radius: 6px;
    overflow: hidden;
}
.nfx-embedded-faq-details {
    margin: 0;
}
.nfx-embedded-faq-details > summary {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--nf-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}
.nfx-embedded-faq-details > summary::-webkit-details-marker {
    display: none;
}
.nfx-embedded-faq-details > summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--nfx-brand-color, #2563EB);
    color: var(--nf-on-brand);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.nfx-embedded-faq-details[open] > summary::before {
    content: '?';
    background: var(--nfx-brand-secondary, #1D4ED8);
}
.nfx-embedded-faq-details > summary:hover {
    background: var(--nf-surface-3);
}
.nfx-embedded-faq-a {
    padding: 0 16px 12px 44px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nf-muted);
}
.nfx-embedded-faq-a p {
    margin: 0 0 8px;
}
.nfx-embedded-faq-a p:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .nfx-embedded-faqs {
        padding: 12px;
        margin: 16px 0;
    }
    .nfx-embedded-faq-details > summary {
        padding: 10px 12px;
        font-size: 13px;
    }
    .nfx-embedded-faq-a {
        padding: 0 12px 10px 36px;
        font-size: 13px;
    }
}

/* ===== 主 FAQ 组件（短代码渲染） ===== */
.nexoflow-faq {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    /* 白标派生量：focus 光晕 / 品牌渐变，全部引用 --nfx-brand-color */
    --nfx-grad: linear-gradient(135deg, var(--nfx-brand-color, #2563EB) 0%, var(--nfx-brand-secondary, #1D4ED8) 100%);
    --nfx-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15); /* 旧浏览器回退 */
    --nfx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--nfx-brand-color, #2563EB) 15%, transparent);
    --nfx-open-border: color-mix(in srgb, var(--nfx-brand-color, #2563EB) 35%, var(--nfx-border, #e2e8f0));
    --nfx-soft-fill: color-mix(in srgb, var(--nfx-brand-color, #2563EB) 10%, transparent);
}

/* ---- 搜索框（与 KMS 同形态：白色方圆角 + 内嵌图标 + 品牌 focus；2026-10-18 去胶囊） ---- */
.nexoflow-faq-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 600px;
    margin-bottom: 16px;
    padding: 0 16px;
    height: 44px;
    background: #fff;
    border: 1px solid var(--nfx-border, #e2e8f0);
    border-radius: var(--nfx-radius-sm, 6px);
    box-shadow: 0 1px 2px rgba(14, 35, 80, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.nexoflow-faq-search:focus-within {
    border-color: var(--nfx-brand-color, #2563EB);
    box-shadow: var(--nfx-focus-ring);
}
.nexoflow-faq-search > svg {
    flex-shrink: 0;
    color: var(--nfx-text-muted, #475569);
}
.nexoflow-faq-search-input {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--nfx-text, #1e293b);
    box-shadow: none;
}
.nexoflow-faq-search-input:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

/* ---- 分类筛选按钮（方圆角；2026-10-18 去胶囊，并按四端规范 §1.1 紧凑档补足 32px 触摸目标） ---- */
.nexoflow-faq-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.nexoflow-faq-cat-btn {
    padding: 9px 16px;
    border: 1px solid var(--nfx-border, #e2e8f0);
    border-radius: var(--nfx-radius-sm, 6px);
    background: transparent;
    color: var(--nfx-text, #1e293b);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.nexoflow-faq-cat-btn:hover {
    border-color: var(--nfx-brand-color, #2563EB);
}
.nexoflow-faq-cat-btn.active {
    background: var(--nfx-grad);
    color: var(--nfx-on-brand, #fff);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(14, 35, 80, 0.08);
}

/* ---- QA 卡片（qa-card 形态：顶部渐变线 + hover 抬升） ---- */
.nexoflow-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nexoflow-faq-item {
    position: relative;
    border: 1px solid var(--nfx-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 0;
    overflow: hidden;
    background: var(--nfx-surface-2, #fff);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.nexoflow-faq-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--nfx-grad);
    opacity: 0;
    transition: opacity 0.15s;
}
.nexoflow-faq-item:hover {
    border-color: var(--nfx-border-hover, #cbd5e1);
    box-shadow: 0 4px 14px rgba(14, 35, 80, 0.06);
    transform: translateY(-1px);
}
.nexoflow-faq-item:hover::before,
.nexoflow-faq-item.open::before {
    opacity: 1;
}
.nexoflow-faq-item.open {
    border-color: var(--nfx-open-border);
}

/* 单条 FAQ 静态展示：答案始终可见（不走手风琴收起） */
.nexoflow-faq-item.is-single::before {
    opacity: 1;
}
.nexoflow-faq-item.is-single .nexoflow-faq-answer {
    max-height: none;
    visibility: visible;
    padding: 0 18px 18px;
}
.nexoflow-faq-item.is-single:hover {
    transform: none;
    box-shadow: none;
}

/* ---- 问题行（按钮式 + chevron 旋转） ---- */
.nexoflow-faq-question {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 18px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--nfx-text, #1e293b);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.nexoflow-faq-question:hover {
    background: var(--nfx-surface-3, #f1f5f9);
}
.nexoflow-faq-question:focus-visible {
    outline: none;
    box-shadow: var(--nfx-focus-ring);
    border-radius: 12px;
}
.nexoflow-faq-q-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--nfx-soft-fill);
    color: var(--nfx-brand-color, #2563EB);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.nexoflow-faq-q-text {
    flex: 1;
}
.nexoflow-faq-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--nfx-text-muted, #475569);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.nexoflow-faq-toggle svg {
    display: block;
}
.nexoflow-faq-item.open .nexoflow-faq-question .nexoflow-faq-toggle {
    transform: rotate(180deg);
    color: var(--nfx-brand-color, #2563EB);
}

/* ---- 答案（max-height + visibility 过渡） ---- */
.nexoflow-faq-answer {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    padding: 0 18px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--nfx-muted, #475569);
    transition: max-height 0.24s ease-out, visibility 0.24s ease-out;
}
.nexoflow-faq-item.open .nexoflow-faq-answer {
    visibility: visible;
    padding-bottom: 18px;
}
.nexoflow-faq-answer p {
    margin: 0 0 8px;
}
.nexoflow-faq-answer p:last-child {
    margin-bottom: 0;
}

/* ---- 反馈条 ---- */
.nexoflow-faq-feedback {
    margin-top: 0;
    padding: 12px 18px;
    border-top: 1px solid var(--nfx-border, #e2e8f0);
    font-size: 13px;
}

.nexoflow-faq-empty {
    color: var(--nfx-muted, #475569);
    font-size: 14px;
    padding: 12px 0;
}

/* ---- 动效守护 ---- */
@media (prefers-reduced-motion: reduce) {
    .nexoflow-faq-item,
    .nexoflow-faq-answer,
    .nexoflow-faq-toggle,
    .nexoflow-faq-cat-btn,
    .nexoflow-faq-search {
        transition: none;
    }
    .nexoflow-faq-item:hover {
        transform: none;
    }
}

/* ---- 内容反馈按钮（feedback-component.js：.msg-feedback/.fb-btn/.fb-reasons/.fb-thanks）----
   2026-10-18 UI 审查：此前 FAQ 前台无任何 .fb-btn 样式，Yes/No/原因按钮回落浏览器
   原生形态（≈19px 高、无圆角、无品牌色），与插件设计系统完全割裂。此处按自有 token 补齐，
   44px 触摸目标 + 6px 圆角（四端统一口径），focus 环跟随品牌色。 */
.nexoflow-faq .msg-feedback,
.nfx-embedded-faqs .msg-feedback {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--nf-border);
}
.nexoflow-faq .fb-label,
.nfx-embedded-faqs .fb-label {
    font-size: 13px;
    color: var(--nf-muted);
}
.nexoflow-faq .fb-btn,
.nfx-embedded-faqs .fb-btn {
    min-height: 44px;
    padding: 0 16px;
    background: var(--nf-surface-2);
    border: 1px solid var(--nf-border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--nf-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nexoflow-faq .fb-btn:hover,
.nfx-embedded-faqs .fb-btn:hover {
    border-color: var(--nfx-brand-color, #2563EB);
    color: var(--nfx-brand-color, #2563EB);
    background: var(--nf-surface-3);
}
.nexoflow-faq .fb-btn:focus-visible,
.nfx-embedded-faqs .fb-btn:focus-visible {
    outline: none;
    box-shadow: var(--nfx-focus-ring);
}
.nexoflow-faq .fb-reasons,
.nfx-embedded-faqs .fb-reasons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.nexoflow-faq .fb-thanks,
.nfx-embedded-faqs .fb-thanks {
    font-size: 13px;
    font-weight: 500;
    color: var(--nfx-brand-color, #2563EB);
}
.nexoflow-related-link {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--nfx-surface-2, #e2e8f0);
}
.nexoflow-related-link a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--nfx-brand-color, #2563EB);
    text-decoration: none;
}
.nexoflow-related-link a:hover {
    text-decoration: underline;
}