/* ==========================================================================
   Cyprus Jobs assistant: the widget.

   It lives on every page of the site, on the redesigned ones and on the old
   theme's dashboards alike, so it brings its own colours and leans on nothing
   outside this file. The colours are the site's (the teal, the night-blue of
   the hero); every class starts with "cjb-" so nothing here can meet a class
   of a page. Only transform and opacity move. Everything stops under
   prefers-reduced-motion.
   ========================================================================== */

#cjg-bot {
	--cjb-ink: #071a2f;
	--cjb-ink2: #0d2742;
	--cjb-teal: #00a896;
	--cjb-teal-d: #00877a;
	--cjb-teal-l: #2dd4bf;
	--cjb-sun: #ffb454;
	--cjb-bg: #f3f6fa;
	--cjb-card: #ffffff;
	--cjb-line: #e1e8f0;
	--cjb-text: #0f1f33;
	--cjb-muted: #5a6b82;
	--cjb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 999998;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cjb-text);
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

#cjg-bot *,
#cjg-bot *::before,
#cjg-bot *::after {
	box-sizing: border-box;
}

#cjg-bot button {
	font-family: inherit;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	-webkit-tap-highlight-color: transparent;
}

#cjg-bot svg {
	display: block;
}

/* An open dialog of the page (the apply form) is not talked over. */
body:has(.modal.is-open) #cjg-bot,
body.modal-open #cjg-bot {
	display: none;
}

/* ------------------------------------------------------------ the button */

.cjb-launch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 60px;
	padding: 0 22px 0 8px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(135deg, #0d2742 0%, #00877a 58%, #00a896 100%);
	box-shadow: 0 12px 30px rgba(0, 135, 122, 0.36), 0 2px 6px rgba(7, 26, 47, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
	transition: transform 0.25s var(--cjb-ease), box-shadow 0.25s var(--cjb-ease), padding 0.35s var(--cjb-ease), gap 0.35s var(--cjb-ease);
}

.cjb-launch:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 38px rgba(0, 135, 122, 0.44), 0 3px 8px rgba(7, 26, 47, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cjb-launch:focus-visible,
.cjb-panel button:focus-visible,
.cjb-panel a:focus-visible {
	outline: 3px solid rgba(45, 212, 191, 0.75);
	outline-offset: 2px;
}

/* A soft ring that breathes until the assistant has been opened once. */
.cjb-fresh .cjb-launch::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.55);
	animation: cjb-ring 2.8s ease-out infinite;
	pointer-events: none;
}

@keyframes cjb-ring {
	0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.5); }
	70%, 100% { box-shadow: 0 0 0 16px rgba(45, 212, 191, 0); }
}

.cjb-mark {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.cjb-mark svg {
	width: 30px;
	height: 30px;
	overflow: visible;
}

/* The mark: a speech bubble with a spark in it, and a second, smaller spark. */
.cjb-i-bubble { fill: #fff; }
.cjb-i-spark { fill: var(--cjb-teal-d); transform-origin: 15px 15px; animation: cjb-twinkle 4.2s ease-in-out infinite; }
.cjb-i-star { fill: var(--cjb-sun); transform-origin: 25.5px 6px; animation: cjb-twinkle 4.2s ease-in-out 0.9s infinite; }

@keyframes cjb-twinkle {
	0%, 62%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
	70% { transform: scale(0.72) rotate(35deg); opacity: 0.7; }
	80% { transform: scale(1.14) rotate(90deg); opacity: 1; }
	90% { transform: scale(1) rotate(90deg); }
}

.cjb-lbl {
	display: block;
	max-width: 240px;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.35s var(--cjb-ease), opacity 0.25s var(--cjb-ease);
}

.cjb-lbl small {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	font-weight: 600;
	opacity: 0.82;
}

/* Rolled up to the mark alone: once the page has been scrolled, and on a phone. */
.cjb-mini .cjb-launch {
	gap: 0;
	padding: 0 8px;
}

.cjb-mini .cjb-lbl {
	max-width: 0;
	opacity: 0;
}

.cjb-dot {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--cjb-sun);
	box-shadow: 0 0 0 3px #0b3b4a;
	transform: scale(0);
	transition: transform 0.3s var(--cjb-ease);
}

.cjb-nudge .cjb-dot {
	transform: scale(1);
}

/* ------------------------------------------------------------ the teaser */

.cjb-teaser {
	position: absolute;
	right: 2px;
	bottom: 74px;
	width: max-content;
	max-width: min(280px, calc(100vw - 44px));
	padding: 12px 38px 12px 14px;
	border-radius: 16px 16px 5px 16px;
	background: var(--cjb-card);
	color: var(--cjb-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: 0 14px 40px rgba(2, 12, 27, 0.22), 0 2px 6px rgba(2, 12, 27, 0.1);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.96);
	transform-origin: 100% 100%;
	pointer-events: none;
	transition: opacity 0.3s var(--cjb-ease), transform 0.3s var(--cjb-ease), visibility 0s linear 0.3s;
}

.cjb-teaser.cjb-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity 0.3s var(--cjb-ease), transform 0.3s var(--cjb-ease);
}

.cjb-teaser button {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cjb-muted);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.cjb-teaser button:hover { background: var(--cjb-bg); }
.cjb-teaser button svg { width: 14px; height: 14px; }

.cjb-open .cjb-teaser { display: none; }

/* -------------------------------------------------------------- the panel */

.cjb-panel {
	position: absolute;
	right: 0;
	bottom: 76px;
	width: 400px;
	max-width: calc(100vw - 32px);
	height: min(672px, calc(100vh - 118px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 24px;
	background: var(--cjb-bg);
	box-shadow: 0 28px 80px rgba(2, 12, 27, 0.36), 0 6px 18px rgba(2, 12, 27, 0.14);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(18px) scale(0.96);
	transform-origin: 100% 100%;
	transition: opacity 0.28s var(--cjb-ease), transform 0.32s var(--cjb-ease), visibility 0s linear 0.32s;
}

.cjb-open .cjb-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity 0.28s var(--cjb-ease), transform 0.32s var(--cjb-ease);
}

.cjb-head {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 14px 16px 16px;
	color: #fff;
	background:
		radial-gradient(130% 160% at 100% 0%, rgba(45, 212, 191, 0.42), transparent 58%),
		radial-gradient(90% 120% at 0% 100%, rgba(56, 189, 248, 0.18), transparent 60%),
		linear-gradient(135deg, #071a2f 0%, #0d2742 62%, #0f4a55 100%);
}

.cjb-head .cjb-mark {
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, 0.12);
}

.cjb-head .cjb-mark svg { width: 28px; height: 28px; }

.cjb-who {
	min-width: 0;
	flex: 1;
}

.cjb-who b {
	display: block;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cjb-who span {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 600;
	opacity: 0.86;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cjb-who i {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
}

.cjb-hbtn {
	flex: none;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.2s;
}

.cjb-hbtn:hover { background: rgba(255, 255, 255, 0.2); }
.cjb-hbtn svg { width: 17px; height: 17px; }

.cjb-body {
	position: relative; /* so a new answer can be scrolled to by its own place in the list */
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scrollbar-width: thin;
	scrollbar-color: #c9d5e2 transparent;
}

/* ------------------------------------------------------------ the welcome */

.cjb-hello h3 {
	margin: 4px 2px 4px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--cjb-ink);
}

.cjb-hello p {
	margin: 0 2px 12px;
	font-size: 13.5px;
	color: var(--cjb-muted);
}

.cjb-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.cjb-tile {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 58px;
	padding: 9px 11px;
	border: 1px solid var(--cjb-line);
	border-radius: 15px;
	background: var(--cjb-card);
	color: var(--cjb-text);
	text-align: left;
	cursor: pointer;
	transition: transform 0.2s var(--cjb-ease), border-color 0.2s, box-shadow 0.2s;
}

.cjb-tile:hover {
	transform: translateY(-2px);
	border-color: var(--cjb-teal);
	box-shadow: 0 8px 20px rgba(7, 26, 47, 0.08);
}

.cjb-tile > span:first-child {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	color: var(--cjb-teal-d);
	background: rgba(0, 168, 150, 0.11);
}

.cjb-tile svg { width: 18px; height: 18px; }

.cjb-tile b {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
}

.cjb-tile small {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.25;
	color: var(--cjb-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cjb-tile > span:last-child { min-width: 0; }

.cjb-sub {
	margin: 11px 2px 5px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a99ad;
}

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

.cjb-msg {
	max-width: 88%;
	padding: 10px 14px;
	font-size: 14.5px;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	animation: cjb-in 0.32s var(--cjb-ease) both;
}

.cjb-msg p { margin: 0; }
.cjb-msg p + p,
.cjb-msg p + ul,
.cjb-msg ul + p { margin-top: 7px; }
.cjb-msg ul { margin: 0; padding: 0 0 0 18px; }
.cjb-msg li { margin: 3px 0; }
.cjb-msg strong { font-weight: 800; }

.cjb-bot {
	align-self: flex-start;
	background: var(--cjb-card);
	border-radius: 18px 18px 18px 6px;
	box-shadow: 0 1px 2px rgba(7, 26, 47, 0.05), 0 2px 10px rgba(7, 26, 47, 0.05);
}

.cjb-me {
	align-self: flex-end;
	color: #fff;
	font-weight: 600;
	background: linear-gradient(135deg, #00877a, #00a896);
	border-radius: 18px 18px 6px 18px;
}

@keyframes cjb-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.cjb-wait {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--cjb-muted);
	font-size: 13px;
	font-weight: 600;
}

.cjb-wait span {
	display: flex;
	gap: 4px;
}

.cjb-wait i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cjb-teal);
	animation: cjb-bob 1.1s ease-in-out infinite;
}

.cjb-wait i:nth-child(2) { animation-delay: 0.15s; }
.cjb-wait i:nth-child(3) { animation-delay: 0.3s; }

@keyframes cjb-bob {
	0%, 60%, 100% { transform: none; opacity: 0.45; }
	30% { transform: translateY(-5px); opacity: 1; }
}

/* -------------------------------------------------------------- vacancies */

.cjb-cards {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.cjb-card {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px 10px 10px;
	border: 1px solid var(--cjb-line);
	border-radius: 15px;
	background: var(--cjb-card);
	color: var(--cjb-text);
	text-decoration: none;
	transition: transform 0.2s var(--cjb-ease), border-color 0.2s, box-shadow 0.2s;
	animation: cjb-in 0.36s var(--cjb-ease) both;
}

.cjb-card:nth-child(2) { animation-delay: 0.05s; }
.cjb-card:nth-child(3) { animation-delay: 0.1s; }
.cjb-card:nth-child(4) { animation-delay: 0.15s; }
.cjb-card:nth-child(5) { animation-delay: 0.2s; }

.cjb-card:hover {
	transform: translateY(-2px);
	border-color: var(--cjb-teal);
	box-shadow: 0 10px 24px rgba(7, 26, 47, 0.1);
	color: var(--cjb-text);
	text-decoration: none;
}

.cjb-logo {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	overflow: hidden;
	font-size: 14px;
	font-weight: 800;
	color: var(--cjb-teal-d);
	background: rgba(0, 168, 150, 0.11);
}

.cjb-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

.cjb-card > span:nth-child(2) {
	min-width: 0;
	flex: 1;
}

.cjb-card b {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cjb-ink);
}

.cjb-card small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--cjb-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cjb-new {
	flex: none;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	color: #8a5200;
	background: rgba(255, 180, 84, 0.26);
}

.cjb-go {
	flex: none;
	color: #b6c2d1;
	transition: transform 0.2s var(--cjb-ease), color 0.2s;
}

.cjb-go svg { width: 16px; height: 16px; }
.cjb-card:hover .cjb-go { color: var(--cjb-teal-d); transform: translateX(3px); }

/* ------------------------------------------------------ buttons and chips */

.cjb-row {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* A row that slides sideways instead of wrapping (the towns): one line, whatever the language. */
.cjb-slide {
	flex-wrap: nowrap;
	overflow-x: auto;
	margin: 0 -14px;
	padding: 2px 14px 4px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.cjb-slide::-webkit-scrollbar { display: none; }
.cjb-slide .cjb-pill { flex: none; }

.cjb-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 8px 13px;
	border: 1px solid var(--cjb-line);
	border-radius: 999px;
	background: var(--cjb-card);
	color: var(--cjb-text);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s var(--cjb-ease);
}

.cjb-pill:hover {
	border-color: var(--cjb-teal);
	color: var(--cjb-teal-d);
	text-decoration: none;
	transform: translateY(-1px);
}

.cjb-pill svg { flex: none; width: 13px; height: 13px; }

/* A page of the site, or "see all": the one that leads somewhere. */
.cjb-pill.cjb-lead {
	border-color: transparent;
	color: #fff;
	background: linear-gradient(135deg, #00877a, #00a896);
	box-shadow: 0 6px 16px rgba(0, 135, 122, 0.26);
}

.cjb-pill.cjb-lead:hover { color: #fff; box-shadow: 0 8px 20px rgba(0, 135, 122, 0.34); }

.cjb-pill.cjb-page {
	border-color: rgba(0, 168, 150, 0.35);
	color: var(--cjb-teal-d);
	background: rgba(0, 168, 150, 0.08);
}

/* ------------------------------------------------------------- the salary */

.cjb-pay {
	align-self: stretch;
	padding: 6px 14px;
	border: 1px solid var(--cjb-line);
	border-radius: 16px;
	background: var(--cjb-card);
	animation: cjb-in 0.36s var(--cjb-ease) both;
}

.cjb-pay div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 13.5px;
	color: var(--cjb-muted);
	border-bottom: 1px dashed var(--cjb-line);
}

.cjb-pay div b { font-weight: 700; color: var(--cjb-text); }
.cjb-pay div:first-child { color: var(--cjb-text); }

.cjb-pay div:last-child {
	border-bottom: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--cjb-ink);
}

.cjb-pay div:last-child b { font-weight: 800; color: var(--cjb-teal-d); font-size: 17px; }

/* --------------------------------------------------------------- feedback */

.cjb-fb {
	display: flex;
	gap: 2px;
	margin-top: -4px;
}

.cjb-fb button {
	width: 28px;
	height: 26px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #a3b1c2;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: color 0.2s, background 0.2s;
}

.cjb-fb button:hover { color: var(--cjb-teal-d); background: rgba(0, 168, 150, 0.1); }
.cjb-fb button.cjb-yes { color: var(--cjb-teal-d); }
.cjb-fb button[disabled] { cursor: default; }
.cjb-fb svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------- the footer */

.cjb-foot {
	flex: none;
	padding: 10px 12px 8px;
	background: var(--cjb-card);
	border-top: 1px solid var(--cjb-line);
}

.cjb-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 5px 5px 5px 14px;
	border: 1.5px solid var(--cjb-line);
	border-radius: 22px;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.cjb-form:focus-within {
	border-color: var(--cjb-teal);
	box-shadow: 0 0 0 4px rgba(0, 168, 150, 0.13);
}

#cjg-bot .cjb-form textarea {
	flex: 1;
	min-width: 0;
	min-height: 0;
	height: 36px;
	max-height: 104px;
	margin: 0;
	padding: 8px 0;
	border: 0;
	outline: 0;
	resize: none;
	background: transparent;
	box-shadow: none;
	color: var(--cjb-text);
	font: inherit;
	font-size: 15px;
	line-height: 1.35;
}

/* One line, whatever its length (a hint that wraps is cut by the box), and dark enough to read. */
#cjg-bot .cjb-form textarea::placeholder { color: var(--cjb-muted); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cjb-send {
	flex: none;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #00877a, #00a896);
	transition: transform 0.2s var(--cjb-ease), opacity 0.2s;
}

.cjb-send:hover { transform: scale(1.07); }
.cjb-send[disabled] { opacity: 0.4; cursor: default; transform: none; }
.cjb-send svg { width: 17px; height: 17px; }

.cjb-note {
	margin: 7px 4px 0;
	font-size: 11px;
	line-height: 1.35;
	text-align: center;
	color: var(--cjb-muted);
}

.cjb-note b { color: var(--cjb-text); }

/* ------------------------------------------------------------- on a phone */

@media (max-width: 640px) {
	#cjg-bot {
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}

	.cjb-launch {
		height: 58px;
	}

	.cjb-panel {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		height: 100dvh;
		border-radius: 0;
		transform: translateY(100%);
		transform-origin: 50% 100%;
	}

	#cjg-bot .cjb-form textarea { font-size: 16px; }
	.cjb-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
	.cjb-foot { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
	.cjb-open .cjb-launch { visibility: hidden; }
	.cjb-msg { max-width: 92%; }

	/* The page behind a full-screen sheet does not scroll with it. */
	html.cjb-lock,
	html.cjb-lock body {
		overflow: hidden !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cjg-bot *,
	#cjg-bot *::before,
	#cjg-bot *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	#cjg-bot { display: none !important; }
}