/**
 * Live Player Pulse styles. Scoped entirely under .di-pulse.
 * Paper/light palette is the default; dark is applied via the site's own
 * html[data-di-theme="dark"] switch, with prefers-color-scheme only as a
 * fallback when no site theme attribute is set. Mobile placement clears the
 * bottom navigation.
 */

.di-pulse {
	/* Inherit the Dynamite Idea theme palette so Pulse is native in both the
	   dark app shell and the theme's light mode. Fallbacks match the theme's
	   dark tokens for safety if the theme is not active. */
	--dip-panel: var(--di-surface-raised, #16181c);
	--dip-bg: var(--di-surface-soft, #0f1419);
	--dip-ink: var(--di-text, #e7e9ea);
	--dip-muted: var(--di-text-muted, #71767b);
	--dip-border: var(--di-border, #2f3336);
	--dip-accent: var(--di-accent, #ff5a1f);
	--dip-accent-ink: var(--di-bg, #000);
	--dip-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
	--dip-radius: var(--di-radius-lg, 16px);
	--dip-bottom: 20px;
	/* Clear the theme's mobile tab bar. */
	--dip-bottom-mobile: calc(var(--di-mobile-tabbar-height, 72px) + 14px);

	position: fixed;
	right: 16px;
	bottom: var(--dip-bottom);
	z-index: 6000;
	font-family: inherit;
}

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

.di-pulse__launcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 78vw;
	padding: 10px 16px;
	border: 1px solid var(--dip-border);
	border-radius: 999px;
	background: var(--dip-panel);
	color: var(--dip-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--dip-shadow);
	transition: transform 0.12s ease, border-color 0.12s ease;
}

.di-pulse__launcher:hover {
	transform: translateY(-1px);
	border-color: var(--dip-accent);
}

.di-pulse.is-open .di-pulse__launcher {
	display: none;
}

.di-pulse__launcher-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.di-pulse__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dip-accent);
	box-shadow: 0 0 0 0 rgba(218, 58, 32, 0.55);
	animation: di-pulse-glow 2.4s ease-out infinite;
	flex: 0 0 auto;
}

@keyframes di-pulse-glow {
	0% { box-shadow: 0 0 0 0 rgba(218, 58, 32, 0.5); }
	70% { box-shadow: 0 0 0 8px rgba(218, 58, 32, 0); }
	100% { box-shadow: 0 0 0 0 rgba(218, 58, 32, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.di-pulse__dot { animation: none; }
	.di-pulse__launcher { transition: none; }
}

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

.di-pulse__panel {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 360px;
	max-width: 92vw;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	background: var(--dip-panel);
	color: var(--dip-ink);
	border: 1px solid var(--dip-border);
	border-radius: var(--dip-radius);
	box-shadow: var(--dip-shadow);
	overflow: hidden;
}

.di-pulse__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--dip-border);
	background: var(--dip-bg);
}

.di-pulse__eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dip-accent);
}

.di-pulse__ctx {
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--dip-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

.di-pulse__presence {
	margin-left: auto;
	font-size: 12px;
	color: var(--dip-muted);
}

.di-pulse__presence b {
	color: var(--dip-ink);
}

.di-pulse__close {
	border: none;
	background: transparent;
	color: var(--dip-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}

.di-pulse__close:hover {
	color: var(--dip-ink);
}

/* Messages ---------------------------------------------------------------- */

.di-pulse__list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 120px;
}

.di-pulse__empty {
	margin: auto 0;
	color: var(--dip-muted);
	font-size: 13px;
	text-align: center;
}

.di-pulse__msg {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.di-pulse__msg-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.di-pulse__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--dip-ink);
}

.di-pulse__role {
	font-size: 11px;
	color: var(--dip-muted);
	border: 1px solid var(--dip-border);
	border-radius: 999px;
	padding: 1px 7px;
}

.di-pulse__body {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dip-ink);
	overflow-wrap: anywhere;
}

.di-pulse__report {
	align-self: flex-start;
	border: none;
	background: transparent;
	color: var(--dip-muted);
	font-size: 11px;
	cursor: pointer;
	padding: 0;
}

.di-pulse__report:hover {
	color: var(--dip-accent);
}

.di-pulse__report:disabled {
	color: var(--dip-muted);
	cursor: default;
}

/* Escalations ------------------------------------------------------------- */

.di-pulse__escalate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid var(--dip-border);
	background: var(--dip-bg);
}

.di-pulse__escalate-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dip-muted);
}

.di-pulse__chip {
	font-size: 12px;
	font-weight: 600;
	color: var(--dip-ink);
	text-decoration: none;
	border: 1px solid var(--dip-border);
	border-radius: 999px;
	padding: 5px 11px;
	background: var(--dip-panel);
	transition: border-color 0.12s ease;
}

.di-pulse__chip:hover {
	border-color: var(--dip-accent);
	color: var(--dip-accent);
}

/* Composer ---------------------------------------------------------------- */

.di-pulse__composer {
	padding: 12px 14px;
	border-top: 1px solid var(--dip-border);
}

.di-pulse__gate {
	margin: 0;
	font-size: 13px;
	color: var(--dip-muted);
	line-height: 1.4;
}

.di-pulse__form {
	display: flex;
	gap: 8px;
}

.di-pulse__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--dip-border);
	border-radius: 10px;
	background: var(--dip-bg);
	color: var(--dip-ink);
	font-size: 14px;
	font-family: inherit;
}

.di-pulse__input:focus {
	outline: 2px solid var(--dip-accent);
	outline-offset: 1px;
}

.di-pulse__send {
	flex: 0 0 auto;
	padding: 10px 16px;
	border: none;
	border-radius: 10px;
	background: var(--dip-accent);
	color: var(--dip-accent-ink);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.di-pulse__send:disabled {
	opacity: 0.6;
	cursor: default;
}

.di-pulse__err {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--dip-accent);
}

.di-pulse__note {
	margin: 0;
	padding: 10px 14px 12px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--dip-muted);
	border-top: 1px solid var(--dip-border);
}

/* Mobile: clear the bottom navigation and go near full width --------------- */

@media (max-width: 640px) {
	.di-pulse {
		right: 12px;
		left: 12px;
		bottom: var(--dip-bottom-mobile);
	}

	.di-pulse__launcher {
		margin-left: auto;
	}

	.di-pulse__panel {
		width: auto;
		left: 0;
		right: 0;
		max-width: none;
		max-height: 74vh;
	}

	.di-pulse__ctx {
		max-width: 60vw;
	}
}