/* faqcard: visitor FAQ card styles (shared by chat.html and config previews) */
.fqx{--t:#5b5ef4;--tl:color-mix(in srgb,var(--t) 12%,#fff);--tm:color-mix(in srgb,var(--t) 28%,#fff);font-size:14.5px;color:#1b1f3b;margin:4px 0 12px}
.fqx *{box-sizing:border-box}
.fqx .bx{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(27,31,59,.06)}
.fqx .gt{line-height:1.65;white-space:pre-wrap;word-break:break-word}
.fqx .gt em{font-style:normal;font-weight:600;color:var(--t)}
.fqx button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;text-align:left}
.fqx button[disabled]{opacity:.55}
/* 1 list */
.fqx.s-list .bx{padding:14px 12px 12px}.fqx.s-list .gt{margin:0 2px 10px}
.fqx.s-list .it{display:flex;align-items:center;gap:6px;width:100%;border-radius:12px;background:var(--tl);color:var(--t);padding:13px 12px;margin-top:8px}
.fqx.s-list .it .n{font-weight:600}.fqx.s-list .it .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2a2f55}
.fqx.s-list .it .ar{width:0;height:0;border-left:8px solid var(--t);border-top:6px solid transparent;border-bottom:6px solid transparent}
/* avatar + bubble (tabs / grid / chips) */
.fqx .av{display:block;width:64px;height:64px;border-radius:50%;margin:2px auto 12px;object-fit:cover;background:linear-gradient(135deg,var(--t),color-mix(in srgb,var(--t) 55%,#19c2e0));box-shadow:0 4px 12px color-mix(in srgb,var(--t) 30%,transparent)}
.fqx .bub{padding:13px 14px;margin-bottom:12px}
.fqx .nt{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:12px;width:100%}
.fqx .nt .lb{flex:none;font-weight:800;font-style:italic;color:var(--t);font-size:13px;line-height:1.15;padding-right:10px;border-right:1px solid #eceff6;text-align:center}
.fqx .nt .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4e5571}
.fqx .nt .cv{flex:none;width:8px;height:8px;border-top:2px solid #8a90a8;border-right:2px solid #8a90a8;transform:rotate(45deg)}
/* 2 tabs */
.fqx .row2{display:flex;gap:10px;align-items:stretch}
.fqx .tc{flex:1;min-width:0;padding:10px 12px 8px;background:linear-gradient(180deg,var(--tm),#fff 55%)}
.fqx .tabs{display:flex;gap:16px;border-bottom:1px solid color-mix(in srgb,var(--t) 20%,#eee);overflow-x:auto;scrollbar-width:none}
.fqx .tabs button{padding:6px 0 8px;font-weight:600;color:color-mix(in srgb,var(--t) 70%,#333);white-space:nowrap;position:relative}
.fqx .tabs button.on{color:#1b1f3b}.fqx .tabs button.on:after{content:"";position:absolute;left:10%;right:10%;bottom:-1px;height:3px;border-radius:3px;background:var(--t)}
.fqx .qi{display:flex;align-items:center;gap:8px;width:100%;padding:9px 0;color:#2f5fd0}
.fqx .qi i{flex:none;font-style:normal;font-size:10px;font-weight:700;color:#fff;background:var(--t);border-radius:4px 4px 4px 0;padding:1px 3px}
.fqx .qi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fqx .more{display:block;margin:2px auto 0;color:var(--t);font-size:13px;padding:4px 10px}
.fqx .tl{flex:none;width:31%;display:flex;flex-direction:column;gap:10px}
.fqx .tile{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;padding:10px 6px;text-align:center;font-weight:600;color:color-mix(in srgb,var(--t) 70%,#222);font-size:13px;line-height:1.3}
.fqx .ic{width:40px;height:40px;object-fit:contain;display:block}
.fqx .ic svg{width:40px;height:40px;display:block}
/* 3 grid */
.fqx .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 8px;margin-bottom:12px}
.fqx .grid .tile{padding:6px 2px;font-weight:500;font-size:12px;color:#4e5571}
.fqx .grid .ic,.fqx .grid .ic svg{width:34px;height:34px}
.fqx .ql{padding:4px 14px}.fqx .ql .qi{border-bottom:1px solid #f2f4f9}.fqx .ql .qi:last-child{border-bottom:0}
/* 4 chips */
.fqx .chips{display:flex;flex-wrap:wrap;gap:8px}
.fqx .chip{border:1px solid var(--tm)!important;background:#fff!important;color:var(--t)!important;border-radius:999px;padding:8px 14px;font-size:13.5px}
.fqx .chip:active{background:var(--tl)!important}
/* related chips under an answer */
.fqrel{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px;max-width:86%}
.fqrel b{width:100%;font-size:12px;color:#8a90a8;font-weight:500}
.fqrel button{font:inherit;font-size:13px;cursor:pointer;border:1px solid #dfe3f6;background:#fff;color:#4f52e6;border-radius:999px;padding:6px 12px}
.fqx .tabs button,.fqx .tabs button.on{background:none!important;border-radius:0!important;box-shadow:none!important}.fqx .tabs button.on{color:#1b1f3b!important}

/* faqlayout: per-site items per row / rows. 0 = original look. Narrow screens cap at 2 columns so text stays readable. */
.fqx{container-type:inline-size}
.fqx .qg{display:grid;gap:8px;margin-top:8px}.fqx .qg.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.fqx .qg.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.fqx .qg.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fqx.s-list .qg .it{margin-top:0;padding:11px 8px;flex-direction:column;align-items:flex-start;gap:2px}.fqx.s-list .qg .it .q{width:100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.fqx.s-list .qg .it .ar{display:none}
.fqx .qg .qi{padding:8px;border-radius:10px;background:var(--tl);align-items:flex-start;border:0!important}.fqx .qg .qi span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;font-size:13px}
.fqx .ql.qgw{padding:10px}.fqx .ql.qgw .qg{margin-top:0}
.fqx .grid.t2{grid-template-columns:repeat(2,1fr)}.fqx .grid.t3{grid-template-columns:repeat(3,1fr)}.fqx .grid.t4{grid-template-columns:repeat(4,1fr)}
.fqx .chips.cc{display:grid}.fqx .chips.c1{grid-template-columns:1fr}.fqx .chips.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.fqx .chips.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.fqx .chips.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fqx .chips.cc .chip{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 6px}
@media (max-width:360px){.fqx .qg.c3,.fqx .qg.c4,.fqx .chips.c3,.fqx .chips.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:300px){.fqx .qg.c3,.fqx .qg.c4,.fqx .chips.c3,.fqx .chips.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}