/**
 * plugins/generic/jsspHelpDesk/css/jsspHelpDesk.css
 *
 * JSSP HelpDesk - public widget styles.
 * No external font, no external asset. Noto Sans, matching the JSSP journal theme.
 * The widget is blue throughout - #12395F from the launcher icon to the copy inside
 * the panel - so it reads as a distinct assistant rather than part of the page.
 */

.jssp-hd {
	/* One blue carries the whole widget: chrome, controls and copy. The admin can
	   override it through the Accent colour setting, which drives --jssphd-accent. */
	--jssphd-accent: #12395F;          /* header, launcher, send button - same blue as the copy */
	--jssphd-accent-dark: #0C2942;     /* hover / focus */
	--jssphd-oa: #12395F;              /* section labels, in the panel blue */

	/* #12395F measures 11.0:1 on the panel and 11.8:1 on a white bubble, so the
	   copy stays comfortably legible at 14px. */
	--jssphd-text: #12395F;
	--jssphd-text-soft: #2C5B85;       /* the answer's source question, meta lines */
	--jssphd-muted: #527088;           /* disclaimer, labels - 4.84:1 on the panel */

	--jssphd-border: #D8E2EA;          /* cool border to sit with the blue text */
	--jssphd-bot-bg: #FFFFFF;          /* bot bubble - white, sits on the tint */
	--jssphd-user-bg: #12395F;         /* visitor bubble - solid blue */
	--jssphd-panel-bg: #F3F7FA;        /* the window itself, faint cool tint */
	--jssphd-radius: 10px;             /* softer than the theme's 4px, as a floating card */

	position: fixed;
	bottom: 20px;
	z-index: 99990;
	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var(--jssphd-text);
}

/* ---------- Isolation from the journal's global rules ----------
   The JSSP stylesheet justifies <p> inside most containers and applies a number of
   !important layout rules. These guards keep those from reaching inside the panel,
   where justified text in a ~380px column looks broken. */

.jssp-hd,
.jssp-hd * {
	box-sizing: border-box;
}

.jssp-hd p,
.jssp-hd li,
.jssp-hd div,
.jssp-hd .jssp-hd__answer,
.jssp-hd .jssp-hd__bubble {
	text-align: left !important;
	font-style: normal !important;
	letter-spacing: normal !important;
}

.jssp-hd .jssp-hd__title::after,
.jssp-hd .jssp-hd__title::before {
	content: none !important;
}

.jssp-hd ul,
.jssp-hd ol {
	list-style: initial;
}

.jssp-hd ol {
	list-style: decimal;
}

.jssp-hd--bottom-right { right: 20px; }
.jssp-hd--bottom-left { left: 20px; }

/* Launcher ---------------------------------------------------------- */

.jssp-hd__launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	/* A 38px disc filled with the accent colour, carrying a white head. The
	   fill gives the control an edge and a shadow so it reads as a button, and
	   keeps it legible over any background. The drawn size is 38px; an
	   invisible 3px inset on ::after widens the hit area to 44px. */
	position: relative;
	width: 38px;
	height: 38px;
	padding: 0;
	flex: 0 0 38px;
	border: 0;
	border-radius: 50%;
	background: var(--jssphd-accent);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(12, 41, 66, .22);
	transition: transform .15s ease, color .15s ease, box-shadow .15s ease;
}

.jssp-hd__launcher::after {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	bottom: -3px;
	left: -3px;
}

.jssp-hd__launcher-label {
	/* Hidden visually, still announced. The script also sets aria-label, so the
	   control keeps its name either way. */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* A slow, small rise and fall so the launcher reads as floating rather than
   stuck to the corner. Paused on hover so the hover lift is not fought by it. */
@keyframes jssp-hd-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

.jssp-hd__launcher {
	animation: jssp-hd-float 3.4s ease-in-out infinite;
	will-change: transform;
}

.jssp-hd__launcher:hover {
	background: var(--jssphd-accent-dark);
	color: #fff;
	animation-play-state: paused;
	transform: translateY(-3px);
	box-shadow: 0 7px 18px rgba(12, 41, 66, .28);
}
.jssp-hd__launcher:focus-visible,
.jssp-hd__launcher:focus { outline: 3px solid var(--jssphd-accent-dark); outline-offset: 3px; }
.jssp-hd__launcher-icon {
	/* Robot head, drawn inline as a mask rather than a glyph or an image file:
	   it needs no external request, and background:currentColor means the icon
	   follows the launcher's own colour if the accent setting is changed.
	   Done in CSS rather than JS so a browser holding a stale copy of the
	   script still shows it. */
	width: 23px;
	height: 23px;
	flex: 0 0 23px;
	font-size: 0;                 /* hides the emoji the script writes */
	line-height: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%222.6%22%20r%3D%221.1%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%203.7v2.1%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225.8%22%20width%3D%2216%22%20height%3D%2212.4%22%20rx%3D%223.2%22%2F%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%2211%22%20r%3D%221.35%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2214.8%22%20cy%3D%2211%22%20r%3D%221.35%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M9.4%2015h5.2%22%2F%3E%3Cpath%20d%3D%22M2.1%2010.4v3.2M21.9%2010.4v3.2%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%222.6%22%20r%3D%221.1%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%203.7v2.1%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225.8%22%20width%3D%2216%22%20height%3D%2212.4%22%20rx%3D%223.2%22%2F%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%2211%22%20r%3D%221.35%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2214.8%22%20cy%3D%2211%22%20r%3D%221.35%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M9.4%2015h5.2%22%2F%3E%3Cpath%20d%3D%22M2.1%2010.4v3.2M21.9%2010.4v3.2%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Panel ------------------------------------------------------------- */

.jssp-hd__panel {
	position: absolute;
	bottom: 68px;
	width: 380px;
	max-width: calc(100vw - 32px);
	max-height: min(560px, calc(100vh - 120px));
	display: flex;
	flex-direction: column;
	background: var(--jssphd-panel-bg);
	border: 1px solid var(--jssphd-border);
	box-shadow: 0 18px 48px rgba(18, 57, 95, .20), 0 2px 6px rgba(18, 57, 95, .08);
	overflow: hidden;
	border-radius: var(--jssphd-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
	overflow: hidden;
}

.jssp-hd--bottom-right .jssp-hd__panel { right: 0; }
.jssp-hd--bottom-left .jssp-hd__panel { left: 0; }
.jssp-hd__panel[hidden] { display: none; }

.jssp-hd__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 16px;
	background: var(--jssphd-accent);
	color: #fff;
	border-bottom: 3px solid rgba(255, 255, 255, .18);
}

.jssp-hd__header-text { display: flex; flex-direction: column; min-width: 0; }
.jssp-hd__title { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.jssp-hd__subtitle { font-size: 11.5px; opacity: .88; margin-top: 1px; }

.jssp-hd__close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: var(--jssphd-radius);
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.jssp-hd__close:hover { background: rgba(255, 255, 255, .3); }
.jssp-hd__close:focus-visible,
.jssp-hd__close:focus { outline: 2px solid #fff; outline-offset: 2px; }

/* Log --------------------------------------------------------------- */

.jssp-hd__log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px;
	background: var(--jssphd-panel-bg);
}

.jssp-hd__log:focus-visible { outline: 2px solid var(--jssphd-accent); outline-offset: -2px; }

.jssp-hd__msg { display: flex; margin-bottom: 10px; }
.jssp-hd__msg--bot { justify-content: flex-start; }
.jssp-hd__msg--user { justify-content: flex-end; }

.jssp-hd__bubble {
	max-width: 88%;
	padding: 12px 14px;
	border-radius: var(--jssphd-radius);
	background: var(--jssphd-bot-bg);
	border: 1px solid var(--jssphd-border);
	box-shadow: 0 1px 2px rgba(18, 57, 95, .06);
	color: var(--jssphd-text);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.jssp-hd__msg--user .jssp-hd__bubble {
	background: var(--jssphd-user-bg);
	border-color: var(--jssphd-user-bg);
	color: #fff;
}

.jssp-hd__answer-q {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--jssphd-border);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--jssphd-text-soft);
}
.jssp-hd__answer p { margin: 0 0 8px; }
.jssp-hd__answer p:last-child { margin-bottom: 0; }
.jssp-hd__answer ul,
.jssp-hd__answer ol { margin: 0 0 8px; padding-left: 20px; }
.jssp-hd__answer a { color: var(--jssphd-text-soft); text-decoration: underline; }

/* Chips ------------------------------------------------------------- */

.jssp-hd__chips { margin: 0 0 12px; }
.jssp-hd__chips-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .9px;
	font-size: 10.5px;
	color: var(--jssphd-muted);
	margin-bottom: 8px;
}

.jssp-hd__chip {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 7px 12px;
	border: 1px solid var(--jssphd-border);
	border-radius: 999px;
	background: #fff;
	color: var(--jssphd-text);
	font-size: 13px;
	line-height: 1.4;
	transition: background-color .14s, border-color .14s, color .14s;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
}

.jssp-hd__chip:hover { background: var(--jssphd-text); border-color: var(--jssphd-text); color: #fff; }
.jssp-hd__chip:focus-visible,
.jssp-hd__chip:focus { outline: 2px solid var(--jssphd-text-soft); outline-offset: 2px; }

.jssp-hd__contact {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--jssphd-radius);
	background: var(--jssphd-accent);
	color: #fff !important;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
}

.jssp-hd__contact:hover { background: var(--jssphd-accent-dark); }

/* Footer ------------------------------------------------------------ */

.jssp-hd__footer {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--jssphd-border);
	background: #fff;
}

.jssp-hd__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--jssphd-border);
	border-radius: 999px;
	font-size: 14px;
	font-family: inherit;
	color: var(--jssphd-text);
	background: var(--jssphd-panel-bg);
}

.jssp-hd__input:focus { border-color: var(--jssphd-accent); outline: 2px solid var(--jssphd-accent); outline-offset: 1px; }

.jssp-hd__send {
	flex: 0 0 auto;
	width: 42px;
	border: 0;
	border-radius: var(--jssphd-radius);
	background: var(--jssphd-accent);
	color: #fff;
	font-size: 17px;
	cursor: pointer;
}

.jssp-hd__send:hover { background: var(--jssphd-accent-dark); }
.jssp-hd__send:disabled { opacity: .55; cursor: default; }
.jssp-hd__send:focus-visible,
.jssp-hd__send:focus { outline: 2px solid var(--jssphd-accent-dark); outline-offset: 2px; }

.jssp-hd__disclaimer {
	margin: 0;
	padding: 8px 12px 10px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--jssphd-muted);
	background: var(--jssphd-bot-bg);
	border-top: 1px solid var(--jssphd-border);
}

.jssp-hd__disclaimer[hidden] { display: none; }

/* Mobile ------------------------------------------------------------ */

@media (max-width: 520px) {
	.jssp-hd { bottom: 14px; }
	.jssp-hd--bottom-right { right: 14px; }
	.jssp-hd--bottom-left { left: 14px; }

	.jssp-hd__panel {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: 84px;
		width: auto;
		max-width: none;
		max-height: calc(100vh - 130px);
		max-height: calc(100dvh - 130px);
	}

	.jssp-hd__input { font-size: 16px; } /* prevents iOS zoom-on-focus */

	/* Icon-only: keep it a circle at every width rather than the old pill sizing. */
	.jssp-hd__launcher { width: 38px; height: 38px; padding: 0; gap: 0; }
	.jssp-hd__panel { bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
	.jssp-hd__launcher { transition: none; animation: none; }
}

@media (prefers-contrast: more) {
	.jssp-hd__bubble { border-color: #000; }
}

/* ---- restyle: focus, send button and disclaimer -------------------- */

.jssp-hd__input:focus {
	outline: none;
	border-color: var(--jssphd-text-soft);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(18, 57, 95, .12);
}

.jssp-hd__input::placeholder { color: var(--jssphd-muted); opacity: 1; }

.jssp-hd__send { border-radius: 999px; width: 40px; }

.jssp-hd__disclaimer {
	margin: 0;
	padding: 9px 14px 11px;
	border-top: 1px solid var(--jssphd-border);
	background: var(--jssphd-panel-bg);
	font-size: 11px;
	line-height: 1.45;
	color: var(--jssphd-muted);
}

/* Every run of copy inside the panel is blue; the green is chrome only. */
.jssp-hd__log,
.jssp-hd__bubble,
.jssp-hd__answer,
.jssp-hd__msg--bot .jssp-hd__bubble { color: var(--jssphd-text); }