/**
 * ArneIron Connector — Chat widget styles.
 *
 * Styles the front-end FAB + dialog shell printed by includes/chat-core.php
 * (#arncon-chat-root). Canonical ArneIron red-CRT brand: dark blood-black
 * surfaces, signal-red accents, warm ink, hard offset (block) shadows and the
 * sharp ~3px CRT radius.
 *
 * Everything is scoped under .arncon-chat so it never bleeds into the host
 * theme. Dependency-free: no @import, no external font files. It aliases the
 * arneiron-g ds.css custom properties (--c-signal, --c-red-deep, --c-panel,
 * --c-ink, --f-ui, --r-1, --sh-block, --glow-red …) with the SAME safe
 * fallbacks the sibling portal.css uses, so the widget is correct standalone
 * AND inherits the live theme palette/typography when arneiron-g is present.
 *
 * The font fallbacks (system-ui / ui-monospace) are the websafe ArneIron read
 * for when the theme's Rajdhani/Orbitron faces are not loaded on the page.
 *
 * @package ArneIron_Connector
 */

/* ===================================================================== *
 * Root + local token aliases (ds.css with self-contained fallbacks).
 * ===================================================================== */
.arncon-chat {
	/* Surfaces — blood-black CRT panel family. */
	--arncon-base:      var(--c-base, #050203);
	--arncon-card:      var(--c-panel, #100608);
	--arncon-card-2:    var(--c-panel-2, #18090b);
	--arncon-well:      var(--c-well, #0a0405);

	/* Reds — exact ArneIron brand. */
	--arncon-red:       var(--c-red-deep, #d21a1c);
	--arncon-red-hot:   var(--c-signal, #ff2a2a);
	--arncon-red-deep:  var(--c-blood, #8c1014);
	--arncon-maroon:    var(--c-maroon, #4a080c);

	/* Ink — warm CRT phosphor white. Pure white reserved for text on red. */
	--arncon-ink:       var(--c-ink, #ffd5cd);
	--arncon-ink-dim:   var(--c-ink-dim, #c4847e);
	--arncon-on-red:    #ffffff;

	/* Lines + bubbles. */
	--arncon-grid:      var(--c-grid, #2c1012);
	--arncon-hair:      var(--c-hair, #1d0c0d);
	--arncon-bub-user:  var(--c-red-deep, #d21a1c);
	--arncon-bub-bot:   var(--c-panel-3, #210d10);

	/* Glow + hard block shadow (CRT — offset, no blur). */
	--arncon-glow:      var(--glow-red, rgba(255, 42, 42, .55));
	--arncon-glow-soft: var(--glow-red-soft, rgba(255, 42, 42, .22));
	--arncon-shadow:    var(--sh-block, 4px 4px 0 0 #000);

	/* Spacing scale. */
	--arncon-sp-1: var(--sp-1, 4px);
	--arncon-sp-2: var(--sp-2, 8px);
	--arncon-sp-3: var(--sp-3, 12px);
	--arncon-sp-4: var(--sp-4, 16px);
	--arncon-sp-5: var(--sp-5, 24px);

	/* Sharp CRT radii. */
	--arncon-r1: var(--r-1, 3px);
	--arncon-r2: var(--r-2, 6px);

	/* Brand typography (referenced; fonts not bundled). */
	--arncon-f-ui:      var(--f-ui, "Rajdhani", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--arncon-f-display: var(--f-display, "Orbitron", var(--arncon-f-ui));
	--arncon-f-mono:    var(--f-mono, "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

	--arncon-z: 2147483000;

	position: fixed;
	bottom: 20px;
	z-index: var(--arncon-z);
	font-family: var(--arncon-f-ui);
	font-size: 15px;
	line-height: 1.45;
	box-sizing: border-box;
}

.arncon-chat *,
.arncon-chat *::before,
.arncon-chat *::after {
	box-sizing: border-box;
}

/* Position variants (mirrors arncon_chat_position()). */
.arncon-chat--bottom-right {
	right: 20px;
	left: auto;
}

.arncon-chat--bottom-left {
	left: 20px;
	right: auto;
}

/* ===================================================================== *
 * Brandmark — shared logo-glyph slot. S5 drops the ArneIron mark (svg/img)
 * into .arncon-chat__brandmark inside the FAB and the header. The mark
 * inherits currentColor and is sized to fit; no dependency on a CSS glyph.
 * ===================================================================== */
.arncon-chat__brandmark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: inherit;
	line-height: 0;
	pointer-events: none;
}

.arncon-chat__brandmark > svg,
.arncon-chat__brandmark > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	fill: currentColor;
}

/* SVG paths/strokes that opt into the brand red inherit it via currentColor. */
.arncon-chat__brandmark > svg [fill="currentColor"],
.arncon-chat__brandmark > svg path:not([fill]) {
	fill: currentColor;
}

/* ===================================================================== *
 * Floating action button (FAB) — squared CRT chip with the brand mark.
 * ===================================================================== */
.arncon-chat__fab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--arncon-red-hot);
	border-radius: var(--arncon-r2);
	background: linear-gradient(150deg, var(--arncon-red-hot) 0%, var(--arncon-red) 60%, var(--arncon-red-deep) 100%);
	color: var(--arncon-on-red);
	cursor: pointer;
	box-shadow: var(--arncon-shadow);
	-webkit-appearance: none;
	appearance: none;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Mark inside the FAB. */
.arncon-chat__fab .arncon-chat__brandmark {
	width: 30px;
	height: 30px;
}

.arncon-chat__fab:hover {
	transform: translateY(-2px);
	box-shadow: var(--arncon-shadow), 0 0 0 4px var(--arncon-glow-soft);
	filter: brightness(1.06);
}

.arncon-chat__fab:focus-visible {
	outline: 3px solid var(--arncon-red-hot);
	outline-offset: 3px;
	box-shadow: var(--arncon-shadow), 0 0 0 4px var(--arncon-glow);
}

.arncon-chat__fab:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 0 #000;
}

/* Fallback CSS chat glyph (used only if no brandmark element is supplied). */
.arncon-chat__fab-icon {
	position: relative;
	display: block;
	width: 26px;
	height: 20px;
	border-radius: var(--arncon-r1);
	border-bottom-left-radius: 1px;
	background: currentColor;
}

.arncon-chat__fab-icon::before {
	content: "";
	position: absolute;
	left: 7px;
	right: 7px;
	top: 6px;
	height: 2px;
	border-radius: 2px;
	background: var(--arncon-red);
	box-shadow: 0 5px 0 0 var(--arncon-red);
}

/* When the dialog is open, morph the fallback glyph into a close affordance. */
.arncon-chat__fab[aria-expanded="true"] .arncon-chat__fab-icon {
	background: transparent;
	border-radius: 0;
	transform: rotate(45deg);
}

.arncon-chat__fab[aria-expanded="true"] .arncon-chat__fab-icon::before {
	top: 9px;
	left: 0;
	right: 0;
	background: var(--arncon-on-red);
	box-shadow: none;
	transform: rotate(90deg);
}

/* ===================================================================== *
 * Dialog card.
 * ===================================================================== */
.arncon-chat__dialog {
	position: absolute;
	bottom: 74px;
	width: 360px;
	max-width: calc(100vw - 32px);
	max-height: min(560px, calc(100vh - 110px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--arncon-card);
	color: var(--arncon-ink);
	border: 1px solid var(--arncon-grid);
	border-radius: var(--arncon-r1);
	box-shadow: var(--arncon-shadow);

	/* Closed state: collapsed + faded, anchored to FAB corner. */
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.arncon-chat--bottom-right .arncon-chat__dialog {
	right: 0;
	transform-origin: bottom right;
}

.arncon-chat--bottom-left .arncon-chat__dialog {
	left: 0;
	transform-origin: bottom left;
}

/* Open state. JS toggles [hidden] / aria-hidden + an .is-open class.
   Support both an explicit open class and the aria-hidden contract. */
.arncon-chat__dialog.is-open,
.arncon-chat__dialog[aria-hidden="false"] {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Native [hidden] keeps it out of the a11y tree before JS hydration. */
.arncon-chat__dialog[hidden] {
	display: none;
}

/* ===================================================================== *
 * Header — brand bar with mark slot + subtle CRT scanline.
 * ===================================================================== */
.arncon-chat__header {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--arncon-sp-3);
	padding: var(--arncon-sp-3) var(--arncon-sp-4);
	background: linear-gradient(135deg, var(--arncon-red-hot) 0%, var(--arncon-red) 45%, var(--arncon-red-deep) 100%);
	color: var(--arncon-on-red);
	border-bottom: 1px solid var(--arncon-maroon);
}

/* Faint scanline texture — pure CRT flavor, non-interactive. */
.arncon-chat__header::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, .12) 0,
		rgba(0, 0, 0, .12) 1px,
		transparent 1px,
		transparent 3px
	);
	opacity: .35;
	mix-blend-mode: multiply;
}

/* Mark inside the header. */
.arncon-chat__header .arncon-chat__brandmark {
	position: relative;
	z-index: 1;
	width: 22px;
	height: 22px;
}

.arncon-chat__title {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--arncon-f-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.arncon-chat__close {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--arncon-r1);
	background: rgba(0, 0, 0, .22);
	color: var(--arncon-on-red);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.arncon-chat__close:hover {
	background: rgba(0, 0, 0, .4);
	border-color: rgba(255, 255, 255, .55);
}

.arncon-chat__close:focus-visible {
	outline: 2px solid var(--arncon-on-red);
	outline-offset: 2px;
}

/* ===================================================================== *
 * Messages area.
 * ===================================================================== */
.arncon-chat__messages {
	flex: 1 1 auto;
	min-height: 120px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: var(--arncon-sp-3);
	padding: var(--arncon-sp-4);
	background: var(--arncon-well);
	scrollbar-width: thin;
	scrollbar-color: var(--arncon-red) transparent;
}

.arncon-chat__messages::-webkit-scrollbar {
	width: 8px;
}

.arncon-chat__messages::-webkit-scrollbar-thumb {
	background: var(--arncon-red);
	border-radius: 0;
}

.arncon-chat__messages::-webkit-scrollbar-track {
	background: transparent;
}

/* Message bubbles (created by sibling JS). Canonical BEM + role aliases. */
.arncon-chat__msg,
.arncon-chat__message {
	max-width: 82%;
	padding: var(--arncon-sp-2) var(--arncon-sp-3);
	border: 1px solid var(--arncon-hair);
	border-radius: var(--arncon-r2);
	font-size: 14px;
	line-height: 1.45;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

/* Assistant / bot — left aligned, dark panel bubble. */
.arncon-chat__msg--assistant,
.arncon-chat__msg--bot,
.arncon-chat__message--assistant,
.arncon-chat__message--bot {
	align-self: flex-start;
	background: var(--arncon-bub-bot);
	color: var(--arncon-ink);
	border-color: var(--arncon-grid);
	border-bottom-left-radius: 1px;
}

/* User — right aligned, signal-red bubble (white text for AA contrast). */
.arncon-chat__msg--user,
.arncon-chat__message--user {
	align-self: flex-end;
	background: var(--arncon-bub-user);
	color: var(--arncon-on-red);
	border-color: var(--arncon-red-hot);
	border-bottom-right-radius: 1px;
}

/* Streaming / typing indicator hook. */
.arncon-chat__msg--typing,
.arncon-chat__message--typing {
	color: var(--arncon-ink-dim);
	font-family: var(--arncon-f-mono);
	font-style: normal;
	letter-spacing: .04em;
}

/* ===================================================================== *
 * Composer form.
 * ===================================================================== */
.arncon-chat__form {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--arncon-sp-2);
	padding: var(--arncon-sp-2);
	background: var(--arncon-card-2);
	border-top: 1px solid var(--arncon-grid);
}

.arncon-chat__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0 var(--arncon-sp-3);
	border: 1px solid var(--arncon-grid);
	border-radius: var(--arncon-r1);
	background: var(--arncon-well);
	color: var(--arncon-ink);
	font-family: var(--arncon-f-ui);
	font-size: 14px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.arncon-chat__input::placeholder {
	color: var(--arncon-ink-dim);
}

.arncon-chat__input:focus {
	outline: none;
	border-color: var(--arncon-red-hot);
	box-shadow: 0 0 0 3px var(--arncon-glow-soft);
}

.arncon-chat__send {
	flex: 0 0 auto;
	height: 40px;
	margin: 0;
	padding: 0 var(--arncon-sp-4);
	border: 1px solid var(--arncon-red-hot);
	border-radius: var(--arncon-r1);
	background: var(--arncon-red);
	color: var(--arncon-on-red);
	font-family: var(--arncon-f-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.arncon-chat__send:hover {
	background: var(--arncon-red-hot);
	box-shadow: 0 0 0 3px var(--arncon-glow-soft);
}

.arncon-chat__send:active {
	transform: translateY(1px);
}

.arncon-chat__send:focus-visible {
	outline: 2px solid var(--arncon-red-hot);
	outline-offset: 2px;
}

.arncon-chat__send:disabled {
	opacity: .55;
	cursor: not-allowed;
	box-shadow: none;
}

/* ===================================================================== *
 * Responsive — near-fullwidth dialog on small screens.
 * ===================================================================== */
@media (max-width: 480px) {
	.arncon-chat {
		bottom: 16px;
	}

	.arncon-chat--bottom-right {
		right: 16px;
	}

	.arncon-chat--bottom-left {
		left: 16px;
	}

	.arncon-chat__dialog {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 86px;
		width: auto;
		max-width: none;
		max-height: calc(100vh - 110px);
	}
}

/* ===================================================================== *
 * Reduced motion.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.arncon-chat__fab,
	.arncon-chat__dialog,
	.arncon-chat__close,
	.arncon-chat__input,
	.arncon-chat__send {
		transition: none;
	}

	.arncon-chat__fab:hover,
	.arncon-chat__fab:active,
	.arncon-chat__send:active {
		transform: none;
	}
}