/**
 * PayAngel AI Chat — widget styles.
 * Brand: Sora only · Hero Green #62AC3C · Teal #02888B · Navy #222F40 ·
 * Lime #ABD718 (primary CTA fill, Navy text) · cards 12px · inputs 8px ·
 * fully-rounded pills. Scoped under .pa-chat-* so Elementor/theme CSS
 * doesn't clash.
 */

#payangel-chat-root,
.pa-chat-inline {
	--pa-green: #62AC3C;
	--pa-teal: #02888B;
	--pa-navy: #222F40;
	--pa-accent: #ABD718;
	--pa-white: #FFFFFF;
	--pa-light-bg: #F5F8F2;
	--pa-border: #E6EAE3;
	--pa-font: 'Sora', 'Helvetica Neue', Arial, sans-serif;

	font-family: var(--pa-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--pa-navy);
	box-sizing: border-box;
}

#payangel-chat-root *,
.pa-chat-inline * {
	box-sizing: border-box;
	font-family: inherit;
}

/* ------------------------------------------------------------------ *
 * Floating bubble
 * ------------------------------------------------------------------ */
.pa-chat-floating {
	position: fixed;
	z-index: 99990;
}

.pa-chat-bubble-btn {
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 9999px;
	background: var(--pa-green);
	color: var(--pa-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 180ms ease, background 180ms ease;
	padding: 0;
}

.pa-chat-bubble-btn:hover,
.pa-chat-bubble-btn:focus-visible {
	background: var(--pa-navy);
	transform: scale(1.06);
}

/* ------------------------------------------------------------------ *
 * Panel
 * ------------------------------------------------------------------ */
.pa-chat-panel {
	display: none;
	flex-direction: column;
	width: 372px;
	max-width: calc(100vw - 32px);
	height: 540px;
	max-height: calc(100vh - 120px);
	background: var(--pa-white);
	border: 1px solid var(--pa-border);
	border-radius: 12px;
	overflow: hidden;
}

.pa-chat-floating .pa-chat-panel {
	position: absolute;
	bottom: 74px;
}

.pa-chat-right .pa-chat-panel { right: 0; }
.pa-chat-left  .pa-chat-panel { left: 0; }

.pa-chat-open .pa-chat-panel {
	display: flex;
}

/* Inline (shortcode) variant: always visible, with a definite height of its
   own — themes/builders rarely size the parent, and relying on height:100%
   there resolves to auto, so the panel would grow with every message and
   lengthen the page. A fixed, viewport-based height keeps the chat in place
   and lets the messages area scroll internally. A shortcode height="…"
   attribute overrides via inline style. */
.pa-chat-inline {
	width: 100%;
	height: clamp(480px, 70vh, 760px);
}

.pa-chat-panel-inline {
	display: flex;
	position: static;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Header — Navy with reversed white logo
 * ------------------------------------------------------------------ */
.pa-chat-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--pa-navy);
	color: var(--pa-white);
	flex-shrink: 0;
}

.pa-chat-title {
	font-weight: 600;
	font-size: 15px;
	color: var(--pa-white);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pa-chat-close {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 4px;
	line-height: 0;
	border-radius: 9999px;
	transition: background 180ms ease;
}

.pa-chat-close:hover,
.pa-chat-close:focus-visible {
	background: rgba(255, 255, 255, 0.15);
}

/* ------------------------------------------------------------------ *
 * Messages
 * ------------------------------------------------------------------ */
.pa-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: var(--pa-light-bg);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pa-chat-msg {
	display: flex;
}

.pa-chat-msg-user {
	justify-content: flex-end;
}

.pa-chat-bubble {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.55;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.pa-chat-msg-assistant .pa-chat-bubble {
	background: var(--pa-white);
	color: var(--pa-navy);
	border: 1px solid var(--pa-border);
	border-bottom-left-radius: 4px;
}

.pa-chat-msg-user .pa-chat-bubble {
	background: var(--pa-teal);
	color: var(--pa-white);
	border-bottom-right-radius: 4px;
}

/* Links inside assistant answers. !important beats theme-wide `a` rules. */
.pa-chat-msg-assistant .pa-chat-bubble a {
	color: var(--pa-teal) !important;
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.pa-chat-msg-assistant .pa-chat-bubble a:hover,
.pa-chat-msg-assistant .pa-chat-bubble a:focus-visible {
	color: var(--pa-navy) !important;
}

/* Typing indicator */
.pa-chat-typing {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	min-height: 20px;
}

.pa-chat-typing span {
	width: 7px;
	height: 7px;
	border-radius: 9999px;
	background: var(--pa-green);
	animation: pa-chat-blink 1.2s infinite ease-in-out;
}

.pa-chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.pa-chat-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes pa-chat-blink {
	0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
	35%           { opacity: 1;    transform: translateY(-3px); }
}

/* Handoff offer button — secondary action, Hero Green outline pill */
.pa-chat-handoff-offer {
	display: flex;
	justify-content: center;
	padding: 2px 0;
}

.pa-chat-handoff-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--pa-accent);
	color: var(--pa-navy);
	border: none;
	border-radius: 9999px;
	padding: 9px 18px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease;
}

.pa-chat-handoff-btn:hover,
.pa-chat-handoff-btn:focus-visible {
	background: var(--pa-navy);
	color: var(--pa-white);
}

.pa-chat-handoff-btn:hover svg,
.pa-chat-handoff-btn:focus-visible svg {
	stroke: var(--pa-white);
}

/* ------------------------------------------------------------------ *
 * Disclosure line ("chatting with an AI")
 * ------------------------------------------------------------------ */
.pa-chat-disclosure {
	padding: 8px 16px;
	font-size: 11px;
	color: rgba(34, 47, 64, 0.6);
	background: var(--pa-white);
	border-top: 1px solid var(--pa-border);
	flex-shrink: 0;
}

.pa-chat-human-link {
	background: none;
	border: none;
	padding: 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--pa-teal);
	cursor: pointer;
	text-decoration: underline;
}

.pa-chat-human-link:hover {
	color: var(--pa-navy);
}

/* ------------------------------------------------------------------ *
 * Input row — Lime pill send button (primary CTA)
 * ------------------------------------------------------------------ */
.pa-chat-form {
	display: flex;
	gap: 8px;
	padding: 12px 16px 16px;
	background: var(--pa-white);
	flex-shrink: 0;
	margin: 0;
}

.pa-chat-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.pa-chat-input {
	flex: 1;
	border: 1.5px solid var(--pa-border);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
	color: var(--pa-navy);
	background: var(--pa-white);
	outline: none;
	transition: border-color 180ms ease;
	min-width: 0;
}

.pa-chat-input:focus {
	border-color: var(--pa-green);
	box-shadow: none;
}

.pa-chat-send {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: none;
	border-radius: 9999px;
	background: var(--pa-accent);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 180ms ease;
	padding: 0;
}

.pa-chat-send svg {
	stroke: var(--pa-navy);
	transition: stroke 180ms ease;
}

.pa-chat-send:hover:not(:disabled),
.pa-chat-send:focus-visible:not(:disabled) {
	background: var(--pa-navy);
}

.pa-chat-send:hover:not(:disabled) svg,
.pa-chat-send:focus-visible:not(:disabled) svg {
	stroke: var(--pa-white);
}

.pa-chat-send:disabled {
	opacity: 0.55;
	cursor: default;
}

/* ------------------------------------------------------------------ *
 * Theme / Elementor armor
 * Themes ship broad rules like `.elementor img { height: auto }` and
 * `button { background: …; border: … }` that outrank our classes. The
 * load-bearing properties below carry !important so the widget renders
 * identically on any theme.
 * ------------------------------------------------------------------ */
#payangel-chat-root button,
.pa-chat-inline button {
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	outline-color: #62AC3C;
	font-family: 'Sora', 'Helvetica Neue', Arial, sans-serif !important;
}

#payangel-chat-root .pa-chat-bubble-btn {
	background: #62AC3C !important;
	border: none !important;
	border-radius: 9999px !important;
	padding: 0 !important;
	width: 60px !important;
	height: 60px !important;
	min-height: 0 !important;
	line-height: 0 !important;
}

#payangel-chat-root .pa-chat-bubble-btn:hover,
#payangel-chat-root .pa-chat-bubble-btn:focus-visible {
	background: #222F40 !important;
}

#payangel-chat-root .pa-chat-close,
.pa-chat-inline .pa-chat-close {
	background: transparent !important;
	border: none !important;
	padding: 4px !important;
	margin: 0 !important;
	border-radius: 9999px !important;
	min-height: 0 !important;
	line-height: 0 !important;
}

#payangel-chat-root .pa-chat-send,
.pa-chat-inline .pa-chat-send {
	background: #ABD718 !important;
	border: none !important;
	border-radius: 9999px !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	line-height: 0 !important;
}

#payangel-chat-root .pa-chat-send:hover:not(:disabled),
.pa-chat-inline .pa-chat-send:hover:not(:disabled),
#payangel-chat-root .pa-chat-send:focus-visible:not(:disabled),
.pa-chat-inline .pa-chat-send:focus-visible:not(:disabled) {
	background: #222F40 !important;
}

#payangel-chat-root .pa-chat-human-link,
.pa-chat-inline .pa-chat-human-link {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	display: inline !important;
	width: auto !important;
	min-height: 0 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: inherit !important;
	color: #02888B !important;
	text-decoration: underline !important;
}

#payangel-chat-root .pa-chat-human-link:hover,
.pa-chat-inline .pa-chat-human-link:hover {
	color: #222F40 !important;
	background: none !important;
}

#payangel-chat-root .pa-chat-handoff-btn,
.pa-chat-inline .pa-chat-handoff-btn {
	background: #ABD718 !important;
	color: #222F40 !important;
	border: none !important;
	border-radius: 9999px !important;
	padding: 9px 18px !important;
	font-size: 13px !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
}

#payangel-chat-root .pa-chat-handoff-btn:hover,
.pa-chat-inline .pa-chat-handoff-btn:hover,
#payangel-chat-root .pa-chat-handoff-btn:focus-visible,
.pa-chat-inline .pa-chat-handoff-btn:focus-visible {
	background: #222F40 !important;
	color: #FFFFFF !important;
}

#payangel-chat-root .pa-chat-input,
.pa-chat-inline .pa-chat-input {
	background: #FFFFFF !important;
	border: 1.5px solid #E6EAE3 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
	height: 44px !important;
	color: #222F40 !important;
	box-shadow: none !important;
	font-family: 'Sora', 'Helvetica Neue', Arial, sans-serif !important;
}

#payangel-chat-root .pa-chat-input:focus,
.pa-chat-inline .pa-chat-input:focus {
	border-color: #62AC3C !important;
	box-shadow: none !important;
	outline: none !important;
}

/* ------------------------------------------------------------------ *
 * Small screens: full-width sheet
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
	.pa-chat-floating .pa-chat-panel {
		position: fixed;
		left: 8px !important;
		right: 8px !important;
		bottom: 86px;
		width: auto;
		height: min(540px, calc(100vh - 110px));
	}
}