/* ================= CHATBOT ================= */
.cbtn{position:fixed;z-index:90;right:22px;bottom:22px;width:68px;height:76px;border:0;padding:0;cursor:pointer;background:transparent;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));transition:transform .25s}
.cbtn:hover{transform:translateY(-4px) scale(1.05)}
.cbtn .hx6{position:absolute;inset:0;clip-path:var(--hex);background:linear-gradient(145deg,#3dbb44,#1f7f26);display:grid;place-items:center;color:#fff}
.cbtn svg{width:30px;height:30px}
.cbtn .dot{position:absolute;right:6px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--yellow);border:2px solid #fff;animation:ping 1.2s ease-in-out infinite alternate}
.cbtn .tip{position:absolute;right:78px;top:50%;transform:translateY(-50%);background:#fff;color:#1b1f22;font:600 .84rem Inter,Cairo,sans-serif;padding:9px 14px;border-radius:12px;white-space:nowrap;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);animation:tipin .6s .8s both}
.cbtn .tip::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;border:6px solid transparent;border-left-color:#fff;border-right:0}
.cbtn.open .tip,.cbtn.seen .tip{display:none}
@keyframes tipin{from{opacity:0;transform:translateY(-50%) translateX(10px)}to{opacity:1;transform:translateY(-50%)}}
.cpanel{position:fixed;z-index:95;right:22px;bottom:110px;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 140px));background:var(--card);color:var(--ink);border-radius:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);display:none;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.cpanel.on{display:flex;animation:fade .25s}
.chead{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(120deg,#1c7a24,#2fa836);color:#fff}
.chead .av{width:40px;height:44px;clip-path:var(--hex);background:#fff;display:grid;place-items:center;flex:none}
.chead .av img{width:30px;height:auto}
.chead b{font:700 1rem Sora,Cairo,sans-serif;display:block;line-height:1.2}
.chead small{font-size:.74rem;opacity:.92;display:flex;align-items:center;gap:6px}
.chead small::before{content:"";width:8px;height:8px;border-radius:50%;background:#b6ff9e}
.chead .cx{margin-inline-start:auto;background:rgba(255,255,255,.18);border:0;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.3rem;cursor:pointer;line-height:1}
.cmsgs{flex:1;overflow:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:.92rem;line-height:1.55;animation:fade .3s}
.msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.user{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
[dir=rtl] .msg.bot{border-bottom-left-radius:16px;border-bottom-right-radius:4px}
[dir=rtl] .msg.user{border-bottom-right-radius:16px;border-bottom-left-radius:4px}
.msg .btns{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.msg .btns button,.chips button{font:600 .8rem Inter,Cairo,sans-serif;border:1.5px solid var(--green);color:var(--green-d);background:transparent;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.2s}
.msg .btns button:hover,.chips button:hover{background:var(--green);color:#fff}
.msg .btns button.gold{background:var(--yellow);border-color:var(--yellow);color:#111}
.typing{display:flex;gap:4px;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:ping .6s ease-in-out infinite alternate}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.chips{display:flex;gap:7px;flex-wrap:wrap;padding:10px 14px 4px;background:var(--soft)}
.cform{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--card)}
.cform input{flex:1;margin:0;border-radius:999px;padding:11px 16px;font-size:.92rem}
.cform button{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--green);color:#fff;cursor:pointer;display:grid;place-items:center}
.cform button svg{width:20px;height:20px}
[dir=rtl] .cform button svg{transform:scaleX(-1)}
.cnote{font-size:.68rem;color:var(--mute);text-align:center;padding:0 12px 8px;background:var(--card)}
[dir=rtl] .cbtn{right:auto;left:22px}[dir=rtl] .cpanel{right:auto;left:22px}
[dir=rtl] .cbtn .tip{right:auto;left:78px}[dir=rtl] .cbtn .tip::after{right:auto;left:-6px;border-left:0;border-right-color:#fff;border-right-width:6px;border-right-style:solid}
@media(max-width:700px){
  .cbtn{right:14px;bottom:88px;width:58px;height:66px}
  .cbtn .tip{display:none}
  .cpanel{right:8px;left:8px;width:auto;bottom:162px;height:min(520px,calc(100vh - 190px))}
  [dir=rtl] .cbtn{left:14px;right:auto}[dir=rtl] .cpanel{left:8px;right:8px}
}

/* --- chatbot on the LEFT side --- */
.cbtn{right:auto;left:22px}
.cpanel{right:auto;left:22px}
.cbtn .tip{right:auto;left:78px}
.cbtn .tip::after{right:auto;left:-6px;border:6px solid transparent;border-right-color:#fff;border-left:0}
[dir=rtl] .cbtn{left:auto;right:22px}
[dir=rtl] .cpanel{left:auto;right:22px}
[dir=rtl] .cbtn .tip{left:auto;right:78px}
[dir=rtl] .cbtn .tip::after{left:auto;right:-6px;border:6px solid transparent;border-left-color:#fff;border-right:0}
@keyframes tipin{from{opacity:0;transform:translateY(-50%) translateX(-10px)}to{opacity:1;transform:translateY(-50%)}}
@media(max-width:700px){.cbtn{left:14px;right:auto}.cpanel{left:8px;right:8px}[dir=rtl] .cbtn{right:14px;left:auto}[dir=rtl] .cpanel{left:8px;right:8px}}