.hfp{position:fixed;right:20px;bottom:20px;z-index:99997;width:320px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #dfe7f1;border-radius:14px;box-shadow:0 12px 32px rgba(16,24,40,.18);padding:14px 14px 12px;font-family:inherit;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.hfp.is-in{opacity:1;transform:translateY(0);pointer-events:auto}
.hfp.is-out{opacity:0;transform:translateY(14px);pointer-events:none}
.hfp__x{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;background:transparent;color:#9aa1ab;font-size:16px;line-height:1;cursor:pointer;border-radius:50%}
.hfp__x:hover{background:#f1f4f9;color:#5f6773}
.hfp__ttl{margin:0 22px 2px 0;font-size:.88rem;font-weight:800;color:#1f2a37;line-height:1.45}
.hfp__sub{margin:0 0 10px;font-size:.68rem;color:#8b929c}
.hfp__faces{display:flex;align-items:flex-end;justify-content:space-between;gap:4px}
.hfp__face{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 5px;border:1px solid #e4e9f1;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.hfp__face svg{width:26px;height:26px;stroke:#7a828d;fill:none;stroke-width:1.6;stroke-linecap:round}
.hfp__face .hfp-eye{fill:#7a828d;stroke:none}
.hfp__face span{font-size:.56rem;font-weight:700;color:#6b727d;line-height:1.2;text-align:center;white-space:nowrap}
.hfp__face:hover{border-color:#2a78d6;background:#f5f9ff;transform:translateY(-1px)}
.hfp__face:hover svg{stroke:#2a78d6}
.hfp__face:hover .hfp-eye{fill:#2a78d6}
.hfp__ends{display:flex;justify-content:space-between;margin:6px 2px 0;font-size:.6rem;color:#9aa1ab}
.hfp__thx{margin:0 0 8px;font-size:.9rem;font-weight:800;color:#10b981}
.hfp__ta{width:100%;box-sizing:border-box;min-height:62px;padding:8px 9px;border:1px solid #dfe7f1;border-radius:9px;font-size:.76rem;color:#1f2a37;resize:vertical;font-family:inherit}
.hfp__ta:focus{outline:0;border-color:#2a78d6}
.hfp__btns{display:flex;gap:8px;margin-top:8px}
.hfp__send{flex:1 1 auto;padding:8px 10px;border:0;border-radius:9px;background:#2a78d6;color:#fff;font-size:.76rem;font-weight:800;cursor:pointer}
.hfp__send:hover{background:#1f66bb}
.hfp__close{flex:0 0 auto;padding:8px 12px;border:1px solid #dfe7f1;border-radius:9px;background:#fff;color:#6b727d;font-size:.76rem;font-weight:700;cursor:pointer}
.hfp__close:hover{background:#f5f7fb}
@media (max-width:640px){
.hfp{right:10px;left:10px;width:auto;bottom:14px;padding:12px 12px 10px;border-radius:13px}
.hfp__ttl{font-size:.84rem}
.hfp__face svg{width:24px;height:24px}
.hfp__face span{font-size:.52rem}
}
@media (prefers-reduced-motion:reduce){
.hfp{transition:opacity .01s linear}
.hfp.is-in{transform:none}
.hfp.is-out{transform:none}
}