/* Cilvé Vé — AI stylist front-end. Self-contained palette, no theme deps. */
:root{
	--cve-ink:#2A3439; --cve-deep:#1F272B; --cve-gold:#B09050; --cve-fog:#F2F3F4;
	--cve-stone:#75797B; --cve-ivory:#FAF6EE; --cve-line:#E3E5E6;
}

/* ── eye button ── */
#cilve-ve-eye{
	position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%);
	width:64px; height:64px; border-radius:50%; border:none; cursor:pointer; z-index:99990;
	background:var(--cve-ivory);
	box-shadow:0 4px 22px rgba(31,39,43,.22), inset 0 0 0 2px #9AA1A5;
	display:flex; align-items:center; justify-content:center; padding:0;
	transition:transform .25s ease, opacity .25s ease;
}
#cilve-ve-eye:hover{transform:translateX(-50%) scale(1.06);}
#cilve-ve-eye:focus-visible{outline:3px solid var(--cve-gold); outline-offset:3px;}
#cilve-ve-eye.cve-away{transform:translateX(-50%) scale(0); opacity:0; pointer-events:none;}
#cilve-ve-eye .cve-iris{
	width:26px; height:26px; border-radius:50%;
	border:2px solid var(--cve-gold); background:var(--cve-ivory);
	display:flex; align-items:center; justify-content:center;
	transition:transform .12s linear;
}
#cilve-ve-eye .cve-pupil{width:10px; height:10px; border-radius:50%; background:var(--cve-deep); transition:transform .12s linear;}
#cilve-ve-eye .cve-lid{position:absolute; inset:2px; border-radius:50%; background:var(--cve-ivory); transform:scaleY(0); pointer-events:none;}
#cilve-ve-eye.cve-blink .cve-lid{animation:cveBlink .28s ease;}
@keyframes cveBlink{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0)}}
#cilve-ve-eye .cve-hint{
	position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
	background:var(--cve-deep); color:#fff; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
	padding:0.32rem 0.75rem; border-radius:999px; white-space:nowrap; opacity:0; transition:opacity .25s ease; pointer-events:none;
	font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
}
#cilve-ve-eye:hover .cve-hint{opacity:1;}

/* ── panel ── */
#cilve-ve-panel{
	position:fixed; top:0; right:0; height:100dvh; width:min(380px,94vw); z-index:99995;
	background:#fff; border-left:1px solid var(--cve-line);
	box-shadow:-12px 0 40px rgba(31,39,43,.14);
	transform:translateX(105%); transition:transform .38s cubic-bezier(.4,0,.2,1);
	display:flex; flex-direction:column;
	font-family:-apple-system,"Segoe UI",Roboto,sans-serif; font-size:16px; line-height:1.5; color:var(--cve-ink);
}
#cilve-ve-panel.cve-open{transform:translateX(0);}
#cilve-ve-panel.cve-noanim, #cilve-ve-panel.cve-noanim *{transition:none !important; animation:none !important;}
#cilve-ve-eye.cve-noanim{transition:none !important;}

/* 1 · head */
.cve-head{background:var(--cve-deep); color:#fff; padding:0.9rem 1.1rem; display:flex; align-items:center; gap:0.8rem; flex:none;}
.cve-eyes{display:flex; gap:6px;}
.cve-eye{width:24px; height:24px; border-radius:50%; background:var(--cve-ivory); border:1.5px solid #9AA1A5; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.cve-eye .cve-pu{width:8px; height:8px; border-radius:50%; background:var(--cve-deep); transition:transform .15s linear;}
.cve-eye .cve-li{position:absolute; inset:0; background:var(--cve-deep); transform:translateY(-100%); transition:transform .2s ease;}
.cve-eyes.cve-blink2 .cve-li{animation:cveLid .3s ease;}
@keyframes cveLid{0%{transform:translateY(-100%)}45%{transform:translateY(-30%)}100%{transform:translateY(-100%)}}
.cve-eyes.cve-think .cve-pu{transform:translate(3px,-5px);}
.cve-eyes.cve-think .cve-li{transform:translateY(-62%);}
.cve-eyes.cve-happy .cve-li{transform:translateY(58%); border-radius:0 0 50% 50%;}
.cve-who b{display:block; font-family:Georgia,"Times New Roman",serif; font-weight:500; font-size:1rem; letter-spacing:0.14em; text-transform:uppercase;}
.cve-who i{font-style:normal; font-size:0.7rem; color:#B9BEC1;}
.cve-mood{margin-left:auto; font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--cve-gold);}
.cve-close{background:none; border:none; color:#B9BEC1; font-size:1.05rem; cursor:pointer; margin-left:0.5rem; line-height:1; padding:0.2rem;}
.cve-close:hover{color:#fff;}
.cve-close:focus-visible{outline:2px solid var(--cve-gold);}

/* 2 · table */
.cve-table{border-bottom:1px solid var(--cve-line); background:var(--cve-fog); padding:0.75rem 1.1rem; flex:none;}
.cve-table .cve-lbl{display:flex; justify-content:space-between; align-items:baseline; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--cve-stone); margin-bottom:0.5rem;}
.cve-table .cve-lbl em{font-style:normal; font-variant-numeric:tabular-nums; letter-spacing:0.08em;}
.cve-table .cve-lbl em.cve-full{color:var(--cve-gold);}
.cve-tray{display:flex; gap:0.55rem; min-height:124px; overflow-x:auto; padding-bottom:0.3rem; scrollbar-width:thin;}
.cve-slot{flex:1; min-width:200px; border:1.5px dashed #CDD1D3; border-radius:4px; display:flex; align-items:center; justify-content:center; text-align:center; color:#B4B9BC; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.5rem;}
.cve-item{flex:none; width:104px; background:#fff; border:1px solid var(--cve-line); border-radius:4px; padding:0.38rem; display:flex; flex-direction:column; gap:0.2rem; position:relative; animation:cvePop .3s ease;}
@keyframes cvePop{from{transform:scale(.85); opacity:0} to{transform:scale(1); opacity:1}}
.cve-item .cve-thumb{height:40px; border-radius:2px; overflow:hidden;}
.cve-item .cve-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.cve-item b{font-size:0.64rem; font-weight:500; line-height:1.2;}
.cve-item i{font-style:normal; font-size:0.6rem; color:var(--cve-stone); font-variant-numeric:tabular-nums;}
.cve-item .cve-rm{position:absolute; top:1px; right:3px; background:none; border:none; color:#B4B9BC; cursor:pointer; font-size:0.72rem; line-height:1; padding:2px;}
.cve-item .cve-rm:hover{color:var(--cve-ink);}
.cve-item .cve-cart{font-size:0.56rem; letter-spacing:0.08em; text-transform:uppercase; background:var(--cve-ink); color:#fff; border:none; border-radius:3px; padding:0.3rem 0.2rem; cursor:pointer; margin-top:auto; font-family:inherit;}
.cve-item .cve-cart:hover{background:var(--cve-deep);}
.cve-item .cve-cart.cve-done{background:var(--cve-gold);}

/* placeholder motifs when a product has no image */
.cve-ph{position:relative; width:100%; height:100%; background:linear-gradient(160deg,var(--cve-ivory) 0%,#F5F0E6 60%,#EFEAE0 100%);}
.cve-ph::before,.cve-ph::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.cve-ph.cve-m-ring::before{width:46%; aspect-ratio:1; border:2px solid #9AA1A5; border-radius:50%;}
.cve-ph.cve-m-ring::after{width:16%; aspect-ratio:1; border:1.5px solid var(--cve-gold); border-radius:50%;}
.cve-ph.cve-m-studs::before{width:12%; aspect-ratio:1; background:#9AA1A5; border-radius:50%; transform:translate(-160%,-50%);}
.cve-ph.cve-m-studs::after{width:12%; aspect-ratio:1; background:#9AA1A5; border-radius:50%; transform:translate(60%,-50%);}
.cve-ph.cve-m-chain::before{width:64%; aspect-ratio:2/1; border:2px solid #9AA1A5; border-top-color:transparent; border-left-color:transparent; border-right-color:transparent; border-radius:0 0 50% 50%/0 0 100% 100%; top:36%;}
.cve-ph.cve-m-chain::after{width:10%; aspect-ratio:1; border:1.5px solid var(--cve-gold); border-radius:50%; top:62%;}

/* 3 · chat */
.cve-chat{flex:1; display:flex; flex-direction:column; min-height:0;}
.cve-msgs{flex:1; overflow-y:auto; padding:0.9rem 1.1rem; display:flex; flex-direction:column; gap:0.6rem;}
.cve-m{max-width:88%; padding:0.55rem 0.8rem; border-radius:10px; font-size:0.84rem; line-height:1.5;}
.cve-m.cve-me{align-self:flex-end; background:var(--cve-ink); color:#fff; border-bottom-right-radius:3px;}
.cve-m.cve-bot{align-self:flex-start; background:var(--cve-fog); border-bottom-left-radius:3px;}
.cve-typing{align-self:flex-start; display:flex; gap:4px; padding:0.65rem 0.85rem;}
.cve-typing span{width:6px; height:6px; border-radius:50%; background:#AEB4B7; animation:cveTp 1s infinite;}
.cve-typing span:nth-child(2){animation-delay:.15s} .cve-typing span:nth-child(3){animation-delay:.3s}
@keyframes cveTp{0%,100%{opacity:.35; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)}}

/* product cards inside bot messages */
.cve-pcards{display:flex; flex-direction:column; gap:0.5rem; margin-top:0.55rem;}
.cve-pcard{display:flex; align-items:center; gap:0.55rem; background:#fff; border:1px solid var(--cve-line); border-radius:6px; padding:0.42rem 0.48rem;}
.cve-pcard .cve-pthumb{width:44px; height:44px; flex:none; border-radius:3px; overflow:hidden;}
.cve-pcard .cve-pthumb img{width:100%; height:100%; object-fit:cover; display:block;}
.cve-pcard .cve-pinfo{flex:1; min-width:0;}
.cve-pcard .cve-pinfo b{display:block; font-size:0.74rem; font-weight:500; line-height:1.25;}
.cve-pcard .cve-pinfo i{font-style:normal; font-size:0.68rem; color:var(--cve-stone); font-variant-numeric:tabular-nums;}
.cve-pcard .cve-pacts{display:flex; flex-direction:column; gap:0.28rem; align-items:flex-end;}
.cve-pcard .cve-pacts a{font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:#fff; background:var(--cve-ink); border-radius:999px; padding:0.26rem 0.65rem; text-decoration:none;}
.cve-pcard .cve-pacts a:hover{background:var(--cve-deep); color:#fff;}
.cve-pcard .cve-pacts button{font-family:inherit; font-size:0.6rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--cve-gold); background:none; border:1px solid var(--cve-gold); border-radius:999px; padding:0.22rem 0.6rem; cursor:pointer;}
.cve-pcard .cve-pacts button:hover{background:var(--cve-gold); color:#fff;}

/* input */
.cve-inrow{display:flex; gap:0.5rem; padding:0.75rem 1.1rem; border-top:1px solid var(--cve-line); flex:none;}
.cve-inrow input{flex:1; font-family:inherit; font-size:0.84rem; padding:0.55rem 0.85rem; border:1px solid var(--cve-line); border-radius:999px; outline:none; color:var(--cve-ink); background:#fff;}
.cve-inrow input:focus{border-color:var(--cve-gold); box-shadow:none;}
.cve-inrow button{font-family:inherit; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; background:var(--cve-ink); color:#fff; border:none; border-radius:999px; padding:0 1.1rem; cursor:pointer;}
.cve-inrow button:hover{background:var(--cve-deep);}
.cve-chips{display:flex; gap:0.4rem; padding:0 1.1rem 0.55rem; flex-wrap:wrap; flex:none;}
.cve-chips button{font-family:inherit; font-size:0.7rem; background:#fff; border:1px solid var(--cve-line); border-radius:999px; padding:0.32rem 0.8rem; cursor:pointer; color:var(--cve-ink);}
.cve-chips button:hover{border-color:var(--cve-gold); color:var(--cve-gold);}

/* Step aside while the mobile nav drawer or a dialog is open. */
html.has-modal-open #cilve-ve-eye{opacity:0; pointer-events:none;}

@media (max-width:600px){
	/* Corner placement on mobile so the eye never covers a centred
	   "Add to cart" / "Place order" button. Overrides the desktop
	   translateX(-50%) centering used in the base + hover + away rules. */
	#cilve-ve-eye{width:52px; height:52px; bottom:1rem; left:auto; right:1rem; transform:none;}
	#cilve-ve-eye:hover{transform:scale(1.06);}
	#cilve-ve-eye.cve-away{transform:scale(0);}
	#cilve-ve-eye .cve-iris{width:22px; height:22px;}
	#cilve-ve-eye .cve-pupil{width:8px; height:8px;}
	#cilve-ve-eye .cve-hint{left:auto; right:0; transform:none;}
}

@media (prefers-reduced-motion:reduce){
	#cilve-ve-eye .cve-iris,#cilve-ve-eye .cve-pupil,.cve-eye .cve-pu{transition:none;}
	#cilve-ve-eye.cve-blink .cve-lid,.cve-eyes.cve-blink2 .cve-li,.cve-item{animation:none;}
	#cilve-ve-panel{transition:none;}
}