/**
 * SA Contact Widget — front end.
 * Colours arrive as --sa-cw-* custom properties set from the settings, so
 * this file never has to be regenerated when the owner changes a colour.
 */

.sa-cw {
	position: fixed;
	inset-block-end: 22px;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	font-family: inherit;
}
.sa-cw--right { inset-inline-end: 22px; }
.sa-cw--left  { inset-inline-start: 22px; align-items: flex-start; }

/* ---- launcher ----
   A plugin cannot know what the active theme does to a bare <button>. This
   one was being given the theme's button padding and fill, which blew the
   circle out to 84px and repainted it. Every visual property is stated with
   priority so the launcher looks the same on any theme. */
.sa-cw .sa-cw-launch {
	position: relative;
	inline-size: 60px !important;
	block-size: 60px !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	max-inline-size: none;
	border: 1px solid var(--sa-cw-accent, #FD6301) !important;
	border-radius: 50% !important;
	background: var(--sa-cw-header, #2F1601) !important;
	color: #fff !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 28px rgb(0 0 0 / 0.25) !important;
	transition: transform .18s ease, background-color .18s ease;
	/* A slow breath so the launcher is noticed without nagging. Marked
	   !important because themes commonly ship a blanket reduced-motion rule
	   that flattens every animation-duration to 0.01ms — which would leave
	   this frozen mid-scale. The owner asked for the attention cue. */
	animation: sa-cw-breathe 2.8s ease-in-out infinite !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	order: 2;
}
.sa-cw .sa-cw-launch:hover {
	transform: scale(1.05);
	background: var(--sa-cw-accent, #FD6301) !important;
	animation-play-state: paused;   /* stop breathing once it has been found */
}
.sa-cw.is-open .sa-cw-launch { animation: none; }

/* An expanding accent ring, drawn on the launcher's own ::after so it needs
   no extra element and cannot intercept the click. */
.sa-cw .sa-cw-launch::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid var(--sa-cw-accent, #FD6301);
	animation: sa-cw-ring 2.8s ease-out infinite !important;
	pointer-events: none;
}
.sa-cw.is-open .sa-cw-launch::after { display: none; }

@keyframes sa-cw-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}
@keyframes sa-cw-ring {
	0%   { transform: scale(1);    opacity: .75; }
	70%  { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}
.sa-cw-launch svg { inline-size: 26px; block-size: 26px; }
.sa-cw-launch .sa-cw-close { display: none; }
.sa-cw.is-open .sa-cw-launch .sa-cw-open { display: none; }
.sa-cw.is-open .sa-cw-launch .sa-cw-close { display: block; }

/* the small live dot on the launcher */
.sa-cw-ping {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 4px;
	inline-size: 12px;
	block-size: 12px;
	border-radius: 50%;
	background: var(--sa-cw-dot, #35C759);
	border: 2px solid #fff;
}
.sa-cw.is-open .sa-cw-ping { display: none; }

/* ---- panel ---- */
.sa-cw-panel {
	inline-size: min(380px, calc(100vw - 32px));
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
	order: 1;
	transform-origin: bottom right;
	animation: sa-cw-in .22s ease both;
}
.sa-cw--left .sa-cw-panel { transform-origin: bottom left; }
@keyframes sa-cw-in {
	from { opacity: 0; transform: translateY(10px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

.sa-cw-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 22px;
	background: var(--sa-cw-header, #2F1601);
	color: #fff;
}
.sa-cw-head .sa-cw-avatar {
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgb(255 255 255 / 0.28);
	flex: 0 0 auto;
}
.sa-cw-head strong {
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
}
.sa-cw-status {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-block-start: 4px;
	font-size: 13.5px;
	color: rgb(255 255 255 / 0.82);
}
.sa-cw-status i {
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--sa-cw-dot, #35C759);
	flex: 0 0 auto;
}

.sa-cw-body { padding: 18px 18px 16px; }
.sa-cw-intro {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.45;
	color: #1e1a17;
}

/* ---- channel rows ---- */
.sa-cw-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 14px;
	margin-block-end: 9px;
	border: 1px solid rgb(0 0 0 / 0.08);
	border-radius: 14px;
	text-decoration: none;
	color: #1e1a17;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sa-cw-row:hover {
	border-color: var(--sa-cw-accent, #FD6301);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
	transform: translateY(-1px);
}
.sa-cw-ico {
	inline-size: 42px;
	block-size: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: rgb(0 0 0 / 0.05);
}
.sa-cw-ico svg { inline-size: 22px; block-size: 22px; }
.sa-cw-txt { flex: 1 1 auto; min-inline-size: 0; }
.sa-cw-txt strong {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.25;
}
.sa-cw-txt span {
	display: block;
	font-size: 13px;
	line-height: 1.35;
	color: rgb(30 26 23 / 0.6);
	overflow-wrap: anywhere;
}
.sa-cw-arrow { font-size: 22px; color: rgb(30 26 23 / 0.3); flex: 0 0 auto; }

/* the highlighted row inverts */
.sa-cw-row.is-cta {
	background: var(--sa-cw-header, #2F1601);
	border-color: var(--sa-cw-header, #2F1601);
	color: #fff;
}
.sa-cw-row.is-cta .sa-cw-ico { background: rgb(255 255 255 / 0.13); color: #fff; }
.sa-cw-row.is-cta .sa-cw-txt span { color: rgb(255 255 255 / 0.68); }
.sa-cw-row.is-cta .sa-cw-arrow { color: rgb(255 255 255 / 0.55); }
/* On hover the theme's own link colour was winning and the label went dark
   against the accent fill — effectively invisible. The row keeps its white
   text explicitly in every state. */
.sa-cw .sa-cw-row.is-cta,
.sa-cw .sa-cw-row.is-cta:hover,
.sa-cw .sa-cw-row.is-cta:focus-visible { color: #fff !important; }
.sa-cw .sa-cw-row.is-cta:hover strong,
.sa-cw .sa-cw-row.is-cta strong { color: #fff !important; }
.sa-cw .sa-cw-row.is-cta:hover .sa-cw-txt span { color: rgb(255 255 255 / 0.8) !important; }
.sa-cw-row.is-cta:hover {
	background: var(--sa-cw-accent, #FD6301);
	border-color: var(--sa-cw-accent, #FD6301);
}

.sa-cw-note {
	margin: 12px 0 0;
	text-align: center;
	font-size: 13px;
	color: rgb(30 26 23 / 0.45);
}

/* keyboard users must be able to see where they are */
.sa-cw-row:focus-visible,
.sa-cw-launch:focus-visible {
	outline: 3px solid var(--sa-cw-accent, #FD6301);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.sa-cw { inset-block-end: 16px; }
	.sa-cw--right { inset-inline-end: 16px; }
	.sa-cw--left  { inset-inline-start: 16px; }
	.sa-cw-head { padding: 16px 18px; }
	.sa-cw-head .sa-cw-avatar { inline-size: 46px; block-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.sa-cw-panel { animation: none; }
	.sa-cw-launch, .sa-cw-row { transition: none; }
}