/**
 * AK Chat Plugin — frontend widget styles.
 *
 * Every rule is scoped to #wpchat-widget and preceded by a reset, so the
 * widget renders the same regardless of what the active theme does to bare
 * elements. Values the settings screen can change are exposed as custom
 * properties on :root.
 */

/* ---------------------------------------------------------------- reset */

/*
 * Themes style bare `button`, `input`, `textarea` and `img` elements, and a
 * half-built theme often styles them badly. Everything inside the widget is
 * reset first so the widget looks identical on every site. Rules below this
 * block are more specific, so they always win over the reset.
 */

#wpchat-widget,
#wpchat-widget *,
#wpchat-widget *::before,
#wpchat-widget *::after {
	box-sizing: border-box !important;
}

#wpchat-widget div,
#wpchat-widget span,
#wpchat-widget p,
#wpchat-widget h2,
#wpchat-widget time,
#wpchat-widget label,
#wpchat-widget a,
#wpchat-widget img,
#wpchat-widget svg,
#wpchat-widget video,
#wpchat-widget button,
#wpchat-widget input,
#wpchat-widget textarea {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: inherit !important;
	font: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-align: left !important;
	text-decoration: none !important;
	float: none !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
	vertical-align: baseline !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

#wpchat-widget [hidden] {
	display: none !important;
}
:root {
	--wp-chat-primary: #1e6ef5;
	--wp-chat-secondary: #4aa8ff;
	--wp-chat-on-primary: #ffffff;
	--wp-chat-gradient: linear-gradient(135deg, #1e6ef5 0%, #4aa8ff 100%);
	--wp-chat-surface-from: #e7eeff;
	--wp-chat-surface-to: #e4f4f6;
	--wp-chat-surface-gradient: linear-gradient(160deg, #e7eeff 0%, #e4f4f6 100%);
	--wp-chat-bg: #ffffff;
	--wp-chat-text: #333333;
	--wp-chat-muted: #6b7280;
	--wp-chat-border: #e5e7eb;
	--wp-chat-surface: #f4f5f7;
	--wp-chat-border-radius: 12px;
	--wp-chat-font-size: 14px;
	--wp-chat-width: 350px;
	--wp-chat-height: 450px;
	--wp-chat-button-size: 60px;
	--wp-chat-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
	--wp-chat-z: 999990;
}

/* ---------------------------------------------------------------- shell */

#wpchat-widget {
	position: fixed !important;
	bottom: 20px !important;
	z-index: var(--wp-chat-z) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	float: none !important;
	isolation: isolate !important;
	font-size: var(--wp-chat-font-size) !important;
	line-height: 1.5 !important;
	color: var(--wp-chat-text) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

#wpchat-widget.wpchat--bottom-right {
	right: 20px !important;
}

#wpchat-widget.wpchat--bottom-left {
	left: 20px !important;
}

#wpchat-widget *,
#wpchat-widget *::before,
#wpchat-widget *::after {
	box-sizing: border-box !important;
}

/* --------------------------------------------------------- toggle button */

#wpchat-widget .wpchat-toggle {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--wp-chat-button-size) !important;
	height: var(--wp-chat-button-size) !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--wp-chat-gradient) !important;
	color: var(--wp-chat-on-primary) !important;
	box-shadow: var(--wp-chat-shadow) !important;
	cursor: pointer !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#wpchat-widget.wpchat--bottom-left .wpchat-toggle {
	margin-left: 0 !important;
}

#wpchat-widget .wpchat-toggle:hover {
	transform: translateY(-2px) scale(1.03) !important;
}

#wpchat-widget .wpchat-toggle:focus-visible {
	outline: 3px solid var(--wp-chat-primary) !important;
	outline-offset: 3px !important;
}

#wpchat-widget .wpchat-toggle__icon {
	width: 55% !important;
	height: auto !important;
	display: block !important;
	pointer-events: none !important;
}

#wpchat-widget .wpchat-toggle__close {
	position: absolute !important;
	font-size: 28px !important;
	line-height: 1 !important;
	opacity: 0 !important;
	transform: rotate(-90deg) !important;
	transition: opacity 0.18s ease, transform 0.18s ease !important;
}

#wpchat-widget.is-open .wpchat-toggle__icon {
	opacity: 0 !important;
}

#wpchat-widget.is-open .wpchat-toggle__close {
	opacity: 1 !important;
	transform: rotate(0deg) !important;
}

#wpchat-widget .wpchat-badge {
	position: absolute !important;
	top: -4px !important;
	right: -4px !important;
	min-width: 20px !important;
	height: 20px !important;
	padding: 0 5px !important;
	border-radius: 10px !important;
	background: #dc2626 !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	text-align: center !important;
}

/* ---------------------------------------------------------------- window */

#wpchat-widget .wpchat-window {
	position: absolute !important;
	bottom: calc(var(--wp-chat-button-size) + 14px) !important;
	width: var(--wp-chat-width) !important;
	height: var(--wp-chat-height) !important;
	max-height: calc(100vh - 120px) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	background: var(--wp-chat-bg) !important;
	border: 1px solid var(--wp-chat-border) !important;
	border-radius: var(--wp-chat-border-radius) !important;
	box-shadow: var(--wp-chat-shadow) !important;
	opacity: 0 !important;
	transform: translateY(12px) scale(0.98) !important;
	transition: opacity 0.18s ease, transform 0.18s ease !important;
}

#wpchat-widget.wpchat--bottom-right .wpchat-window {
	right: 0 !important;
}

#wpchat-widget.wpchat--bottom-left .wpchat-window {
	left: 0 !important;
}

#wpchat-widget .wpchat-window[hidden] {
	display: none !important;
}

#wpchat-widget.is-open .wpchat-window {
	opacity: 1 !important;
	transform: translateY(0) scale(1) !important;
}

/* ---------------------------------------------------------------- header */

#wpchat-widget .wpchat-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 12px 14px !important;
	background: var(--wp-chat-gradient) !important;
	color: var(--wp-chat-on-primary) !important;
}

#wpchat-widget .wpchat-header__title {
	margin: 0 !important;
	font-size: calc(var(--wp-chat-font-size) + 1px) !important;
	font-weight: 600 !important;
	color: inherit !important;
}

/* Brand pill: avatar + store name, as in hosted chat widgets. */
#wpchat-widget .wpchat-brand {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0 !important;
	padding: 4px 14px 4px 4px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: #1f2937 !important;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12) !important;
}

#wpchat-widget .wpchat-brand__avatar {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	flex: 0 0 34px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: #fff !important;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}

#wpchat-widget .wpchat-brand__avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

#wpchat-widget .wpchat-brand__text {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}

#wpchat-widget .wpchat-brand__name {
	font-weight: 700 !important;
	font-size: calc(var(--wp-chat-font-size) + 1px) !important;
	line-height: 1.25 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

#wpchat-widget .wpchat-brand__tagline {
	font-size: 11px !important;
	line-height: 1.3 !important;
	color: #6b7280 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Accessible-only heading, kept for screen readers. */
#wpchat-widget .wpchat-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

#wpchat-widget .wpchat-header__close {
	border: 0 !important;
	background: transparent !important;
	color: inherit !important;
	font-size: 22px !important;
	line-height: 1 !important;
	padding: 2px 6px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
}

#wpchat-widget .wpchat-header__close:hover {
	background: rgba(255, 255, 255, 0.18) !important;
}

/* ------------------------------------------------------------------ body */

#wpchat-widget .wpchat-body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	min-height: 0 !important;
}

#wpchat-widget .wpchat-body[hidden] {
	display: none !important;
}

#wpchat-widget .wpchat-messages {
	flex: 1 !important;
	overflow-y: auto !important;
	padding: 14px !important;
	background: var(--wp-chat-surface-gradient) !important;
	scroll-behavior: smooth !important;
	overscroll-behavior: contain !important;
}

/* -------------------------------------------------------------- messages */

#wpchat-widget .wpchat-msg {
	margin-bottom: 12px !important;
	max-width: 82% !important;
	display: flex !important;
	flex-direction: column !important;
}

#wpchat-widget .wpchat-msg--out {
	margin-left: auto !important;
	align-items: flex-end !important;
}

#wpchat-widget .wpchat-msg--in {
	margin-right: auto !important;
	align-items: flex-start !important;
}

#wpchat-widget .wpchat-msg__row {
	display: flex !important;
	align-items: flex-end !important;
	gap: 8px !important;
	min-width: 0 !important;
}

#wpchat-widget .wpchat-msg--out .wpchat-msg__row {
	justify-content: flex-end !important;
}

#wpchat-widget .wpchat-msg__avatar {
	width: 28px !important;
	height: 28px !important;
	flex: 0 0 28px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	background: #fff !important;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14) !important;
}

#wpchat-widget .wpchat-msg--has-avatar .wpchat-msg__meta {
	padding-left: 36px !important;
}

#wpchat-widget .wpchat-msg__bubble {
	padding: 9px 12px !important;
	border-radius: var(--wp-chat-border-radius) !important;
	background: var(--wp-chat-bg) !important;
	border: 1px solid var(--wp-chat-border) !important;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

#wpchat-widget .wpchat-msg--out .wpchat-msg__bubble {
	background: var(--wp-chat-primary) !important;
	border-color: var(--wp-chat-primary) !important;
	color: var(--wp-chat-on-primary) !important;
	border-bottom-right-radius: 4px !important;
}

#wpchat-widget .wpchat-msg--in .wpchat-msg__bubble {
	border-bottom-left-radius: 4px !important;
}

#wpchat-widget .wpchat-msg--system .wpchat-msg__bubble {
	background: #ffffff !important;
	border-color: rgba(30, 110, 245, 0.18) !important;
	color: #1e293b !important;
}

#wpchat-widget .wpchat-msg__text a {
	color: inherit !important;
	text-decoration: underline !important;
}

#wpchat-widget .wpchat-msg__meta {
	margin-top: 3px !important;
	font-size: 11px !important;
	color: var(--wp-chat-muted) !important;
}

#wpchat-widget .wpchat-msg__author {
	font-weight: 600 !important;
}

/* ----------------------------------------------------------- attachments */

#wpchat-widget .wpchat-file {
	display: block !important;
	margin-top: 6px !important;
}

#wpchat-widget .wpchat-file--image img,
#wpchat-widget .wpchat-file--video {
	display: block !important;
	max-width: 100% !important;
	max-height: 190px !important;
	border-radius: 8px !important;
}

#wpchat-widget .wpchat-file--doc {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 9px !important;
	border-radius: 8px !important;
	background: rgba(0, 0, 0, 0.06) !important;
	color: inherit !important;
	text-decoration: none !important;
	font-size: 13px !important;
}

#wpchat-widget .wpchat-msg--out .wpchat-file--doc {
	background: rgba(255, 255, 255, 0.18) !important;
}

#wpchat-widget .wpchat-file__size {
	opacity: 0.75 !important;
	font-size: 11px !important;
}

/* ------------------------------------------------- typing + loading dots */

#wpchat-widget .wpchat-typing,
#wpchat-widget .wpchat-loading {
	display: flex !important;
	gap: 4px !important;
	align-items: center !important;
	padding: 6px 14px !important;
}

#wpchat-widget .wpchat-typing[hidden] {
	display: none !important;
}

#wpchat-widget .wpchat-typing span,
#wpchat-widget .wpchat-loading span {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: var(--wp-chat-muted) !important;
	animation: wpchat-bounce 1.2s infinite ease-in-out !important;
}

#wpchat-widget .wpchat-typing span:nth-child(2),
#wpchat-widget .wpchat-loading span:nth-child(2) {
	animation-delay: 0.15s !important;
}

#wpchat-widget .wpchat-typing span:nth-child(3),
#wpchat-widget .wpchat-loading span:nth-child(3) {
	animation-delay: 0.3s !important;
}

@keyframes wpchat-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* -------------------------------------------------------------- composer */

#wpchat-widget .wpchat-composer {
	position: relative !important;
	padding: 10px 12px 12px !important;
	border-top: 1px solid var(--wp-chat-border) !important;
	background: var(--wp-chat-bg) !important;
}

/* The rounded pill holding the plus button, the input and the send arrow. */
#wpchat-widget .wpchat-bar {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 5px 5px 5px 8px !important;
	border: 1px solid var(--wp-chat-border) !important;
	border-radius: 999px !important;
	background: #fff !important;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#wpchat-widget .wpchat-bar:focus-within {
	border-color: var(--wp-chat-primary) !important;
	box-shadow: 0 2px 14px rgba(15, 23, 42, 0.12) !important;
}

#wpchat-widget .wpchat-plus {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 30px !important;
	width: 30px !important;
	height: 30px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--wp-chat-muted) !important;
	cursor: pointer !important;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

#wpchat-widget .wpchat-plus:hover,
#wpchat-widget .wpchat-plus[aria-expanded="true"] {
	background: var(--wp-chat-surface) !important;
	color: var(--wp-chat-primary) !important;
}

#wpchat-widget .wpchat-plus[aria-expanded="true"] {
	transform: rotate(45deg) !important;
}

#wpchat-widget .wpchat-input {
	flex: 1 !important;
	max-height: 96px !important;
	min-height: 30px !important;
	padding: 5px 2px !important;
	border: 0 !important;
	border-radius: 0 !important;
	font: inherit !important;
	font-size: var(--wp-chat-font-size) !important;
	line-height: 1.45 !important;
	color: var(--wp-chat-text) !important;
	background: transparent !important;
	resize: none !important;
	overflow-y: auto !important;
}

#wpchat-widget .wpchat-input:focus {
	outline: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

#wpchat-widget .wpchat-input::placeholder {
	color: #9ca3af !important;
	opacity: 1 !important;
}

#wpchat-widget .wpchat-send {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 34px !important;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--wp-chat-gradient) !important;
	color: var(--wp-chat-on-primary) !important;
	cursor: pointer !important;
	transition: opacity 0.15s ease, background 0.15s ease !important;
}

#wpchat-widget .wpchat-send svg {
	margin-left: 1px !important;
}

#wpchat-widget .wpchat-send:disabled {
	background: #e5e7eb !important;
	color: #fff !important;
	cursor: default !important;
}

/* Attachment menu that opens from the plus button. */
#wpchat-widget .wpchat-attach-menu {
	position: absolute !important;
	left: 12px !important;
	bottom: calc(100% - 4px) !important;
	z-index: 2 !important;
	min-width: 150px !important;
	padding: 6px !important;
	border: 1px solid var(--wp-chat-border) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16) !important;
}

#wpchat-widget .wpchat-attach-menu[hidden] {
	display: none !important;
}

#wpchat-widget .wpchat-attach-menu__item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 8px 10px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--wp-chat-text) !important;
	font: inherit !important;
	font-size: var(--wp-chat-font-size) !important;
	text-align: left !important;
	cursor: pointer !important;
}

#wpchat-widget .wpchat-attach-menu__item:hover,
#wpchat-widget .wpchat-attach-menu__item:focus-visible {
	background: var(--wp-chat-surface) !important;
}

#wpchat-widget .wpchat-attach-menu__icon {
	font-size: 15px !important;
	line-height: 1 !important;
}

#wpchat-widget .wpchat-file-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* ------------------------------------------------- pre-chat, errors, etc */

#wpchat-widget .wpchat-prechat {
	padding: 16px 14px !important;
	background: var(--wp-chat-surface-gradient) !important;
	flex: 1 !important;
	overflow-y: auto !important;
}

#wpchat-widget .wpchat-prechat[hidden] {
	display: none !important;
}

#wpchat-widget .wpchat-prechat__intro {
	margin: 0 0 12px !important;
	color: var(--wp-chat-muted) !important;
}

#wpchat-widget .wpchat-field {
	display: block !important;
	margin-bottom: 10px !important;
}

#wpchat-widget .wpchat-field span {
	display: block !important;
	margin-bottom: 4px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

#wpchat-widget .wpchat-field input {
	width: 100% !important;
	padding: 9px 10px !important;
	border: 1px solid var(--wp-chat-border) !important;
	border-radius: 8px !important;
	font: inherit !important;
}

#wpchat-widget .wpchat-btn {
	padding: 9px 14px !important;
	border: 0 !important;
	border-radius: 8px !important;
	font: inherit !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

#wpchat-widget .wpchat-btn--primary {
	background: var(--wp-chat-gradient) !important;
	color: var(--wp-chat-on-primary) !important;
	width: 100% !important;
}

#wpchat-widget .wpchat-error {
	margin: 0 !important;
	padding: 8px 14px !important;
	background: #fef2f2 !important;
	color: #b91c1c !important;
	font-size: 13px !important;
}

#wpchat-widget .wpchat-error[hidden] {
	display: none !important;
}

#wpchat-widget .wpchat-pending {
	padding: 0 14px 8px !important;
	font-size: 12px !important;
	color: var(--wp-chat-muted) !important;
}

#wpchat-widget .wpchat-pending[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- rating */

#wpchat-widget .wpchat-rating {
	padding: 10px 14px !important;
	border-top: 1px solid var(--wp-chat-border) !important;
	text-align: center !important;
}

#wpchat-widget .wpchat-rating[hidden] {
	display: none !important;
}

#wpchat-widget .wpchat-rating p {
	margin: 0 0 6px !important;
	font-size: 13px !important;
	color: var(--wp-chat-muted) !important;
}

#wpchat-widget .wpchat-star {
	border: 0 !important;
	background: none !important;
	font-size: 20px !important;
	line-height: 1 !important;
	color: #d1d5db !important;
	cursor: pointer !important;
	padding: 0 2px !important;
}

#wpchat-widget .wpchat-star:hover,
#wpchat-widget .wpchat-star.is-active {
	color: #f59e0b !important;
}

/* ------------------------------------------------------- inline triggers */

.wpchat-inline-trigger.wpchat-inline-trigger {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: auto !important;
	margin: 0 !important;
	padding: 10px 16px !important;
	border: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: 8px !important;
	background: var(--wp-chat-gradient) !important;
	color: var(--wp-chat-on-primary) !important;
	font: inherit !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.wpchat-inline-trigger.wpchat-inline-trigger img {
	width: 20px !important;
	height: 20px !important;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 480px) {
	#wpchat-widget {
		bottom: 14px !important;
	}

	#wpchat-widget.wpchat--bottom-right {
		right: 14px !important;
	}

	#wpchat-widget.wpchat--bottom-left {
		left: 14px !important;
	}

	#wpchat-widget .wpchat-window {
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		border-radius: 0 !important;
		border: 0 !important;
	}

	#wpchat-widget .wpchat-msg {
		max-width: 88% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#wpchat-widget .wpchat-toggle,
	#wpchat-widget .wpchat-window,
	#wpchat-widget .wpchat-messages {
		transition: none !important;
		scroll-behavior: auto !important;
	}

	#wpchat-widget .wpchat-typing span,
	#wpchat-widget .wpchat-loading span {
		animation: none !important;
	}
}