/* Ask Puffy widget — 2314agency.ir AI chat assistant. Namespaced ap-* to avoid collisions. */
:root{--ap-red:#EF4130;--ap-red-dark:#c93224;--ap-cream:#EAD1AD;--ap-cream-soft:#F6EAD2;--ap-ink:#414042;--ap-ink-soft:#77767b;--ap-line:#ece7e0;--ap-shadow:0 18px 50px rgba(65,64,66,.22)}

/* ---------- launcher ---------- */
#ap-launcher{position:fixed;top:55vh;inset-inline-end:12px;z-index:9990;width:64px;height:64px;border-radius:50%;border:3px solid var(--ap-red);background:#141414;cursor:pointer;overflow:hidden;padding:0;box-shadow:0 8px 24px rgba(239,65,48,.35);transition:transform .28s ease,opacity .28s ease;will-change:transform}
#ap-launcher:hover{transform:scale(1.07)}
#ap-launcher .ap-av{width:100%;height:100%;display:block;border-radius:50%;overflow:hidden}
#ap-launcher img,#ap-launcher video{width:100%;height:100%;object-fit:cover;display:block}
#ap-launcher .ap-dot{position:absolute;top:2px;inset-inline-end:4px;width:14px;height:14px;border-radius:50%;background:var(--ap-red);border:2.5px solid #fff;display:none}
#ap-launcher.ap-unseen .ap-dot{display:block}
#ap-launcher.ap-hide{transform:translateX(calc(100% + 20px))!important;opacity:0;pointer-events:none}
[dir=rtl] #ap-launcher.ap-hide{transform:translateX(calc(-100% - 20px))!important}

/* ---------- backdrop (blur, no click-to-close per user) ---------- */
#ap-backdrop{position:fixed;inset:0;z-index:9990;background:rgba(20,20,20,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .25s ease}
#ap-backdrop.ap-open{opacity:1;pointer-events:auto}

/* ---------- panel: centered modal card ---------- */
#ap-panel{position:fixed;z-index:9991;left:50%;top:50%;width:min(430px,calc(100vw - 40px));height:min(640px,calc(100dvh - 80px));min-height:420px;background:#fff;border-radius:24px;border:2px solid var(--ap-line);box-shadow:var(--ap-shadow);display:flex;flex-direction:column;overflow:hidden;transform:translate(-50%,-50%) scale(.96);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
#ap-panel.ap-open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.ap-head{display:flex;align-items:center;gap:10px;background:var(--ap-cream-soft);border-bottom:2px solid var(--ap-red);padding:10px 12px;flex:0 0 auto}
.ap-head .ap-av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:2px solid var(--ap-red);background:#141414}
.ap-head img,.ap-head video{width:100%;height:100%;object-fit:cover;display:block}
.ap-title{font-weight:800;font-size:16px;color:var(--ap-ink);line-height:1.2}
.ap-title small{display:block;font-weight:600;font-size:11px;color:var(--ap-ink-soft)}
.ap-close{border:none;background:none;font-size:20px;color:var(--ap-ink-soft);cursor:pointer;line-height:1;padding:4px 6px;margin-inline-start:auto}
.ap-close:hover{color:var(--ap-red)}

/* ---------- card context header (per-card chat) ---------- */
#ap-cardinfo{display:none;align-items:center;gap:10px;padding:10px 12px;background:#141414;border-bottom:2px solid var(--ap-red);flex:0 0 auto}
#ap-cardinfo.ap-show{display:flex}
#ap-cardinfo img{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 auto;border:2px solid var(--ap-red)}
#ap-cardinfo .ap-ci-txt{min-width:0}
#ap-cardinfo .ap-ci-txt b{display:block;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ap-cardinfo .ap-ci-txt span{display:block;color:var(--ap-cream);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- per-card Ask Puffy buttons: green (user 2026-10-08) ---------- */
button[data-ask-puffy]{border-color:#00C853!important;color:#009624!important}
button[data-ask-puffy]:hover{background:rgba(0,200,83,.1)!important}

#ap-msgs{flex:1 1 auto;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;background:#fff}
.ap-msg{max-width:85%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.55;word-wrap:break-word}
.ap-msg.ap-user{align-self:flex-end;background:var(--ap-red);color:#fff;border-bottom-right-radius:6px}
[dir=rtl] .ap-msg.ap-user{align-self:flex-start;border-bottom-right-radius:18px;border-bottom-left-radius:6px}
.ap-msg.ap-puffy{align-self:flex-start;background:var(--ap-cream-soft);color:var(--ap-ink);border-bottom-left-radius:6px;display:flex;gap:8px}
[dir=rtl] .ap-msg.ap-puffy{align-self:flex-end;border-bottom-left-radius:18px;border-bottom-right-radius:6px}
.ap-msg.ap-puffy .ap-mav{width:28px;height:28px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:#141414}
.ap-msg.ap-puffy .ap-mav img,.ap-msg.ap-puffy .ap-mav video{width:100%;height:100%;object-fit:cover;display:block}
.ap-msg a{color:var(--ap-red-dark);font-weight:700}
.ap-msg.ap-typing{display:flex;gap:5px;align-items:center;padding:12px 16px}
.ap-msg.ap-typing i{width:7px;height:7px;border-radius:50%;background:var(--ap-ink-soft);animation:ap-blink 1s infinite}
.ap-msg.ap-typing i:nth-child(2){animation-delay:.18s}.ap-msg.ap-typing i:nth-child(3){animation-delay:.36s}
@keyframes ap-blink{0%,100%{opacity:.3}50%{opacity:1}}

#ap-chips-wrap{display:flex;align-items:center;border-top:1px solid var(--ap-line);background:#fff;flex:0 0 auto}
#ap-chips{display:flex;gap:8px;overflow-x:auto;padding:10px 12px;scrollbar-width:none;background:#fff;flex:1 1 auto;min-width:0}
#ap-chip-l,#ap-chip-r{display:none;flex:0 0 auto;border:none;background:#fff;color:var(--ap-red);font-size:22px;font-weight:700;cursor:pointer;padding:6px 10px;line-height:1}
#ap-chip-l:hover,#ap-chip-r:hover{background:rgba(239,65,48,.08)}
@media (hover:hover) and (pointer:fine){#ap-chip-l,#ap-chip-r{display:block}}
#ap-chips::-webkit-scrollbar{display:none}
.ap-chip{flex:0 0 auto;white-space:nowrap;border:1.5px solid var(--ap-red);background:#fff;color:var(--ap-red-dark);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s}
.ap-chip:hover{background:rgba(239,65,48,.08)}
.ap-chip.ap-cta{background:var(--ap-red);color:#fff}

.ap-input{display:flex;gap:8px;padding:10px 12px 14px;border-top:1px solid var(--ap-line);flex:0 0 auto;background:#fff}
.ap-input input{flex:1;border:2px solid var(--ap-line);border-radius:999px;padding:10px 16px;font-size:14px;outline:none;color:var(--ap-ink);font-family:inherit}
.ap-input input:focus{border-color:var(--ap-red)}
.ap-input button{border:none;background:var(--ap-red);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:17px;flex:0 0 auto;transition:background .15s}
.ap-input button:hover{background:var(--ap-red-dark)}
.ap-input button:disabled{opacity:.4;cursor:default}

@media(max-width:640px){
  #ap-launcher{width:52px;height:52px;top:auto;bottom:88px}
  /* top-anchored + compact: stays visible when keyboard opens (user 2026-10-08) */
  #ap-panel{top:12px;transform:translateX(-50%) scale(.96);width:calc(100vw - 24px);height:min(520px,calc(100dvh - 140px))}
  #ap-panel.ap-open{transform:translateX(-50%) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  #ap-launcher,#ap-panel,.ap-msg.ap-typing i{transition:none!important;animation:none!important}
}