/* PP Chat Button — floating launcher + channel panel (bottom right).
   Colours/type/spacing come from the theme's --pp-* tokens; channel brand
   colours arrive per link as --pp-chat-accent (channel registry). */

.pp-chat {
	--pp-chat-size: 56px;
	--pp-chat-offset: var(--pp-sp-6);
	--pp-chat-lift: 0px;            /* raised above the phone bottom bars */
	--pp-chat-z: 850;               /* under the shop drawer (899), nav + store selector */
	position: fixed;
	right: calc(var(--pp-chat-offset) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--pp-chat-offset) + var(--pp-chat-lift) + env(safe-area-inset-bottom, 0px));
	z-index: var(--pp-chat-z);
	font-family: var(--pp-font);
	transition: bottom var(--pp-dur) var(--pp-ease);
}

/* ── Launcher ── */
.pp-chat__toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--pp-chat-size);
	height: var(--pp-chat-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pp-magenta);
	color: var(--pp-on-dark);
	box-shadow: var(--pp-shadow-card-hover);
	cursor: pointer;
	transition: background var(--pp-dur) var(--pp-ease), transform var(--pp-dur) var(--pp-ease);
}
.pp-chat__toggle:hover { background: var(--pp-magenta-dark); color: #fff !important; }
.pp-chat__toggle:active { background: var(--pp-magenta-press); transform: scale(.96); }
.pp-chat__toggle:focus-visible { outline: none; box-shadow: var(--pp-shadow-card-hover), var(--pp-focus-ring); }

.pp-chat__toggle-icon {
	grid-area: 1 / 1;
	display: flex;
	transition: opacity var(--pp-dur) var(--pp-ease), transform var(--pp-dur) var(--pp-ease);
}
.pp-chat__toggle-icon svg { width: 26px; height: 26px; }
.pp-chat__toggle-icon--close { opacity: 0; transform: rotate(-90deg); }
.pp-chat.is-open .pp-chat__toggle-icon--open { opacity: 0; transform: rotate(90deg); }
.pp-chat.is-open .pp-chat__toggle-icon--close { opacity: 1; transform: none; }

/* ── Panel ── */
.pp-chat__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--pp-sp-3));
	width: min(320px, calc(100vw - 2 * var(--pp-sp-4)));
	background: var(--pp-bg);
	border: var(--pp-bw-hair) solid var(--pp-border);
	border-radius: var(--pp-r-2xl);
	box-shadow: var(--pp-shadow-mega);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--pp-sp-2)) scale(.98);
	transform-origin: bottom right;
	transition: opacity var(--pp-dur) var(--pp-ease), transform var(--pp-dur) var(--pp-ease), visibility 0s linear var(--pp-dur);
}
.pp-chat.is-open .pp-chat__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
/* Invisible bridge across the gap, so moving the mouse from the launcher to the
   panel doesn't count as leaving the widget. */
.pp-chat__panel::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: var(--pp-sp-3);
}

.pp-chat__head {
	padding: var(--pp-sp-4) var(--pp-sp-5);
	background: var(--pp-magenta);
	color: var(--pp-on-dark);
}
.pp-chat__heading {
	margin: 0;
	font-size: var(--pp-fs-h6);
	font-weight: var(--pp-fw-bold);
	line-height: var(--pp-lh-snug);
}
.pp-chat__intro {
	margin: var(--pp-sp-1) 0 0;
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
	color: var(--pp-on-dark-70);
}

.pp-chat__channels {
	list-style: none;
	margin: 0;
	padding: var(--pp-sp-2);
}
.pp-chat__channels li { margin: 0; }

.pp-chat__channel {
	display: flex;
	align-items: center;
	gap: var(--pp-sp-3);
	padding: var(--pp-sp-3);
	border-radius: var(--pp-r-lg);
	color: var(--pp-ink);
	text-decoration: none;
	transition: background var(--pp-dur-fast) var(--pp-ease);
}
.pp-chat__channel:hover,
.pp-chat__channel:focus-visible { background: var(--pp-bg-soft); color: var(--pp-ink); }
.pp-chat__channel:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); }

.pp-chat__channel-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--pp-chat-accent, var(--pp-magenta));
	color: var(--pp-on-dark);
}
.pp-chat__channel-icon svg { width: 22px; height: 22px; }

.pp-chat__channel-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-chat__channel-label {
	font-size: var(--pp-fs-body);
	font-weight: var(--pp-fw-semibold);
	line-height: var(--pp-lh-snug);
}
.pp-chat__channel-note {
	font-size: var(--pp-fs-xs);
	line-height: var(--pp-lh-snug);
	color: var(--pp-text-3);
}
.pp-chat__channel-arrow { display: flex; color: var(--pp-text-4); transition: transform var(--pp-dur-fast) var(--pp-ease); }
.pp-chat__channel-arrow svg { width: 18px; height: 18px; }
.pp-chat__channel:hover .pp-chat__channel-arrow { transform: translateX(2px); color: var(--pp-magenta); }

/* ── Phone ── */
@media (max-width: 767px) {
	.pp-chat { --pp-chat-size: 52px; --pp-chat-offset: var(--pp-sp-4); }

	/* Sit above the sticky "Add to basket" / "Go to basket" bars (72px, see theme). */
	body.pp-has-sticky-atc .pp-chat,
	body.pp-has-basket-bar .pp-chat { --pp-chat-lift: 72px; }
}

/* Get out of the way of full-screen overlays. */
body.pp-nav-open .pp-chat,
body.pp-store-selector-open .pp-chat { visibility: hidden; }

@media print { .pp-chat { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.pp-chat,
	.pp-chat__toggle,
	.pp-chat__toggle-icon,
	.pp-chat__panel,
	.pp-chat__channel-arrow { transition: none; }
}