/* ============================================================
   Syqoro — AdiAnsh Media's playful on-site chatbot
   Deliberately its OWN look: a candy violet -> pink identity that
   pops against the site's dark/orange theme and grabs attention,
   with a little mascot whose eyes blink and dance.
   Reuses the theme's dark surface tokens where it helps.
   ============================================================ */

.achat, .achat-fab{
	--syq-a:#8B5CF6;   /* violet  */
	--syq-b:#EC4899;   /* pink    */
	--syq-c:#22D3EE;   /* cyan pop */
	--syq-ink:#1A1130; /* mascot eyes/mouth */
}

/* =========================================================
   The mascot (reused on the launcher and in the header)
   ========================================================= */
.syq{
	position:relative;display:inline-block;flex:none;
	width:30px;height:30px;border-radius:52% 52% 48% 48%;
	background:linear-gradient(145deg,var(--syq-a),var(--syq-b));
	box-shadow:inset 0 -3px 6px rgba(0,0,0,.18),0 4px 12px rgba(139,92,246,.45);
}
.syq--bare{background:none;box-shadow:none}            /* face sitting on a coloured pill */
.syq--lg{width:34px;height:34px}
.syq__eye{
	position:absolute;top:28%;width:27%;height:31%;
	background:#fff;border-radius:50%;overflow:hidden;
	animation:syqBlink 4.4s infinite;
	box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.syq__eye--l{left:16%}
.syq__eye--r{right:16%;animation-delay:.2s}
.syq__pupil{
	position:absolute;top:26%;left:27%;width:48%;height:48%;
	background:var(--syq-ink);border-radius:50%;
	animation:syqDance 3.4s ease-in-out infinite;
}
.syq__eye--r .syq__pupil{animation-delay:.25s}
.syq__pupil::after{ /* glint */
	content:"";position:absolute;top:12%;right:14%;width:34%;height:34%;
	background:rgba(255,255,255,.9);border-radius:50%;
}
.syq__mouth{
	position:absolute;bottom:17%;left:50%;transform:translateX(-50%);
	width:36%;height:17%;border:2.2px solid var(--syq-ink);border-top:0;
	border-radius:0 0 40px 40px;
}
@keyframes syqDance{
	0%,100%{transform:translate(0,0)}
	18%{transform:translate(32%,-10%)}
	36%{transform:translate(-30%,8%)}
	54%{transform:translate(18%,22%)}
	72%{transform:translate(-14%,-18%)}
	88%{transform:translate(8%,10%)}
}
@keyframes syqBlink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}

/* =========================================================
   Launcher (joins the floating-button stack)
   ========================================================= */
.achat-fab{
	position:relative;display:inline-flex;align-items:center;gap:0;
	height:54px;padding:0 15px;border:0;cursor:pointer;
	border-radius:999px;
	background:linear-gradient(135deg,var(--syq-a),var(--syq-b));
	color:#fff;font-size:.9rem;font-weight:700;line-height:0;font-family:inherit;
	box-shadow:0 12px 30px -8px rgba(139,92,246,.7),0 2px 10px rgba(236,72,153,.45);
	animation:syqBob 3.2s ease-in-out infinite;
	transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.achat-fab .syq{animation:none}  /* the pill bobs; keep the face steady on it */
.achat-fab__t{
	max-width:0;overflow:hidden;white-space:nowrap;opacity:0;line-height:1.2;
	transition:max-width .34s cubic-bezier(.2,.7,.3,1),opacity .26s,margin-left .34s;
}
.achat-fab:hover{transform:translateY(-4px) scale(1.04);animation-play-state:paused;
	box-shadow:0 20px 44px -8px rgba(139,92,246,.85),0 4px 14px rgba(236,72,153,.5)}
.achat-fab:hover .achat-fab__t,
.achat-fab:focus-visible .achat-fab__t{max-width:180px;opacity:1;margin-left:11px}
.achat-fab:focus-visible{outline:3px solid var(--syq-c);outline-offset:3px}
.achat-fab__ping{
	position:absolute;top:-2px;right:-2px;width:15px;height:15px;border-radius:50%;
	background:var(--syq-c);border:2px solid #fff;color:var(--syq-ink);
	font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1;
}
.achat-fab__ping::after{content:"";position:absolute;inset:-3px;border-radius:50%;
	box-shadow:0 0 0 0 rgba(34,211,238,.7);animation:syqPing 2.4s ease-out infinite}
.achat-fab.is-open{display:none}
@keyframes syqBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes syqPing{0%{box-shadow:0 0 0 0 rgba(34,211,238,.6)}70%{box-shadow:0 0 0 13px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}

/* =========================================================
   Panel
   ========================================================= */
.achat{
	position:fixed;z-index:130;
	right:clamp(16px,2.4vw,26px);bottom:clamp(16px,2.4vw,26px);
	width:min(384px,calc(100vw - 32px));
	height:min(620px,calc(100vh - 110px));
	display:flex;flex-direction:column;
	background:var(--bg2,#0E0E10);
	border:1px solid rgba(139,92,246,.35);
	border-radius:24px;overflow:hidden;
	box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(236,72,153,.12),0 8px 30px rgba(139,92,246,.25);
	opacity:0;visibility:hidden;transform:translateY(24px) scale(.97);
	transform-origin:bottom right;pointer-events:none;
	transition:opacity .28s ease,transform .36s cubic-bezier(.2,.8,.3,1.2),visibility .28s;
}
.achat.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}

/* header */
.achat__head{
	display:flex;align-items:center;gap:12px;padding:15px 15px 15px 17px;
	background:linear-gradient(120deg,var(--syq-a),var(--syq-b));
	color:#fff;position:relative;overflow:hidden;
}
.achat__head::after{ /* soft bubbles */
	content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(circle at 85% -20%,rgba(255,255,255,.22),transparent 45%),
	          radial-gradient(circle at 10% 130%,rgba(34,211,238,.25),transparent 40%);
}
.achat__avatar{position:relative;z-index:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.achat__id{display:flex;flex-direction:column;gap:2px;line-height:1;flex:1;min-width:0;position:relative;z-index:1}
.achat__id b{font-size:1rem;font-weight:800;letter-spacing:.2px}
.achat__id i{font-style:normal;font-size:.76rem;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px}
.achat__status{width:8px;height:8px;border-radius:50%;background:#2EF2A0;box-shadow:0 0 0 0 rgba(46,242,160,.7);animation:syqLive 2.4s ease-out infinite}
@keyframes syqLive{0%{box-shadow:0 0 0 0 rgba(46,242,160,.6)}70%{box-shadow:0 0 0 7px rgba(46,242,160,0)}100%{box-shadow:0 0 0 0 rgba(46,242,160,0)}}
.achat__close{
	position:relative;z-index:1;flex:none;width:34px;height:34px;border:0;cursor:pointer;border-radius:50%;
	background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;
	transition:background .2s,transform .2s;
}
.achat__close .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.achat__close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}

/* message log */
.achat__log{
	flex:1;overflow-y:auto;padding:20px 16px 8px;
	display:flex;flex-direction:column;gap:12px;
	background:
		radial-gradient(circle at 12% 0%,rgba(139,92,246,.07),transparent 42%),
		radial-gradient(circle at 92% 8%,rgba(236,72,153,.06),transparent 40%);
	scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.4) transparent;
}
.achat__log::-webkit-scrollbar{width:8px}
.achat__log::-webkit-scrollbar-thumb{background:rgba(139,92,246,.35);border-radius:8px;border:2px solid transparent;background-clip:padding-box}

.achat__msg{max-width:84%;display:flex;flex-direction:column;animation:syqIn .34s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes syqIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.achat__bubble{padding:11px 14px;border-radius:18px;font-size:.9rem;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.achat__bubble a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.achat__bubble b{font-weight:700}
.achat__bubble p{margin:0 0 8px}
.achat__bubble p:last-child{margin:0}
.achat__bubble ul{margin:6px 0 0;padding-left:18px}
.achat__bubble li{margin:3px 0}

/* bot */
.achat__msg--bot{align-self:flex-start}
.achat__msg--bot .achat__bubble{
	background:var(--surface,#121215);
	border:1px solid rgba(139,92,246,.22);
	color:var(--tx,#F4F2EF);border-bottom-left-radius:6px;
}
/* user — the playful gradient */
.achat__msg--me{align-self:flex-end;align-items:flex-end}
.achat__msg--me .achat__bubble{
	background:linear-gradient(135deg,var(--syq-a),var(--syq-b));
	color:#fff;border-bottom-right-radius:6px;
	box-shadow:0 6px 16px -6px rgba(139,92,246,.6);
}

/* typing dots */
.achat__typing{align-self:flex-start}
.achat__typing .achat__bubble{display:inline-flex;gap:5px;padding:14px 16px;background:var(--surface,#121215);border:1px solid rgba(139,92,246,.22);border-bottom-left-radius:6px}
.achat__typing span{width:7px;height:7px;border-radius:50%;background:var(--syq-a);animation:syqDot 1.3s infinite ease-in-out}
.achat__typing span:nth-child(2){background:var(--syq-b);animation-delay:.18s}
.achat__typing span:nth-child(3){background:var(--syq-c);animation-delay:.36s}
@keyframes syqDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-6px);opacity:1}}

/* quick-reply chips */
.achat__quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.achat__quick.has-items{max-height:300px;padding:4px 16px 12px}
.achat__chip{
	border:1.5px solid rgba(139,92,246,.4);
	background:rgba(139,92,246,.08);color:var(--tx,#F4F2EF);
	padding:8px 13px;border-radius:999px;font-size:.82rem;font-weight:500;
	cursor:pointer;font-family:inherit;line-height:1.3;text-align:left;
	transition:background .2s,border-color .2s,transform .15s,color .2s;
	animation:syqIn .3s both;
}
.achat__chip:hover{background:rgba(139,92,246,.2);border-color:var(--syq-a);transform:translateY(-2px) rotate(-1deg)}
.achat__chip:focus-visible{outline:2px solid var(--syq-c);outline-offset:2px}
.achat__chip--cta{background:linear-gradient(135deg,var(--syq-a),var(--syq-b));border-color:transparent;color:#fff;font-weight:700}
.achat__chip--cta:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--syq-a),var(--syq-b));transform:translateY(-2px) scale(1.03)}
.achat__chip--wa{background:#25D366;border-color:transparent;color:#07261a;font-weight:700}
.achat__chip--wa:hover{filter:brightness(1.05);background:#25D366}

/* input bar */
.achat__input{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;border-top:1px solid rgba(139,92,246,.2);background:var(--surface,#121215)}
.achat__input input[type=text]{
	flex:1;min-width:0;height:44px;padding:0 15px;border-radius:999px;
	border:1.5px solid rgba(139,92,246,.3);
	background:var(--bg,#080809);color:var(--tx,#F4F2EF);
	font-size:.9rem;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;
}
.achat__input input[type=text]::placeholder{color:var(--tx45,rgba(244,242,239,.45))}
.achat__input input[type=text]:focus{border-color:var(--syq-a);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.achat__send{
	flex:none;width:44px;height:44px;border:0;cursor:pointer;border-radius:50%;display:grid;place-items:center;
	background:linear-gradient(135deg,var(--syq-a),var(--syq-b));
	box-shadow:0 6px 16px -5px rgba(139,92,246,.75);transition:transform .2s,filter .2s;
}
.achat__send .ico{width:20px;height:20px;color:#fff;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.achat__send:hover{transform:translateY(-1px) scale(1.08) rotate(6deg);filter:brightness(1.06)}
.achat__send:focus-visible{outline:2px solid #fff;outline-offset:2px}
.achat__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.achat__legal{margin:0;padding:0 16px 12px;text-align:center;font-size:.68rem;color:var(--tx25,rgba(244,242,239,.3));background:var(--surface,#121215)}

/* mobile */
@media(max-width:520px){
	.achat{right:0;left:0;bottom:0;width:100%;height:88dvh;border-radius:22px 22px 0 0}
	.achat-fab{height:52px;padding:0 13px}
	.achat-fab:hover .achat-fab__t,.achat-fab:focus-visible .achat-fab__t{max-width:0;opacity:0;margin-left:0}
}

@media(prefers-reduced-motion:reduce){
	.achat,.achat__msg,.achat__chip,.achat-fab,.achat__send,
	.syq__eye,.syq__pupil,.achat-fab__ping::after,.achat__status,.achat__typing span{animation:none;transition:none}
}