/* ============================================================
   PostPrince – AI Grooming Advisor
   Palette: Black #0b0b0d · Silver #c7ccd4 · Red var(--pp-red)
   ============================================================ */
:root {
	--pp-black: #0b0b0d;
	--pp-black2: #16161a;
	--pp-black3: #1f1f26;
	--pp-silver: #c7ccd4;
	--pp-silver-dim: #8b909a;
	--pp-red: #e11d2e;
	--pp-radius: 18px;
	--pp-font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Floating launcher (luxurious animated agent icon) ---------- */
#pp-floating-root { position: fixed; z-index: 999990; bottom: 24px; }
#pp-floating-root.pp-pos-bottom-right { right: 24px; }
#pp-floating-root.pp-pos-bottom-left  { left: 24px; }

.pp-launcher {
	position: relative;
	width: var(--pp-icon-size, 76px); height: var(--pp-icon-size, 76px);
	border-radius: 50%;
	background: transparent; border: 0; padding: 0;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	filter: drop-shadow(0 10px 26px rgba(0,0,0,.65));
	animation: pp-float 4.5s ease-in-out infinite;
	transition: transform .3s cubic-bezier(.2,1.4,.4,1);
}
.pp-launcher:hover { transform: scale(1.1); animation-play-state: paused; }
@keyframes pp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* rotating polished-silver halo ring */
.pp-launcher::before {
	content: ""; position: absolute; inset: -4px; border-radius: 50%;
	background: conic-gradient(from 0deg,
		#f5f7fa 0%, #6c717b 12%, #23242a 25%, #dfe3e9 38%,
		#585d66 50%, #f8fafc 63%, #2b2c33 76%, #cdd2d9 88%, #f5f7fa 100%);
	animation: pp-ring-spin 7s linear infinite;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	        mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
@keyframes pp-ring-spin { to { transform: rotate(360deg); } }

/* breathing silver aura */
.pp-launcher::after {
	content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
	box-shadow: 0 0 0 0 rgba(214,219,226,.5);
	animation: pp-aura 3s ease-out infinite;
}
@keyframes pp-aura {
	0%   { box-shadow: 0 0 0 0 rgba(214,219,226,.45), 0 0 18px 2px rgba(233,237,242,.25); }
	70%  { box-shadow: 0 0 0 16px rgba(214,219,226,0), 0 0 26px 4px rgba(233,237,242,.12); }
	100% { box-shadow: 0 0 0 0 rgba(214,219,226,0), 0 0 18px 2px rgba(233,237,242,.25); }
}

.pp-launcher svg { width: calc(var(--pp-icon-size, 76px) * 0.9); height: calc(var(--pp-icon-size, 76px) * 0.9); position: relative; z-index: 1; }
.pp-launcher .pp-crown  { animation: pp-crown-bob 3.4s ease-in-out infinite; transform-origin: 50% 62%; }
.pp-launcher .pp-stache { animation: pp-stache 3.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes pp-crown-bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.6px) rotate(-2.5deg); } }
@keyframes pp-stache { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.07); } }

/* glass sweep across the whole orb on hover */
.pp-launcher .pp-glass {
	position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; z-index: 2; pointer-events: none;
}
.pp-launcher .pp-glass::before {
	content: ""; position: absolute; top: -20%; left: -80%; width: 55%; height: 140%;
	background: linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
	transform: skewX(-18deg);
	animation: pp-glass-sweep 3.6s ease-in-out infinite;
}
@keyframes pp-glass-sweep { 0%, 55% { left: -80%; } 85%, 100% { left: 130%; } }

.pp-launcher-badge {
	position: absolute; top: -3px; right: -3px; z-index: 3;
	background: linear-gradient(160deg, #ffffff, #c7ccd4 45%, #8b909a);
	color: #0b0b0d;
	font-family: var(--pp-font); font-weight: 800;
	font-size: clamp(8px, calc(var(--pp-icon-size, 76px) * 0.13), 13px);
	line-height: 1; letter-spacing: .5px;
	padding: 4px 8px; border-radius: 10px; border: 1px solid #f2f4f8;
	box-shadow: 0 3px 10px rgba(0,0,0,.5);
	animation: pp-badge 2s ease-in-out infinite;
}
@keyframes pp-badge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* legacy pulse kept for the classic-widget summon button */
@keyframes pp-pulse {
	0%   { box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 0 0 rgba(199,204,212,.45); }
	70%  { box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 0 18px rgba(199,204,212,0); }
	100% { box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 0 0 rgba(199,204,212,0); }
}
@keyframes pp-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }

/* ---------- Panel ---------- */
.pp-panel {
	position: fixed; z-index: 999991;
	bottom: calc(var(--pp-icon-size, 76px) + 34px);
	width: 400px; max-width: calc(100vw - 32px);
	height: 640px; max-height: calc(100vh - var(--pp-icon-size, 76px) - 64px);
	background: linear-gradient(160deg, var(--pp-black2), var(--pp-black));
	border: 1px solid #33333d; border-radius: var(--pp-radius);
	box-shadow: 0 24px 80px rgba(0,0,0,.65);
	display: flex; flex-direction: column; overflow: hidden;
	font-family: var(--pp-font); color: var(--pp-silver);
	opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none;
	transition: opacity .3s ease, transform .3s cubic-bezier(.2,1.2,.3,1);
}
.pp-pos-bottom-right .pp-panel { right: 0; }
.pp-pos-bottom-left  .pp-panel { left: 0; }
.pp-panel.pp-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.pp-inline-root .pp-panel {
	position: relative; bottom: auto; opacity: 1; transform: none; pointer-events: auto;
	width: 100%; max-width: 480px; margin: 0 auto; height: 680px;
}

/* Header */
.pp-head {
	display: flex; align-items: center; gap: 12px; padding: 14px 16px;
	background: linear-gradient(90deg, #101014, #1a1a21 60%, #101014);
	border-bottom: 1px solid #2c2c35; position: relative;
}
.pp-head::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: linear-gradient(90deg, transparent, var(--pp-red), transparent);
	animation: pp-scan 3s linear infinite; background-size: 200% 100%;
}
@keyframes pp-scan { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pp-head-avatar { width: 44px; height: 44px; flex: 0 0 44px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.pp-head-avatar .pp-crown { animation: pp-crown-bob 3.4s ease-in-out infinite; transform-origin: 50% 62%; }
.pp-head-title { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: .5px; }
.pp-head-title em { color: var(--pp-red); font-style: normal; }
.pp-head-sub { font-size: 11px; color: var(--pp-silver-dim); display: flex; align-items: center; gap: 5px; }
.pp-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; animation: pp-badge 1.6s infinite; }
.pp-close { margin-left: auto; background: none; border: 0; color: var(--pp-silver-dim); font-size: 20px; cursor: pointer; transition: color .2s, transform .2s; }
.pp-close:hover { color: var(--pp-red); transform: rotate(90deg); }

/* Body / chat area */
.pp-body { flex: 1; overflow-y: auto; padding: 16px; scroll-behavior: smooth; }
.pp-body::-webkit-scrollbar { width: 6px; }
.pp-body::-webkit-scrollbar-thumb { background: #33333d; border-radius: 3px; }

.pp-msg { display: flex; gap: 10px; margin-bottom: 14px; animation: pp-in .35s ease both; }
@keyframes pp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pp-msg-avatar { width: 30px; height: 30px; flex: 0 0 30px; margin-top: 2px; }
.pp-bubble {
	background: var(--pp-black3); border: 1px solid #30303a; border-radius: 4px 14px 14px 14px;
	padding: 10px 13px; font-size: 13.5px; line-height: 1.55; max-width: 85%;
}
.pp-msg.pp-user { flex-direction: row-reverse; }
.pp-msg.pp-user .pp-bubble { background: linear-gradient(135deg, #7d1220, var(--pp-red)); color: #fff; border: 0; border-radius: 14px 4px 14px 14px; }
.pp-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1.5px; background: var(--pp-silver-dim); border-radius: 50%; animation: pp-ty 1.1s infinite; }
.pp-typing span:nth-child(2) { animation-delay: .15s; } .pp-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes pp-ty { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* Photo source chooser (camera / upload) */
.pp-src-choice { display: flex; gap: 10px; margin: 4px 0 14px 40px; animation: pp-in .35s ease both; }
.pp-src-btn {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
	background: linear-gradient(150deg, #1c1c23, #14141a); border: 1px solid #33333d;
	border-radius: 14px; padding: 16px 10px; cursor: pointer; color: var(--pp-silver);
	font-family: var(--pp-font); font-size: 12.5px; transition: all .25s;
}
.pp-src-btn .pp-src-ic { font-size: 26px; }
.pp-src-btn b { color: #fff; font-size: 12.5px; }
.pp-src-btn:hover { border-color: var(--pp-red); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(225,29,46,.18); }
.pp-src-cam:hover { border-color: #c7ccd4; box-shadow: 0 10px 26px rgba(199,204,212,.15); }

/* Live camera capture */
.pp-camera { margin: 4px 0 14px 40px; border-radius: 14px; overflow: hidden; border: 1px solid #33333d; background: #000; animation: pp-in .4s ease both; }
.pp-cam-stage { position: relative; }
.pp-cam-stage video, .pp-cam-stage canvas { width: 100%; display: block; transform: scaleX(-1); } /* mirror preview */
.pp-cam-stage canvas { transform: none; } /* frozen shot already un-mirrored */
.pp-cam-guide {
	position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
	width: 58%; aspect-ratio: 3 / 4; border: 2px dashed rgba(199,204,212,.75);
	border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
	box-shadow: 0 0 0 2000px rgba(11,11,13,.28); pointer-events: none;
	animation: pp-guide 2.4s ease-in-out infinite;
}
@keyframes pp-guide { 0%,100% { border-color: rgba(199,204,212,.75); } 50% { border-color: rgba(225,29,46,.85); } }
.pp-cam-hint {
	position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap;
	font-size: 11px; color: #fff; background: rgba(11,11,13,.72); padding: 4px 12px;
	border-radius: 9px; border-left: 3px solid var(--pp-red); letter-spacing: .6px;
}
.pp-cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .1s; }
.pp-cam-flash.pp-flash-on { opacity: .85; transition: opacity .05s; }
.pp-cam-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 14px; background: linear-gradient(180deg, #14141a, #0b0b0d);
}
.pp-cam-spacer { width: 64px; }
.pp-cam-shoot {
	width: 56px; height: 56px; border-radius: 50%; cursor: pointer; border: 3px solid #e8ebef;
	background: radial-gradient(circle at 35% 30%, #ffffff, #c7ccd4 55%, #8b909a);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 4px rgba(199,204,212,.18), 0 6px 18px rgba(0,0,0,.5);
	transition: transform .15s; animation: pp-badge 2.2s ease-in-out infinite;
}
.pp-cam-shoot:hover { transform: scale(1.08); }
.pp-cam-shoot:active { transform: scale(.92); }
.pp-cam-shoot span { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #0b0b0d; }
.pp-cam-cancel, .pp-cam-retake {
	background: transparent; border: 1px solid #3a3a45; color: var(--pp-silver-dim);
	border-radius: 10px; padding: 9px 14px; cursor: pointer; font-size: 12px; font-family: var(--pp-font);
	letter-spacing: .6px; transition: all .2s;
}
.pp-cam-cancel:hover, .pp-cam-retake:hover { border-color: var(--pp-silver); color: #fff; }
.pp-cam-use {
	flex: 1; background: linear-gradient(135deg, #7d1220, var(--pp-red)); color: #fff; border: 0;
	border-radius: 10px; padding: 11px; font-weight: 800; font-size: 12.5px; letter-spacing: 1px;
	text-transform: uppercase; cursor: pointer; font-family: var(--pp-font); transition: transform .2s, box-shadow .2s;
}
.pp-cam-use:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(225,29,46,.35); }

/* Choice chips */
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px 40px; animation: pp-in .35s ease both; }
.pp-chip {
	background: transparent; color: var(--pp-silver); border: 1px solid var(--pp-silver-dim);
	border-radius: 999px; padding: 7px 14px; font-size: 12.5px; cursor: pointer;
	transition: all .2s; font-family: var(--pp-font);
}
.pp-chip:hover { border-color: var(--pp-red); color: #fff; background: rgba(225,29,46,.12); transform: translateY(-2px); }

/* Upload zone */
.pp-upload {
	margin: 4px 0 14px 40px; border: 2px dashed #3a3a45; border-radius: 14px; padding: 22px 14px;
	text-align: center; cursor: pointer; transition: all .25s; animation: pp-in .35s ease both;
}
.pp-upload:hover, .pp-upload.pp-drag { border-color: var(--pp-red); background: rgba(225,29,46,.06); }
.pp-upload .pp-up-icon { font-size: 30px; display: block; margin-bottom: 6px; animation: pp-crown-bob 2.4s infinite; }
.pp-upload p { margin: 0; font-size: 12.5px; color: var(--pp-silver-dim); }
.pp-upload strong { color: var(--pp-silver); }

/* Scan stage (photo + outline sketch + laser) */
.pp-scan { margin: 4px 0 14px 40px; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #33333d; animation: pp-in .4s ease both; }
.pp-scan img, .pp-scan canvas { width: 100%; display: block; }
.pp-scan canvas { position: absolute; inset: 0; height: 100%; }
.pp-scan .pp-laser {
	position: absolute; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, transparent, var(--pp-red), #fff, var(--pp-red), transparent);
	box-shadow: 0 0 18px 4px rgba(225,29,46,.65); animation: pp-laser 2.1s ease-in-out infinite;
}
@keyframes pp-laser { 0% { top: 2%; } 50% { top: 96%; } 100% { top: 2%; } }
.pp-scan .pp-scan-label {
	position: absolute; bottom: 8px; left: 10px; font-size: 11px; letter-spacing: 1.5px;
	color: #fff; background: rgba(11,11,13,.72); padding: 4px 10px; border-radius: 8px;
	border-left: 3px solid var(--pp-red); text-transform: uppercase;
}
.pp-scan.pp-sketch-mode img { filter: grayscale(1) contrast(1.2) brightness(.55); }

/* Analysis facts grid */
.pp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 14px 40px; animation: pp-in .4s ease both; }
.pp-fact {
	background: var(--pp-black3); border: 1px solid #30303a; border-left: 3px solid var(--pp-red);
	border-radius: 10px; padding: 8px 11px;
}
.pp-fact b { display: block; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pp-silver-dim); margin-bottom: 3px; }
.pp-fact span { font-size: 13px; color: #fff; font-weight: 600; text-transform: capitalize; }

/* Recommendation cards */
.pp-recs { margin: 4px 0 14px 40px; display: flex; flex-direction: column; gap: 12px; }
.pp-rec {
	background: linear-gradient(150deg, #1c1c23, #14141a); border: 1px solid #33333d;
	border-radius: 14px; padding: 14px; cursor: pointer; position: relative; overflow: hidden;
	transition: transform .25s, border-color .25s, box-shadow .25s; animation: pp-in .45s ease both;
}
.pp-rec:nth-child(2) { animation-delay: .12s; }
.pp-rec:hover { transform: translateY(-3px); border-color: var(--pp-red); box-shadow: 0 10px 30px rgba(225,29,46,.18); }
.pp-rec::before {
	content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(199,204,212,.07), transparent);
	transition: left .6s;
}
.pp-rec:hover::before { left: 120%; }
.pp-rec-tag { position: absolute; top: 12px; right: 12px; background: var(--pp-red); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 8px; letter-spacing: 1px; }
.pp-rec h4 { margin: 0 0 8px; color: #fff; font-size: 15px; letter-spacing: .3px; }
.pp-rec-row { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; }
.pp-rec-row .pp-ic { flex: 0 0 18px; text-align: center; }
.pp-rec-row b { color: var(--pp-silver); }
.pp-rec-why { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #33333d; font-size: 11.5px; color: var(--pp-silver-dim); font-style: italic; }
.pp-rec-cta {
	margin-top: 10px; text-align: center; background: transparent; border: 1px solid var(--pp-red);
	color: var(--pp-red); border-radius: 10px; padding: 8px; font-weight: 700; font-size: 12.5px;
	letter-spacing: 1px; text-transform: uppercase; transition: all .2s; width: 100%; cursor: pointer; font-family: var(--pp-font);
}
.pp-rec:hover .pp-rec-cta { background: var(--pp-red); color: #fff; }
.pp-rec.pp-chosen { border-color: var(--pp-red); box-shadow: 0 0 0 2px rgba(225,29,46,.35); }

/* Routine timeline */
.pp-routine { margin: 4px 0 14px 40px; animation: pp-in .4s ease both; }
.pp-r-block { margin-bottom: 12px; background: var(--pp-black3); border: 1px solid #30303a; border-radius: 12px; overflow: hidden; }
.pp-r-when { background: linear-gradient(90deg, rgba(225,29,46,.22), transparent); padding: 7px 12px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; border-left: 3px solid var(--pp-red); }
.pp-r-block ol { margin: 8px 0 10px; padding-left: 28px; }
.pp-r-block li { font-size: 12.5px; line-height: 1.6; margin-bottom: 4px; color: var(--pp-silver); }
.pp-r-block li::marker { color: var(--pp-red); font-weight: 700; }

/* Products */
.pp-prods { margin: 4px 0 14px 40px; display: grid; gap: 9px; }
.pp-prod-row { display: flex; flex-direction: column; gap: 6px; animation: pp-in .4s ease both; }
.pp-prod {
	display: flex; align-items: center; gap: 11px; background: var(--pp-black3); border: 1px solid #30303a;
	border-radius: 12px; padding: 10px 12px; text-decoration: none; transition: border-color .2s, transform .2s;
}
.pp-prod:hover { border-color: var(--pp-red); transform: translateX(4px); }
.pp-prod-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: linear-gradient(135deg, #2a2a33, #17171c); display: flex; align-items: center; justify-content: center; font-size: 18px; border: 1px solid #3a3a45; }
.pp-prod b { display: block; color: #fff; font-size: 13px; }
.pp-prod small { color: var(--pp-silver-dim); font-size: 11px; line-height: 1.4; display: block; }
.pp-prod-price { margin-left: auto; color: var(--pp-red); font-weight: 800; font-size: 13px; white-space: nowrap; }
.pp-match-badge { font-size: 9px; background: rgba(225,29,46,.15); color: var(--pp-red); border: 1px solid rgba(225,29,46,.4); padding: 1px 6px; border-radius: 6px; letter-spacing: .8px; margin-left: 6px; vertical-align: middle; }

/* Add to cart */
.pp-cart-btn {
	align-self: flex-end; display: inline-flex; align-items: center; gap: 6px;
	background: linear-gradient(135deg, #7d1220, var(--pp-red)); color: #fff; border: 0;
	border-radius: 9px; padding: 7px 14px; font-weight: 800; font-size: 11.5px; letter-spacing: .8px;
	cursor: pointer; font-family: var(--pp-font); transition: transform .2s, box-shadow .2s, background .3s;
}
.pp-cart-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(225,29,46,.35); }
.pp-cart-btn:disabled { cursor: default; opacity: .9; }
.pp-cart-btn.pp-cart-done { background: linear-gradient(135deg, #14532d, #16a34a); }
.pp-cart-view { align-self: flex-end; font-size: 11px; color: var(--pp-silver); text-decoration: underline; margin-top: -2px; }
.pp-cart-view:hover { color: #fff; }

/* Name input (memory) */
.pp-name-row { display: flex; gap: 7px; margin: 4px 0 14px 40px; animation: pp-in .35s ease both; }
.pp-name-row input {
	flex: 1; background: var(--pp-black); border: 1px solid #3a3a45; border-radius: 10px;
	color: #fff; padding: 10px 12px; font-size: 13px; font-family: var(--pp-font); outline: none; transition: border-color .2s;
}
.pp-name-row input:focus { border-color: var(--pp-red); }
.pp-name-row input::placeholder { color: #55555f; }
.pp-name-ok {
	background: linear-gradient(135deg, #7d1220, var(--pp-red)); color: #fff; border: 0; border-radius: 10px;
	width: 42px; font-size: 15px; cursor: pointer; transition: transform .2s;
}
.pp-name-ok:hover { transform: scale(1.06); }
.pp-name-skip { background: transparent; border: 1px solid #3a3a45; color: var(--pp-silver-dim); border-radius: 10px; padding: 0 12px; cursor: pointer; font-size: 11.5px; font-family: var(--pp-font); }
.pp-name-skip:hover { border-color: var(--pp-silver); color: #fff; }

/* 4-view result */
.pp-views { margin: 4px 0 14px 40px; border-radius: 14px; overflow: hidden; border: 1px solid #33333d; position: relative; animation: pp-in .45s ease both; }
.pp-views img { width: 100%; display: block; }
.pp-views figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(11,11,13,.92)); color: var(--pp-silver); font-size: 11px; padding: 22px 12px 9px; letter-spacing: 1px; text-transform: uppercase; text-align: center; }

/* Progress steps */
.pp-steps { display: flex; gap: 4px; padding: 10px 16px 0; }
.pp-step { flex: 1; height: 4px; border-radius: 2px; background: #2c2c35; overflow: hidden; position: relative; }
.pp-step.pp-done { background: var(--pp-red); }
.pp-step.pp-active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pp-red), #ff6b76); animation: pp-fill 1.4s ease-in-out infinite; }
@keyframes pp-fill { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Footer */
.pp-foot { padding: 8px 16px 10px; font-size: 10px; color: #55555f; text-align: center; letter-spacing: 1px; border-top: 1px solid #22222a; }
.pp-foot em { color: var(--pp-red); font-style: normal; }

/* Restart / secondary button */
.pp-btn-ghost {
	display: block; margin: 4px 0 14px 40px; background: transparent; border: 1px solid #3a3a45;
	color: var(--pp-silver-dim); border-radius: 10px; padding: 9px 16px; cursor: pointer; font-size: 12px;
	letter-spacing: 1px; transition: all .2s; font-family: var(--pp-font);
}
.pp-btn-ghost:hover { border-color: var(--pp-silver); color: #fff; }

/* Summon button for the classic widget */
.pp-summon-btn {
	background: linear-gradient(135deg, #1a1a21, var(--pp-black)); color: #fff;
	border: 1px solid #c7ccd4;
	padding: 12px 22px; border-radius: 12px; font-weight: 800; letter-spacing: 1px; cursor: pointer;
	font-family: var(--pp-font); transition: all .25s; animation: pp-pulse 2.6s infinite;
}
.pp-summon-btn:hover { background: linear-gradient(135deg, #e8ebef, #9aa0aa); color: #0b0b0d; transform: translateY(-2px); }

/* Confetti burst on result */
.pp-confetti { position: absolute; width: 8px; height: 8px; pointer-events: none; z-index: 10; animation: pp-conf 1.1s ease-out forwards; }
@keyframes pp-conf { to { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; } }

/* ---------- Lead capture form ---------- */
.pp-lead {
	margin: 4px 0 14px 40px; background: linear-gradient(150deg, #1c1c23, #14141a);
	border: 1px solid var(--pp-red); border-radius: 14px; padding: 14px; animation: pp-in .4s ease both;
	box-shadow: 0 0 24px rgba(225,29,46,.12) inset;
}
.pp-lead-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pp-lead-ic { flex: 0 0 22px; text-align: center; }
.pp-lead input {
	flex: 1; background: var(--pp-black); border: 1px solid #3a3a45; border-radius: 10px;
	color: #fff; padding: 10px 12px; font-size: 13px; font-family: var(--pp-font); outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.pp-lead input:focus { border-color: var(--pp-red); box-shadow: 0 0 0 3px rgba(225,29,46,.18); }
.pp-lead input::placeholder { color: #55555f; }
.pp-lead-err { color: #ff6b76; font-size: 11.5px; min-height: 15px; margin: 2px 0 6px 30px; }
.pp-lead-send {
	width: 100%; background: linear-gradient(135deg, #7d1220, var(--pp-red)); color: #fff; border: 0;
	border-radius: 10px; padding: 11px; font-weight: 800; font-size: 13px; letter-spacing: 1px;
	text-transform: uppercase; cursor: pointer; font-family: var(--pp-font); transition: transform .2s, box-shadow .2s;
}
.pp-lead-send:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(225,29,46,.35); }
.pp-lead-skip {
	width: 100%; margin-top: 7px; background: transparent; border: 0; color: var(--pp-silver-dim);
	font-size: 11.5px; cursor: pointer; font-family: var(--pp-font); text-decoration: underline;
}
.pp-lead-skip:hover { color: var(--pp-silver); }

/* ---------- RTL (Arabic) ---------- */
.pp-panel.pp-rtl { direction: rtl; }
.pp-panel.pp-rtl .pp-bubble { border-radius: 14px 4px 14px 14px; }
.pp-panel.pp-rtl .pp-msg.pp-user .pp-bubble { border-radius: 4px 14px 14px 14px; }
.pp-panel.pp-rtl .pp-close { margin-left: 0; margin-right: auto; }
.pp-panel.pp-rtl .pp-chips,
.pp-panel.pp-rtl .pp-upload,
.pp-panel.pp-rtl .pp-src-choice,
.pp-panel.pp-rtl .pp-camera,
.pp-panel.pp-rtl .pp-scan,
.pp-panel.pp-rtl .pp-facts,
.pp-panel.pp-rtl .pp-recs,
.pp-panel.pp-rtl .pp-routine,
.pp-panel.pp-rtl .pp-prods,
.pp-panel.pp-rtl .pp-name-row,
.pp-panel.pp-rtl .pp-views,
.pp-panel.pp-rtl .pp-lead,
.pp-panel.pp-rtl .pp-btn-ghost { margin-left: 0; margin-right: 40px; }
.pp-panel.pp-rtl .pp-fact { border-left: 1px solid #30303a; border-right: 3px solid var(--pp-red); }
.pp-panel.pp-rtl .pp-rec-tag { right: auto; left: 12px; }
.pp-panel.pp-rtl .pp-r-when { border-left: 0; border-right: 3px solid var(--pp-red); background: linear-gradient(270deg, transparent, rgba(225,29,46,.22)); }
.pp-panel.pp-rtl .pp-r-block ol { padding-left: 0; padding-right: 28px; }
.pp-panel.pp-rtl .pp-prod:hover { transform: translateX(-4px); }
.pp-panel.pp-rtl .pp-prod-price { margin-left: 0; margin-right: auto; }
.pp-panel.pp-rtl .pp-scan .pp-scan-label { left: auto; right: 10px; border-left: 0; border-right: 3px solid var(--pp-red); }
.pp-panel.pp-rtl .pp-lead-err { margin: 2px 30px 6px 0; }

.pp-panel.pp-rtl .pp-cart-btn, .pp-panel.pp-rtl .pp-cart-view { align-self: flex-start; }
.pp-panel.pp-rtl .pp-cam-hint { border-left: 0; border-right: 3px solid var(--pp-red); }

@media (max-width: 460px) {
	.pp-panel { width: calc(100vw - 20px); bottom: calc(var(--pp-icon-size, 76px) + 26px); height: calc(100vh - var(--pp-icon-size, 76px) - 50px); }
	#pp-floating-root { bottom: 14px; }
	#pp-floating-root.pp-pos-bottom-right { right: 14px; }
}