/*
 * Advanced WhatsApp Chat — frontend styles.
 *
 * Positioning strategy: every floating widget is a `.mit-wa-widget` with
 * `position: fixed` whose corner is chosen via `data-placement-desktop`
 * (this file) and `data-placement-mobile` (media query below). Actual
 * offsets come from CSS custom properties written inline by PHP
 * (class-frontend.php::build_style_attr()), so this file never hardcodes
 * a number - only which of top/right/bottom/left is "auto" per corner.
 */

.mit-wa-widget {
	position: fixed;
	z-index: 999999;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.4;
}

.mit-wa-widget *,
.mit-wa-widget *::before,
.mit-wa-widget *::after {
	box-sizing: border-box;
}

/* Desktop corner placement (default; overridden for mobile below). */
.mit-wa-widget[data-placement-desktop="bottom-right"] { top: auto; right: var(--mit-wa-desktop-h); bottom: var(--mit-wa-desktop-v); left: auto; }
.mit-wa-widget[data-placement-desktop="bottom-left"]  { top: auto; right: auto; bottom: var(--mit-wa-desktop-v); left: var(--mit-wa-desktop-h); }
.mit-wa-widget[data-placement-desktop="top-right"]    { top: var(--mit-wa-desktop-v); right: var(--mit-wa-desktop-h); bottom: auto; left: auto; }
.mit-wa-widget[data-placement-desktop="top-left"]     { top: var(--mit-wa-desktop-v); right: auto; bottom: auto; left: var(--mit-wa-desktop-h); }
.mit-wa-widget[data-placement-desktop="custom"] {
	top: var(--mit-wa-desktop-custom-top, auto);
	right: var(--mit-wa-desktop-custom-right, auto);
	bottom: var(--mit-wa-desktop-custom-bottom, auto);
	left: var(--mit-wa-desktop-custom-left, auto);
}

/* Mobile corner placement takes over below the WP admin-bar breakpoint. */
@media (max-width: 782px) {
	.mit-wa-widget[data-placement-mobile="bottom-right"] { top: auto; right: var(--mit-wa-mobile-h); bottom: var(--mit-wa-mobile-v); left: auto; }
	.mit-wa-widget[data-placement-mobile="bottom-left"]  { top: auto; right: auto; bottom: var(--mit-wa-mobile-v); left: var(--mit-wa-mobile-h); }
	.mit-wa-widget[data-placement-mobile="top-right"]    { top: var(--mit-wa-mobile-v); right: var(--mit-wa-mobile-h); bottom: auto; left: auto; }
	.mit-wa-widget[data-placement-mobile="top-left"]     { top: var(--mit-wa-mobile-v); right: auto; bottom: auto; left: var(--mit-wa-mobile-h); }
	.mit-wa-widget[data-placement-mobile="custom"] {
		top: var(--mit-wa-mobile-custom-top, auto);
		right: var(--mit-wa-mobile-custom-right, auto);
		bottom: var(--mit-wa-mobile-custom-bottom, auto);
		left: var(--mit-wa-mobile-custom-left, auto);
	}
}

/* Shared button primitives. */
.mit-wa-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	background: var(--mit-wa-primary-color, #25D366);
	color: var(--mit-wa-text-color, #fff);
	box-shadow: var(--mit-wa-shadow, none);
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mit-wa-button:hover,
.mit-wa-button:focus-visible {
	transform: translateY(-2px);
	color: var(--mit-wa-text-color, #fff);
}
.mit-wa-button:focus-visible {
	outline: 3px solid rgba(0, 0, 0, 0.35);
	outline-offset: 2px;
}
.mit-wa-icon { display: block; width: 26px; height: 26px; }

/* Style: Floating Button (circular icon only). */
.mit-wa-button-round {
	width: var(--mit-wa-button-size, 60px);
	height: var(--mit-wa-button-size, 60px);
	border-radius: 50%;
	justify-content: center;
	position: relative;
}

/* Style: Floating Box (icon + title/status). */
.mit-wa-button-box {
	padding: 12px 18px 12px 12px;
	border-radius: var(--mit-wa-border-radius, 16px);
}
.mit-wa-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	flex: 0 0 auto;
	position: relative;
}
.mit-wa-box-text { display: flex; flex-direction: column; text-align: left; }
.mit-wa-box-title { font-size: 14px; }
.mit-wa-box-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.9; }

/* Style: Compact Button (pill). */
.mit-wa-button-compact {
	padding: 10px 20px;
	border-radius: var(--mit-wa-border-radius, 999px);
	font-weight: 600;
	font-size: 14px;
}
.mit-wa-button-compact .mit-wa-icon-wrap { width: 22px; height: 22px; background: transparent; }
.mit-wa-button-compact .mit-wa-icon { width: 20px; height: 20px; }

/* Status dot, shared by Floating Box and Business Card. */
.mit-wa-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #8a8a8a;
}
.mit-wa-status-dot.mit-wa-status-online { background: #34d058; }
.mit-wa-status-dot.mit-wa-status-offline { background: #b0b0b0; }

/* Style: Business Card. */
.mit-wa-style-business-card .mit-wa-card {
	display: none;
	width: 280px;
	background: #fff;
	color: #222;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	padding: 16px;
	margin-bottom: 14px;
	position: absolute;
	bottom: calc(var(--mit-wa-button-size, 60px) + 16px);
	right: 0;
}
.mit-wa-style-business-card[data-placement-desktop*="left"] .mit-wa-card,
.mit-wa-style-business-card[data-placement-mobile*="left"] .mit-wa-card {
	right: auto;
	left: 0;
}
.mit-wa-style-business-card.mit-wa-open .mit-wa-card { display: block; }
.mit-wa-card-header { display: flex; align-items: center; gap: 10px; }
.mit-wa-card-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mit-wa-card-avatar-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mit-wa-primary-color, #25D366);
	color: #fff;
}
.mit-wa-card-avatar-fallback .mit-wa-icon { width: 22px; height: 22px; }
.mit-wa-card-heading { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mit-wa-card-business { font-size: 14px; }
.mit-wa-card-agent { font-size: 12px; color: #666; }
.mit-wa-card-close {
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #999;
	padding: 4px;
}
.mit-wa-card-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; margin: 10px 0; }
.mit-wa-button-card {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px;
	border-radius: 10px;
	font-weight: 600;
}
.mit-wa-card-toggle {
	width: var(--mit-wa-button-size, 60px);
	height: var(--mit-wa-button-size, 60px);
	border-radius: 50%;
	border: none;
	background: var(--mit-wa-primary-color, #25D366);
	color: var(--mit-wa-text-color, #fff);
	box-shadow: var(--mit-wa-shadow, none);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	position: relative;
}

/* Greeting Dialog — attached to Floating Button / Floating Box / Compact
 * Button. Business Card intentionally has its own panel (see PHP); the
 * Inline Widget has no floating anchor, so neither ever gets this markup. */
.mit-wa-greeting {
	display: block;
	position: absolute;
	bottom: calc(var(--mit-wa-button-size, 60px) + 16px);
	right: 0;
	width: 280px;
	max-width: calc(100vw - 40px);
	background: #fff;
	color: #222;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	padding: 16px;
}
.mit-wa-greeting[hidden] { display: none; }
.mit-wa-widget[data-placement-desktop*="left"] .mit-wa-greeting,
.mit-wa-widget[data-placement-mobile*="left"] .mit-wa-greeting {
	right: auto;
	left: 0;
}
.mit-wa-greeting-close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #999;
	padding: 4px;
}
.mit-wa-greeting-header { display: flex; align-items: center; gap: 10px; padding-right: 18px; }
.mit-wa-greeting-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mit-wa-greeting-heading { display: flex; flex-direction: column; }
.mit-wa-greeting-agent { font-size: 12px; color: #666; }
.mit-wa-greeting-message { font-size: 13px; color: #333; margin: 12px 0; line-height: 1.5; }
.mit-wa-button-greeting {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px;
	border-radius: 10px;
	font-weight: 600;
}
.mit-wa-toggle { cursor: pointer; }

/* Multiple Agents — department picker list, shared by the Greeting
 * Dialog panel (Floating Button/Box/Compact Button) and Business Card's
 * own panel via templates/partials/agents-list.php. */
.mit-wa-agents-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
}
.mit-wa-greeting.mit-wa-greeting-has-agents { width: 300px; }
.mit-wa-agents-item + .mit-wa-agents-item { margin-top: 6px; }
.mit-wa-agents-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease;
}
.mit-wa-agents-link:hover,
.mit-wa-agents-link:focus-visible {
	background: #f2f2f2;
	color: inherit;
}
.mit-wa-agents-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mit-wa-agents-avatar-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mit-wa-primary-color, #25D366);
	color: #fff;
}
.mit-wa-agents-avatar-fallback .mit-wa-icon { width: 16px; height: 16px; }
.mit-wa-agents-info { display: flex; flex-direction: column; min-width: 0; }
.mit-wa-agents-department { font-size: 13px; }
.mit-wa-agents-name { font-size: 11px; color: #666; }
.mit-wa-agents-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; margin-top: 2px; }

/* Business Card's panel is a fixed 280px (see .mit-wa-style-business-card
 * .mit-wa-card above); when it hosts the agents list instead of a single
 * button, cap the list's own height so a long roster scrolls internally
 * rather than growing the whole card unpredictably. */
.mit-wa-style-business-card .mit-wa-agents-list { max-height: 220px; }

/* Style: Inline Widget (placed via shortcode, not fixed-position). */
.mit-wa-inline.mit-wa-widget {
	position: static;
	display: inline-block;
	z-index: auto;
}
.mit-wa-button-inline {
	padding: 12px 18px 12px 12px;
	border-radius: var(--mit-wa-border-radius, 16px);
}
.mit-wa-inline-text { display: flex; flex-direction: column; text-align: left; }
.mit-wa-inline-status { font-size: 12px; opacity: 0.9; }

/* Respect reduced-motion preference across every style. */
@media (prefers-reduced-motion: reduce) {
	.mit-wa-button { transition: none; }
}

/* Notification Badge — shown on the icon of every floating style (not the
 * Inline Widget, which has no persistent icon). */
.mit-wa-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ff3b30;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-sizing: border-box;
	border: 2px solid #fff;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.mit-wa-badge-hidden {
	opacity: 0;
	transform: scale(0.5);
	pointer-events: none;
}
.mit-wa-badge-pulse {
	animation: mit-wa-badge-pulse 2s infinite;
}
@keyframes mit-wa-badge-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55); }
	70%  { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
@media (max-width: 782px) {
	.mit-wa-badge {
		min-width: 18px;
		height: 18px;
		font-size: 10px;
		line-height: 18px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mit-wa-badge-pulse { animation: none; }
}

/* Animation — entrance/attention animation applied to the floating widget
 * wrapper via a `.mit-wa-anim-{type}` class (see
 * MIT_WA_Frontend::build_animation_context()). Timing comes from CSS
 * custom properties set inline per-render (--mit-wa-anim-delay,
 * --mit-wa-anim-duration, --mit-wa-anim-iteration) so one keyframe
 * definition per type serves any admin-configured timing. Every rule
 * below is unconditionally disabled under prefers-reduced-motion. */
[class*="mit-wa-anim-"] {
	animation-duration: var(--mit-wa-anim-duration, 1000ms);
	animation-delay: var(--mit-wa-anim-delay, 0s);
	animation-iteration-count: var(--mit-wa-anim-iteration, 1);
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

.mit-wa-anim-bounce           { animation-name: mit-wa-kf-bounce; }
.mit-wa-anim-pulse            { animation-name: mit-wa-kf-pulse; }
.mit-wa-anim-shake            { animation-name: mit-wa-kf-shake; }
.mit-wa-anim-swing            { animation-name: mit-wa-kf-swing; transform-origin: top center; }
.mit-wa-anim-fade-in          { animation-name: mit-wa-kf-fade-in; }
.mit-wa-anim-slide-up         { animation-name: mit-wa-kf-slide-up; }
.mit-wa-anim-slide-down       { animation-name: mit-wa-kf-slide-down; }
.mit-wa-anim-zoom-in          { animation-name: mit-wa-kf-zoom-in; }
.mit-wa-anim-attention-seeker { animation-name: mit-wa-kf-attention-seeker; }

@keyframes mit-wa-kf-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-16px); }
	60% { transform: translateY(-8px); }
}
@keyframes mit-wa-kf-pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}
@keyframes mit-wa-kf-shake {
	0%, 100% { transform: translateX(0); }
	20%  { transform: translateX(-6px); }
	40%  { transform: translateX(6px); }
	60%  { transform: translateX(-4px); }
	80%  { transform: translateX(4px); }
}
@keyframes mit-wa-kf-swing {
	0%   { transform: rotate(0deg); }
	20%  { transform: rotate(12deg); }
	40%  { transform: rotate(-8deg); }
	60%  { transform: rotate(5deg); }
	80%  { transform: rotate(-2deg); }
	100% { transform: rotate(0deg); }
}
@keyframes mit-wa-kf-fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes mit-wa-kf-slide-up {
	0%   { transform: translateY(40px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes mit-wa-kf-slide-down {
	0%   { transform: translateY(-40px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes mit-wa-kf-zoom-in {
	0%   { transform: scale(0.4); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes mit-wa-kf-attention-seeker {
	0%, 100% { transform: scale(1) rotate(0deg); }
	10%      { transform: scale(1.1) rotate(-3deg); }
	20%      { transform: scale(1.15) rotate(3deg); }
	30%      { transform: scale(1.1) rotate(-2deg); }
	40%      { transform: scale(1.05) rotate(2deg); }
	50%      { transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	[class*="mit-wa-anim-"] {
		animation: none !important;
	}
}