/**
 * plugins/generic/jaimsHelpDesk/css/jaimsHelpDesk.css
 *
 * JAIMS HelpDesk - public widget styles.
 * No external font and no external asset: the widget NAMES Inter, which the JAIMS
 * theme already loads, and degrades to the system stack anywhere it is absent.
 * It never fetches a font itself.
 * Green carries the chrome and the copy; a brighter green marks the section labels.
 * The journal itself is navy and medical blue, so a green assistant reads as a
 * distinct thing sitting on the page rather than part of the masthead.
 * Every value below was chosen against WCAG contrast, not by eye: white on the
 * accent measures 7.3:1, so the header and launcher copy stay legible at 14px.
 * All sizing is in px on purpose - the JAIMS theme resets html{font-size:12.7px},
 * and rem units here would silently shrink the panel with it.
 */

.jaims-hd {
	/* One green carries the whole widget: chrome, controls and copy. The admin can
	   override it through the Accent colour setting, which drives --jaimshd-accent;
	   the JS derives the hover shade from whatever is set, so the two cannot drift. */
	--jaimshd-accent: #10633D;          /* header, launcher, send button - 7.31:1 on white */
	--jaimshd-accent-dark: #0B4128;     /* hover / focus - 11.66:1 on white */
	--jaimshd-oa: #157347;              /* section labels - 5.48:1 on the panel */

	/* 11.4:1 on the panel tint and 12.2:1 on a white bubble, so the copy stays
	   comfortably legible at 14px. */
	--jaimshd-text: #0E3D28;
	--jaimshd-text-soft: #33604A;       /* the answer's source question, meta lines - 6.7:1 */
	--jaimshd-muted: #5A7064;           /* disclaimer, labels - 4.98:1 on the panel */

	--jaimshd-border: #D6E3DA;          /* green-grey, to sit with the copy */
	--jaimshd-bot-bg: #FFFFFF;          /* bot bubble - white, sits on the tint */
	--jaimshd-user-bg: #10633D;         /* visitor bubble - solid green */
	--jaimshd-panel-bg: #F4F8F5;        /* the window itself - the faintest green tint */
	--jaimshd-radius: 8px;              /* a shade softer than the theme's 6px, as a floating card */

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

/* ---------- Isolation from the journal's global rules ----------
   The JAIMS theme justifies the About column and every abstract, and forces a number
   of !important layout rules. These guards keep all of that from reaching inside the
   panel, where justified text in a ~380px column looks broken. */

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

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

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

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

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

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

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

.jaims-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
	   same treatment as the JSSP build. The fill gives the control an edge and a
	   shadow so it reads as a button, and stays 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(--jaimshd-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;
}

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

.jaims-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 jaims-hd-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

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

.jaims-hd__launcher:hover {
	background: var(--jaimshd-accent-dark);
	color: #fff;
	animation-play-state: paused;
	transform: translateY(-3px);
	box-shadow: 0 7px 18px rgba(12, 41, 66, .28);
}
.jaims-hd__launcher:focus-visible,
.jaims-hd__launcher:focus { outline: 3px solid var(--jaimshd-accent-dark); outline-offset: 3px; }
.jaims-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 ------------------------------------------------------------- */

.jaims-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(--jaimshd-panel-bg);
	border: 1px solid var(--jaimshd-border);
	box-shadow: 0 18px 48px rgba(18, 57, 95, .20), 0 2px 6px rgba(18, 57, 95, .08);
	overflow: hidden;
	border-radius: var(--jaimshd-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
	overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.jaims-hd__chip {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 7px 12px;
	border: 1px solid var(--jaimshd-border);
	border-radius: 999px;
	background: #fff;
	color: var(--jaimshd-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;
}

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

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

.jaims-hd__contact:hover { background: var(--jaimshd-accent-dark); }

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

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

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

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

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

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

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

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

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

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

	.jaims-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);
	}

	.jaims-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. */
	.jaims-hd__launcher { width: 38px; height: 38px; padding: 0; gap: 0; }
	.jaims-hd__panel { bottom: 78px; }
}

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

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

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

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

.jaims-hd__input::placeholder { color: var(--jaimshd-muted); opacity: 1; }

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

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

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