/* Niitoiyis Safe Chat - UI skin: "Hearth"
 *
 * A warm, grounding widget for a crisis line, drawn from the niitoiyis.com
 * palette: espresso ink, cream paper, sand, terracotta, and a clay-red held in
 * reserve for the one safety control (Quick Exit). The feeling to protect is
 * *held, not processed* - so this leans quiet and warm rather than techy.
 *
 * No web fonts by design: a crisis page must never block on a font CDN, and it
 * must leak nothing to a third party. Characterful old-style serifs and a warm
 * humanist body are sourced from the system stack instead.
 *
 * Structure + class names are fixed by the core<->UI contract; everything here is
 * pure skin, so it can be re-themed from the host page via ::part() too.
 */

:host {
	/* Palette - pulled from the niitoiyis.com theme */
	--nsc-paper:      #fdf6ec;  /* cream page             */
	--nsc-paper-2:    #f8edd8;  /* deeper cream (cards)   */
	--nsc-sand:       #efe0c6;  /* staff bubble           */
	--nsc-line:       #e6d6b6;  /* warm hairline          */
	--nsc-ink:        #3d2b0f;  /* espresso text          */
	--nsc-ink-2:      #2c1d0a;  /* darkest brown          */
	--nsc-ink-soft:   #6b5a42;  /* muted taupe            */
	--nsc-terra:      #c4794a;  /* terracotta accent      */
	--nsc-terra-deep: #a85f35;  /* clay (hover/press)     */
	--nsc-clay:       #c2402a;  /* red-clay - SAFETY only */
	--nsc-clay-deep:  #a5321f;
	--nsc-online:     #3fae6d;  /* status light - "connected/available" */
	--nsc-launch:     #34b4d9;  /* launcher blue (matches the site chat button) */
	--nsc-launch-deep:#2890a8;
	--nsc-cream:      #fdf6ec;

	/* Roles */
	--nsc-bg:            var(--nsc-paper);
	--nsc-text:          var(--nsc-ink);
	--nsc-muted:         var(--nsc-ink-soft);
	--nsc-border:        var(--nsc-line);
	--nsc-accent:        var(--nsc-terra);
	--nsc-accent-text:   var(--nsc-cream);
	--nsc-visitor-bg:    var(--nsc-ink);
	--nsc-visitor-text:  var(--nsc-cream);
	--nsc-staff-bg:      var(--nsc-sand);
	--nsc-staff-text:    var(--nsc-ink);
	--nsc-warn-bg:       var(--nsc-paper-2);
	--nsc-warn-text:     #7a3a26;
	--nsc-warn-border:   var(--nsc-clay);

	--nsc-radius: 20px;
	--nsc-shadow: 0 22px 60px -18px rgba(44, 29, 10, 0.55), 0 6px 18px -8px rgba(44, 29, 10, 0.35);

	--nsc-serif: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--nsc-font:  ui-rounded, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

	all: initial;
	font-family: var(--nsc-font);
	-webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
	:host {
		/* Firelight, not fluorescent - keep it warm in the dark. */
		--nsc-paper:      #241a10;
		--nsc-paper-2:    #2e2214;
		--nsc-sand:       #3a2c1a;
		--nsc-line:       #4a3821;
		--nsc-ink:        #f6ead3;
		--nsc-ink-2:      #fdf6ec;
		--nsc-ink-soft:   #c3ab86;
		--nsc-terra:      #d98a56;
		--nsc-terra-deep: #c4794a;
		--nsc-online:     #4cc36a;
		--nsc-launch:     #3fc0e0;
		--nsc-launch-deep:#2890a8;
		--nsc-visitor-bg:   #5a3d1c;
		--nsc-visitor-text: #fdf6ec;
		--nsc-staff-text:   #f6ead3;
		--nsc-warn-bg:      #33230f;
		--nsc-warn-text:    #f0b59a;
	}
}

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

.wrap {
	position: fixed;
	/* Host page can lift the launcher (e.g. above a safety banner) by setting
	   --nsc-launch-bottom on :root; custom props pierce the shadow boundary and
	   survive :host{all:initial}. Falls back to the resting 22px. */
	bottom: var(--nsc-launch-bottom, 22px);
	z-index: 2147483000;
	font-family: var(--nsc-font);
	transition: bottom 0.4s ease;
}
/* Host page can align the launcher's side offset with its own edge controls by
   setting --nsc-launch-side on :root (custom props pierce the shadow boundary).
   Falls back to the resting 22px. */
.wrap.pos-right { right: var(--nsc-launch-side, 22px); }
.wrap.pos-left  { left: var(--nsc-launch-side, 22px); }

/* ------------------------------------------------------------- launcher -- */

.launcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	cursor: pointer;
	padding: 15px 24px 15px 22px;
	border-radius: 999px;
	font-family: var(--nsc-font);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #fff;
	background: linear-gradient(160deg, var(--nsc-launch) 0%, var(--nsc-launch-deep) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
	transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.28s ease, background 0.2s ease;
}
.launcher-icon { display: inline-flex; flex: none; }
.launcher-icon svg { width: 20px; height: 20px; }
/* Hover/focus tooltip above the launcher (hidden while the panel is open). */
.launcher-tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 0;
	white-space: nowrap;
	background: var(--nsc-ink-2);
	color: var(--nsc-cream);
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 14px rgba(44, 29, 10, 0.28);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.launcher:hover .launcher-tip,
.launcher:focus-visible .launcher-tip { opacity: 1; transform: translateY(0); }
.wrap.is-open .launcher-tip { display: none; }
/* Divider between the label and the status dot so the dot reads as its own thing. */
.launcher-text { padding-right: 11px; border-right: 1.5px solid rgba(255, 255, 255, 0.38); }
/* activity dot AFTER the label = status light: white when idle, green when
   connected, green + pulse when a responder message waits with the panel closed.
   The dark ring lifts it off the blue button so it doesn't get lost. */
.launcher::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(15, 63, 82, 0.45);
	flex: none;
}
.launcher:hover {
	transform: translateY(-2px);
	background: linear-gradient(160deg, var(--nsc-launch-deep) 0%, #1f7085 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.launcher:active { transform: translateY(0); }
.launcher:focus-visible { outline: 3px solid var(--nsc-ink); outline-offset: 3px; }

.launcher.is-active::after {
	background: var(--nsc-online);
	box-shadow: 0 0 0 2px rgba(15, 63, 82, 0.45);
}
.launcher.has-unread::after {
	background: var(--nsc-online);
	animation: nsc-ember-pulse 1.6s ease-out infinite;
}
@keyframes nsc-ember-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(63, 174, 109, 0.6); }
	70%  { box-shadow: 0 0 0 8px rgba(63, 174, 109, 0); }
	100% { box-shadow: 0 0 0 0 rgba(63, 174, 109, 0); }
}

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

.panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 430px;
	max-width: calc(100vw - 36px);
	height: 520px;
	max-height: calc(100vh - 44px);
	background: var(--nsc-bg);
	color: var(--nsc-text);
	border: 1px solid var(--nsc-line);
	border-radius: var(--nsc-radius);
	overflow: hidden;
	box-shadow: var(--nsc-shadow);
	margin-bottom: 12px; /* small gap above the launcher, which stays visible (demo-style) */
	transform-origin: bottom right;
	animation: nsc-open 0.42s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
.wrap.pos-left .panel { transform-origin: bottom left; }
.panel[hidden] { display: none; }

/* woven paper grain - a whisper of texture over the whole panel */
.panel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
	.panel::after { mix-blend-mode: screen; opacity: 0.6; }
}

/* Phones: span the full width (anchored bottom), independent of the launcher's
   corner offset, so the panel isn't a narrow floating card on a small screen. */
@media (max-width: 600px) {
	.panel {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: 8px;
		width: auto;
		max-width: none;
		height: 78vh;
		max-height: calc(100vh - 16px);
		margin-bottom: 0;
	}
	/* The panel is a full-width sheet here, so hide the launcher while it's open. */
	.wrap.is-open .launcher { display: none; }
}

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

.header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 16px 15px;
	color: var(--nsc-cream);
	background:
		radial-gradient(130% 180% at 85% -40%, rgba(196, 121, 74, 0.55), transparent 60%),
		linear-gradient(150deg, #4a3418 0%, var(--nsc-ink-2) 100%);
	border-bottom: 2px solid var(--nsc-terra);
	z-index: 1;
}
/* Dark mode: the base gradient ends in var(--nsc-ink-2), which flips to cream in
   dark mode (header faded near-white). Keep it dark near the start colour + soften
   the terracotta glow. MUST come after the base .header rule to win the cascade. */
@media (prefers-color-scheme: dark) {
	.header {
		background:
			radial-gradient(130% 180% at 85% -40%, rgba(196, 121, 74, 0.30), transparent 60%),
			linear-gradient(150deg, #4a3418 0%, #33240f 100%);
	}
}
/* Header identity block: stacked name + tagline. */
.head-info {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}
.head-text { min-width: 0; }
.title {
	min-width: 0;
	font-family: var(--nsc-font);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.01em;
	line-height: 1.15;
	color: var(--nsc-cream);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.subtitle {
	font-family: var(--nsc-font);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.25;
	margin-top: 2px;
	color: rgba(253, 246, 236, 0.72);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Quick Exit - the safety control. Deliberately the only clay-red thing in the
   panel, so a person in distress can find it instantly. */
.exit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--nsc-clay);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 8px 14px;
	font-family: var(--nsc-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 4px 12px -3px rgba(165, 50, 31, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: background 0.18s ease, transform 0.18s ease;
}
.exit::before {
	content: "\2192";      /* -> : "leave now" */
	font-weight: 700;
	transform: translateY(-0.5px);
}
.exit:hover { background: var(--nsc-clay-deep); transform: translateY(-1px); }
.exit:active { transform: translateY(0); }

.close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(253, 246, 236, 0.12);
	color: var(--nsc-cream);
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s ease;
}
.close svg { width: 18px; height: 18px; }
.close:hover { background: rgba(253, 246, 236, 0.22); }
.exit:focus-visible, .close:focus-visible { outline: 2px solid var(--nsc-cream); outline-offset: 2px; }

/* ---------------------------------------------------- intro + status ----- */

.intro {
	padding: 13px 18px;
	font-family: var(--nsc-font);
	font-size: 14.5px;
	font-style: italic;
	line-height: 1.5;
	color: var(--nsc-ink-soft);
	background: var(--nsc-paper-2);
	border-bottom: 1px solid var(--nsc-line);
}
.intro:empty { display: none; }

.status {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nsc-ink-soft);
	min-height: 15px;
}
.status:not(:empty)::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nsc-terra);
	box-shadow: 0 0 0 3px rgba(196, 121, 74, 0.22);
	flex: none;
}

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

.messages {
	flex: 1;
	overflow-y: auto;
	padding: 0px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scrollbar-width: thin;
	scrollbar-color: var(--nsc-line) transparent;
}
.messages::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb {
	background: var(--nsc-line);
	border-radius: 999px;
	border: 2px solid var(--nsc-bg);
}

.msg {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 14.5px;
	line-height: 1.45;
	word-wrap: break-word;
	white-space: pre-wrap;
	animation: nsc-rise 0.34s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
.msg-visitor {
	align-self: flex-end;
	background: var(--nsc-visitor-bg);
	color: var(--nsc-visitor-text);
	border-bottom-right-radius: 5px;
	box-shadow: 0 4px 12px -6px rgba(44, 29, 10, 0.6);
}
.msg-staff {
	align-self: flex-start;
	background: var(--nsc-staff-bg);
	color: var(--nsc-staff-text);
	border-bottom-left-radius: 5px;
	box-shadow: inset 0 0 0 1px rgba(140, 110, 66, 0.14);
}
.msg-system {
	align-self: center;
	max-width: 94%;
	text-align: center;
	background: var(--nsc-warn-bg);
	color: var(--nsc-warn-text);
	border: 0;
	border-left: 3px solid var(--nsc-warn-border);
	font-size: 13px;
	line-height: 1.5;
	border-radius: 12px;
	padding: 11px 15px;
}
/* Attribution under a responder bubble (e.g. "Support Worker"). */
.msg-byline {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--nsc-ink-soft);
	opacity: 0.75;
}

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

/* Character counter — appears just above the composer as the SMS cap nears. */
.char-count {
	padding: 3px 16px 0;
	text-align: right;
	font-family: var(--nsc-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--nsc-ink-soft);
}
.char-count[hidden] { display: none; }
.char-count-urgent { color: var(--nsc-clay); }

.composer {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 12px 12px 14px;
	border-top: 1px solid var(--nsc-line);
	background: var(--nsc-paper-2);
}
.input {
	flex: 1;
	resize: none;
	box-sizing: border-box; /* so the auto-grow height == scrollHeight (no padding double-count) */
	border: 1px solid var(--nsc-line);
	border-radius: 14px;
	padding: 11px 14px;
	font-size: 14.5px;
	font-family: var(--nsc-font);
	line-height: 1.4;
	color: var(--nsc-text);
	background: var(--nsc-bg);
	max-height: 120px;
	overflow-y: auto;
	scrollbar-width: none; /* grow past 120px scrolls internally, but hide the bar (looked odd) */
	box-shadow: inset 0 1px 3px rgba(44, 29, 10, 0.06);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.input::-webkit-scrollbar { width: 0; height: 0; display: none; }
.input::placeholder { color: var(--nsc-ink-soft); opacity: 0.7; }
.input:focus-visible {
	outline: none;
	border-color: var(--nsc-terra);
	box-shadow: 0 0 0 3px rgba(196, 121, 74, 0.22), inset 0 1px 3px rgba(44, 29, 10, 0.06);
}
.send {
	flex: none;
	background: linear-gradient(160deg, var(--nsc-terra) 0%, var(--nsc-terra-deep) 100%);
	color: var(--nsc-cream);
	border: 0;
	border-radius: 14px;
	padding: 0 18px;
	height: 44px;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 6px 14px -6px rgba(168, 95, 53, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: transform 0.18s ease, filter 0.18s ease;
}
.send:hover { transform: translateY(-1px); filter: brightness(1.04); }
.send:active { transform: translateY(0); }
.send:focus-visible { outline: 3px solid var(--nsc-ink); outline-offset: 2px; }

/* ------------------------------------------------------------- motion ----- */

@keyframes nsc-open {
	from { opacity: 0; transform: translateY(14px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes nsc-rise {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Crisis widget: respect a visitor who has asked for stillness. */
@media (prefers-reduced-motion: reduce) {
	.launcher, .launcher::after, .panel, .msg { animation: none !important; }
	.launcher, .send, .exit, .close { transition: none !important; }
}