/* ============================================
   COMMUNICATE PAGE — interior page styles
   Layers on top of /style.css. Only page-specific
   mockups live here.
   ============================================ */


/* ============================================
   MOCKUP — Conversations inbox
   ============================================ */
.mock-inbox {
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.mock-inbox-head {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-inbox-head i {
	color: var(--brand-600);
	font-size: 0.9rem;
}

.mock-inbox-filters {
	padding: 0.6rem 0.85rem;
	background: var(--ink-50);
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.mock-inbox-filter {
	padding: 0.22rem 0.6rem;
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 600;
	color: var(--ink-600);
}

.mock-inbox-filter.active {
	background: var(--brand-50);
	border-color: var(--brand-200);
	color: var(--brand-700);
}

.mock-inbox-body {
	display: grid;
	grid-template-columns: 175px 1fr;
	min-height: 340px;
}

.mock-inbox-list {
	border-right: 1px solid var(--ink-100);
	padding: 0.45rem;
	background: var(--ink-50);
}

.mock-inbox-list-item {
	padding: 0.55rem 0.65rem;
	border-radius: 6px;
	margin-bottom: 0.25rem;
}

.mock-inbox-list-item.active {
	background: #fff;
	box-shadow: var(--shadow-sm);
}

.mock-inbox-list-item-row {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.2rem;
}

.mock-inbox-star {
	color: #F59E0B;
	font-size: 0.65rem;
}

.mock-inbox-list-item-name {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-inbox-list-item-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.3rem;
}

.mock-inbox-list-item-time {
	font-family: var(--mono);
	font-size: 0.6rem;
	color: var(--ink-500);
}

.mock-inbox-list-item-tag {
	font-size: 0.58rem;
	font-weight: 600;
	color: var(--ink-700);
	background: var(--ink-100);
	padding: 0.08rem 0.4rem;
	border-radius: 4px;
}

.mock-inbox-thread {
	padding: 0.85rem 1rem;
	background: linear-gradient(180deg, #fff, var(--ink-50));
	display: flex;
	flex-direction: column;
}

.mock-inbox-thread-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.65rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid var(--ink-100);
}

.mock-inbox-thread-head strong {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-inbox-thread-tag {
	font-size: 0.62rem;
	font-weight: 600;
	background: var(--brand-50);
	color: var(--brand-700);
	padding: 0.13rem 0.45rem;
	border-radius: 4px;
}

.mock-inbox-thread-body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.mock-inbox-thread-body .msg {
	font-size: 0.72rem;
	padding: 0.5rem 0.7rem;
	max-width: 80%;
	line-height: 1.4;
}

.mock-inbox-stamp {
	font-family: var(--mono);
	font-size: 0.58rem;
	color: var(--ink-500);
	align-self: flex-end;
	margin: -0.1rem 0 0.25rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.mock-inbox-stamp.left {
	align-self: flex-start;
}

.mock-inbox-badge {
	padding: 0.1rem 0.4rem;
	border-radius: 3px;
	font-weight: 700;
	font-size: 0.56rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mock-inbox-badge.delivered {
	background: rgba(15, 166, 204, 0.12);
	color: var(--accent-600);
}

.mock-inbox-badge.sent {
	background: rgba(94, 108, 130, 0.12);
	color: var(--ink-600);
}

.mock-inbox-badge.opened {
	background: rgba(21, 101, 192, 0.12);
	color: var(--brand-700);
}


/* ============================================
   MOCKUP — Bulk message compose
   ============================================ */
.mock-bulk {
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.mock-bulk-head {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-bulk-head i {
	color: var(--brand-600);
}

.mock-bulk-recipients {
	padding: 0.7rem 1.1rem;
	background: var(--brand-50);
	border-bottom: 1px solid var(--brand-100);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.78rem;
	color: var(--brand-700);
	font-weight: 600;
}

.mock-bulk-count {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--brand-700);
	line-height: 1;
}

.mock-bulk-field {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--ink-100);
}

.mock-bulk-field label {
	display: block;
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--ink-600);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.35rem;
}

.mock-bulk-input {
	padding: 0.55rem 0.7rem;
	background: var(--ink-50);
	border: 1px solid var(--ink-200);
	border-radius: 6px;
	font-size: 0.8rem;
	color: var(--ink-800);
}

.mock-bulk-input.message {
	line-height: 1.55;
}

.mock-bulk-token {
	background: var(--accent-50);
	color: var(--accent-600);
	padding: 0.05rem 0.35rem;
	border-radius: 3px;
	font-weight: 700;
	font-size: 0.72rem;
	border: 1px solid var(--accent-100);
	white-space: nowrap;
}

.mock-bulk-preview {
	padding: 0.85rem 1.1rem;
	background: var(--ink-50);
	border-bottom: 1px solid var(--ink-100);
}

.mock-bulk-preview-title {
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	color: var(--ink-500);
	margin-bottom: 0.55rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mock-bulk-preview-item {
	padding: 0.55rem 0.7rem;
	background: #fff;
	border: 1px solid var(--ink-100);
	border-radius: 6px;
	font-size: 0.72rem;
	color: var(--ink-700);
	margin-bottom: 0.4rem;
	line-height: 1.45;
}

.mock-bulk-preview-item:last-child {
	margin-bottom: 0;
}

.mock-bulk-preview-item strong {
	color: var(--ink-900);
}

.mock-bulk-foot {
	padding: 0.85rem 1.1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.mock-bulk-foot-meta {
	font-size: 0.72rem;
	color: var(--ink-600);
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.mock-bulk-foot-meta i {
	color: var(--accent-500);
}

.mock-bulk-foot-btn {
	background: var(--brand-600);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.55rem 1rem;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(21, 101, 192, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}


/* ============================================
   MOCKUP — Automated campaign sequence
   ============================================ */
.mock-campaign {
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.mock-campaign-head {
	padding: 1rem 1.25rem;
	background: linear-gradient(180deg, var(--brand-50), #fff);
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.mock-campaign-event strong {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 0.2rem;
}

.mock-campaign-event span {
	font-size: 0.72rem;
	color: var(--ink-600);
	font-family: var(--mono);
}

.mock-campaign-stats {
	display: flex;
	gap: 1.5rem;
}

.mock-campaign-stat {
	text-align: right;
}

.mock-campaign-stat-num {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--brand-700);
	line-height: 1;
}

.mock-campaign-stat-label {
	font-size: 0.66rem;
	color: var(--ink-500);
	font-family: var(--mono);
	margin-top: 0.2rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mock-campaign-body {
	padding: 0.9rem 1.25rem;
}

.mock-campaign-step {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.55rem 0;
	position: relative;
}

.mock-campaign-step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 36px;
	width: 1px;
	height: calc(100% - 18px);
	background: var(--ink-200);
}

.mock-campaign-step-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ink-100);
	color: var(--ink-500);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--ink-200);
	z-index: 1;
}

.mock-campaign-step.done .mock-campaign-step-icon {
	background: var(--brand-600);
	color: #fff;
	box-shadow: 0 0 0 1px var(--brand-600);
}

.mock-campaign-step.queued .mock-campaign-step-icon {
	background: var(--accent-50);
	color: var(--accent-600);
	box-shadow: 0 0 0 1px var(--accent-200);
}

.mock-campaign-step-body {
	flex: 1;
	min-width: 0;
	padding-top: 0.15rem;
}

.mock-campaign-step-title {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 0.2rem;
}

.mock-campaign-step-meta {
	font-size: 0.72rem;
	color: var(--ink-600);
}


/* ============================================
   MOCKUP — Team activity (collaborative)
   ============================================ */
.mock-team {
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.mock-team-head {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--ink-100);
	background: var(--ink-50);
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.mock-team-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand-600), var(--accent-500));
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mock-team-info {
	flex: 1;
	min-width: 0;
}

.mock-team-name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-team-stage {
	font-family: var(--mono);
	font-size: 0.68rem;
	color: var(--ink-500);
	margin-top: 0.15rem;
}

.mock-team-recruiters {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.68rem;
	color: var(--ink-600);
}

.mock-team-recruiter-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--brand-100);
	color: var(--brand-700);
	font-size: 0.6rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
	margin-left: -10px;
}

.mock-team-recruiter-avatar:first-of-type {
	margin-left: 0.3rem;
}

.mock-team-timeline {
	padding: 0.5rem 1.25rem;
}

.mock-team-event {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--ink-100);
}

.mock-team-event:last-child {
	border-bottom: 0;
}

.mock-team-event-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--brand-100);
	color: var(--brand-700);
	font-size: 0.62rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mock-team-event-avatar.alt {
	background: var(--accent-100);
	color: var(--accent-600);
}

.mock-team-event-avatar.alt2 {
	background: #FEF3E7;
	color: #B95A12;
}

.mock-team-event-body {
	flex: 1;
	min-width: 0;
}

.mock-team-event-line {
	font-size: 0.8rem;
	color: var(--ink-700);
	line-height: 1.4;
}

.mock-team-event-line strong {
	color: var(--ink-900);
	font-weight: 700;
}

.mock-team-event-time {
	font-size: 0.66rem;
	color: var(--ink-500);
	font-family: var(--mono);
	margin-top: 0.15rem;
}

.mock-team-event-channel {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--ink-50);
	color: var(--ink-500);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
	flex-shrink: 0;
}

.mock-team-foot {
	padding: 0.85rem 1.25rem;
	background: linear-gradient(180deg, var(--accent-50), #fff);
	border-top: 1px solid var(--ink-100);
	font-size: 0.78rem;
	color: var(--ink-700);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.mock-team-foot i {
	color: var(--accent-600);
}


/* ============================================
   RESPONSIVE — narrow viewport adjustments
   ============================================ */
@media (max-width: 540px) {
	.mock-inbox-body {
		grid-template-columns: 140px 1fr;
	}

	.mock-campaign-head,
	.mock-team-head {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.mock-campaign-stats {
		gap: 1rem;
	}
}

	/* ===========================================================================
   panel-communicate.css  —  RecruitApp.ai Conversations product visual
   Scoped under .ra-viz; targets only .rac- markup so a stale HTML/CSS mismatch
   stays isolated. Requires recruitapp-visual-system.css for the .ra-viz tokens.
   =========================================================================== */

				.ra-viz .rac-card {
					width: 100%;
					background: var(--ra-surface);
					border: 1px solid var(--ra-line);
					border-radius: var(--ra-radius);
					box-shadow: var(--ra-shadow);
					overflow: hidden;
				}

				.ra-viz .rac-body {
					padding: 12px 14px 14px;
				}

				/* ---------------------------------------------------------------------------
   Color enforcement. The core reset forces color:var(--ra-ink)!important on
   every descendant to block host bleed, so each intentional color is re-stated
   here with !important to win. Line-heights that must differ from the reset's
   1.45 are likewise forced.
   --------------------------------------------------------------------------- */
				.ra-viz .rac-head-title {
					color: var(--ra-navy) !important;
				}

				.ra-viz .rac-thread-name {
					color: var(--ra-navy) !important;
				}

				.ra-viz .rac-bubble-out {
					color: #ffffff !important;
				}

				.ra-viz .rac-bubble-out * {
					color: #ffffff !important;
				}

				.ra-viz .rac-bubble-in {
					color: var(--ra-ink) !important;
				}

				.ra-viz .rac-note {
					color: var(--ra-ink-soft) !important;
				}

				.ra-viz .rac-search,
				.ra-viz .rac-input,
				.ra-viz .rac-composer-count {
					color: var(--ra-ink-faint) !important;
				}

				.ra-viz .rac-chip,
				.ra-viz .rac-select,
				.ra-viz .rac-filters-label {
					color: var(--ra-ink-soft) !important;
				}

				.ra-viz .rac-statline b {
					color: var(--ra-ink) !important;
				}

				.ra-viz .rac-tag-blue {
					color: var(--ra-blue-tx) !important;
				}

				.ra-viz .rac-tag-green {
					color: #0f7a52 !important;
				}

				.ra-viz .rac-tag-plain {
					color: var(--ra-ink-soft) !important;
				}

				.ra-viz .rac-event-chip {
					color: var(--ra-blue-tx) !important;
				}

				.ra-viz .rac-status-scheduled {
					color: var(--ra-peach-tx) !important;
				}

				.ra-viz .rac-badge,
				.ra-viz .rac-mark,
				.ra-viz .rac-send {
					color: #ffffff !important;
				}

				.ra-viz .rac-deliv-sent {
					color: var(--ra-blue) !important;
				}

				.ra-viz .rac-deliv-deliv {
					color: var(--ra-green-tx) !important;
				}

				.ra-viz .rac-deliv-open {
					color: #2f7fd4 !important;
				}

				/* ---- page title ---- */
				.ra-viz .rac-head {
					display: flex;
					align-items: center;
					gap: 9px;
					margin-bottom: 9px;
				}

				.ra-viz .rac-head-ico {
					width: 22px;
					height: 22px;
				}

				.ra-viz .rac-head-title {
					font-size: 17px;
					font-weight: 700;
					color: var(--ra-navy);
					letter-spacing: -0.01em;
				}

				/* ---- filter bar ---- */
				.ra-viz .rac-filters {
					background: var(--ra-surface-2);
					border: 1px solid var(--ra-line);
					border-radius: var(--ra-radius-sm);
					padding: 10px 12px 11px;
					margin-bottom: 12px;
				}

				.ra-viz .rac-filters-label {
					display: flex;
					align-items: center;
					gap: 6px;
					font-size: 11.5px;
					font-weight: 700;
					color: var(--ra-ink-soft);
					margin-bottom: 9px;
				}

				.ra-viz .rac-filters-label svg {
					width: 14px;
					height: 14px;
				}

				.ra-viz .rac-filters-row {
					display: flex;
					flex-wrap: wrap;
					gap: 7px;
					align-items: center;
				}

				.ra-viz .rac-search {
					display: flex;
					align-items: center;
					gap: 7px;
					flex: 1 1 190px;
					min-width: 150px;
					background: var(--ra-surface);
					border: 1px solid var(--ra-line);
					border-radius: 8px;
					padding: 7px 11px;
					font-size: 12px;
					color: var(--ra-ink-faint);
				}

				.ra-viz .rac-search svg {
					width: 14px;
					height: 14px;
					flex: none;
				}

				.ra-viz .rac-chip,
				.ra-viz .rac-select {
					display: inline-flex;
					align-items: center;
					gap: 6px;
					background: var(--ra-surface);
					border: 1px solid var(--ra-line);
					border-radius: 8px;
					padding: 7px 10px;
					font-size: 11.5px;
					font-weight: 600;
					color: var(--ra-ink-soft);
					white-space: nowrap;
				}

				.ra-viz .rac-chip svg {
					width: 13px;
					height: 13px;
				}

				.ra-viz .rac-select svg {
					width: 12px;
					height: 12px;
				}

				.ra-viz .rac-select-date svg:first-child {
					width: 13px;
					height: 13px;
				}

				.ra-viz .rac-dot {
					width: 7px;
					height: 7px;
					border-radius: 50%;
					background: var(--ra-red);
					display: inline-block;
				}

				/* Sidebar conversation list + two-column grid removed — the panel now shows a
   single open conversation full-width to keep height in the 440–480px band. */

				/* ---- thread ---- */
				.ra-viz .rac-thread {
					border: 1px solid var(--ra-line);
					border-radius: var(--ra-radius-sm);
					background: var(--ra-surface);
					display: flex;
					flex-direction: column;
					overflow: hidden;
				}

				.ra-viz .rac-thread-head {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 10px;
					padding: 12px 14px 9px;
				}

				.ra-viz .rac-thread-id {
					display: flex;
					align-items: center;
					gap: 9px;
				}

				.ra-viz .rac-avatar {
					width: 22px;
					height: 22px;
				}

				.ra-viz .rac-thread-name {
					font-size: 15px;
					font-weight: 600;
					color: var(--ra-navy);
					letter-spacing: -0.01em;
				}

				.ra-viz .rac-actions {
					display: flex;
					align-items: center;
					gap: 4px;
				}

				.ra-viz .rac-act {
					width: 28px;
					height: 28px;
					border-radius: 7px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
				}

				.ra-viz .rac-act:hover {
					background: var(--ra-blue-bg);
				}

				.ra-viz .rac-act svg {
					width: 17px;
					height: 17px;
				}

				.ra-viz .rac-mark {
					margin-left: 4px;
					background: var(--ra-navy);
					color: #fff;
					font-size: 11px;
					font-weight: 600;
					border-radius: 7px;
					padding: 6px 11px;
				}

				/* tag row */
				.ra-viz .rac-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 6px;
					padding: 0 14px 8px;
				}

				.ra-viz .rac-tag {
					font-size: 10.5px;
					font-weight: 600;
					border-radius: 6px;
					padding: 3px 9px;
				}

				.ra-viz .rac-tag-plain {
					color: var(--ra-ink-soft);
					background: var(--ra-surface-2);
					border: 1px solid var(--ra-line);
				}

				.ra-viz .rac-tag-blue {
					color: var(--ra-blue-tx);
					background: var(--ra-blue-bg);
				}

				.ra-viz .rac-tag-green {
					color: #0f7a52;
					background: #d8f3e6;
				}

				/* scheduled event chip */
				.ra-viz .rac-event {
					display: flex;
					align-items: center;
					gap: 9px;
					padding: 0 14px 11px;
				}

				.ra-viz .rac-event-chip {
					display: inline-flex;
					align-items: center;
					gap: 7px;
					font-size: 11px;
					font-weight: 600;
					color: var(--ra-blue-tx);
					background: var(--ra-blue-bg);
					border: 1px solid #cfe0f6;
					border-radius: 8px;
					padding: 6px 11px;
				}

				.ra-viz .rac-event-chip svg {
					width: 14px;
					height: 14px;
				}

				.ra-viz .rac-status {
					font-size: 10.5px;
					font-weight: 700;
					border-radius: 6px;
					padding: 4px 10px;
				}

				.ra-viz .rac-status-scheduled {
					color: var(--ra-peach-tx);
					background: var(--ra-peach-bg);
				}

				/* ---- message stream ---- */
				.ra-viz .rac-stream {
					flex: 1;
					overflow: hidden;
					padding: 6px 14px 10px;
					border-top: 1px solid var(--ra-line-soft);
					background: var(--ra-surface-2);
					display: flex;
					flex-direction: column;
				}

				.ra-viz .rac-row {
					display: flex;
					margin-top: 10px;
				}

				.ra-viz .rac-row-out {
					justify-content: flex-end;
				}

				.ra-viz .rac-row-in {
					justify-content: flex-start;
				}

				.ra-viz .rac-bubble {
					max-width: 78%;
					font-size: 12.5px;
					line-height: 1.5 !important;
					border-radius: 14px;
					padding: 10px 13px;
				}

				.ra-viz .rac-bubble-out {
					background: var(--ra-navy);
					color: #fff;
					border-bottom-right-radius: 5px;
				}

				.ra-viz .rac-bubble-in {
					background: var(--ra-surface);
					color: var(--ra-ink);
					border: 1px solid var(--ra-line);
					border-bottom-left-radius: 5px;
				}

				.ra-viz .rac-note {
					color: var(--ra-ink-soft);
				}

				.ra-viz .rac-meta {
					font-family: var(--ra-mono);
					font-size: 10px;
					color: var(--ra-ink-faint);
					margin-top: 4px;
				}

				.ra-viz .rac-meta-out {
					text-align: right;
				}

				.ra-viz .rac-meta-in {
					text-align: left;
				}

				/* per-line delivery status (Sent / Delivered / Opened) */
				.ra-viz .rac-statline {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					gap: 7px;
					margin-top: 8px;
					font-size: 10.5px;
					color: var(--ra-ink-soft);
				}

				.ra-viz .rac-statline span:first-child {
					font-family: var(--ra-mono);
					font-size: 10px;
					color: var(--ra-ink-faint);
				}

				.ra-viz .rac-statline b {
					font-weight: 700;
					color: var(--ra-ink);
				}

				.ra-viz .rac-mail {
					width: 14px;
					height: 14px;
				}

				.ra-viz .rac-deliv {
					font-size: 9.5px;
					font-weight: 700;
					border-radius: 5px;
					padding: 2px 7px;
				}

				.ra-viz .rac-deliv-sent {
					color: var(--ra-blue);
					background: var(--ra-blue-bg);
				}

				.ra-viz .rac-deliv-deliv {
					color: var(--ra-green-tx);
					background: var(--ra-green-bg);
				}

				.ra-viz .rac-deliv-open {
					color: #2f7fd4;
					background: #e4f0fd;
				}

				/* ---- composer ---- */
				.ra-viz .rac-composer {
					padding: 11px 14px 13px;
					border-top: 1px solid var(--ra-line);
					background: var(--ra-surface);
				}

				.ra-viz .rac-composer-label {
					font-size: 12px;
					font-weight: 700;
					color: var(--ra-ink);
					margin-bottom: 7px;
				}

				.ra-viz .rac-composer-row {
					display: flex;
					gap: 9px;
				}

				.ra-viz .rac-input {
					flex: 1;
					background: var(--ra-surface);
					border: 1px solid var(--ra-line);
					border-radius: 8px;
					padding: 9px 12px;
					font-size: 12px;
					color: var(--ra-ink-faint);
				}

				.ra-viz .rac-send {
					background: var(--ra-blue);
					color: #fff;
					font-size: 12px;
					font-weight: 700;
					border-radius: 8px;
					padding: 9px 20px;
				}

				.ra-viz .rac-composer-count {
					font-size: 10.5px;
					color: var(--ra-ink-faint);
					margin-top: 7px;
				}

				/* narrow fallback */
				@media (max-width: 560px) {
					.ra-viz .rac-actions {
						flex-wrap: wrap;
						justify-content: flex-end;
					}
				}

				/* ==========================================================================
   RecruitApp.ai — Core Visual System  (.ra-viz)
   Shared tokens for the ra-viz family of product-visual panels:
   reports, events, communicate, pipeline-intake.
   Include this file on the page BEFORE the individual panel CSS.
   ========================================================================== */

				@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

				.ra-viz {
					/* ---- palette ---- */
					--ra-navy: #03213d;
					--ra-navy-2: #0a2f52;
					--ra-blue: #155fc8;
					--ra-blue-soft: #2f7fd4;
					--ra-teal: #1db795;
					--ra-red: #e0533d;

					/* ---- ui neutrals ---- */
					--ra-ink: #1a2533;
					--ra-ink-soft: #5a6b7e;
					--ra-ink-faint: #8a98a8;
					--ra-line: #e4e9f0;
					--ra-line-soft: #eef2f7;
					--ra-surface: #ffffff;
					--ra-surface-2: #f6f8fb;
					--ra-surface-3: #eef3f9;

					/* ---- status tints ---- */
					--ra-peach-bg: #fdeee4;
					--ra-peach-tx: #c2603e;
					--ra-green-bg: #e6f6ee;
					--ra-green-tx: #1f7a3d;
					--ra-blue-bg: #e8f0fb;
					--ra-blue-tx: #1f6fd6;

					/* ---- type ---- */
					--ra-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
					--ra-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

					/* ---- shape ---- */
					--ra-radius: 16px;
					--ra-radius-sm: 10px;
					--ra-shadow: 0 18px 48px -20px rgba(3, 33, 61, 0.30),
						0 2px 8px -2px rgba(3, 33, 61, 0.10);

					/* baseline so the host page font can't leak in */
					font-family: var(--ra-sans);
					color: var(--ra-ink);
					line-height: 1.45;
					-webkit-font-smoothing: antialiased;
					text-rendering: optimizeLegibility;
				}

				/* ---------------------------------------------------------------------------
   Scoping reset. Forces the properties that host pages most often leak through
   with !important tag rules (color, font, line-height, margin, padding). We do
   NOT use `all: revert` or blanket width/height:auto here — those collapse
   inline SVG <path> geometry to zero. Sizing is left to each element's own
   rules, and SVG color is set per-icon with explicit fills, never currentColor.
   --------------------------------------------------------------------------- */
				.ra-viz,
				.ra-viz *,
				.ra-viz *::before,
				.ra-viz *::after {
					box-sizing: border-box !important;
					margin: 0;
					padding: 0;
					font-family: var(--ra-sans) !important;
					line-height: 1.45 !important;
					color: var(--ra-ink) !important;
					letter-spacing: normal;
					text-transform: none;
					text-align: left;
					text-shadow: none;
					vertical-align: baseline;
					float: none;
				}

				.ra-viz ul,
				.ra-viz ol {
					list-style: none !important;
				}

				.ra-viz button {
					cursor: pointer;
					border: 0;
					background: none;
					text-align: inherit;
				}

				.ra-viz b,
				.ra-viz strong {
					font-weight: 700;
				}

				/* SVG must keep block layout but never inherit the forced color as a paint;
   each icon sets its own stroke/fill with explicit hex. */
				.ra-viz svg {
					display: block;
				}

				/* ---- browser-chrome header (shared across panels) ---- */
				.ra-viz .ra-chrome {
					display: flex;
					align-items: center;
					gap: 8px;
					padding: 12px 16px;
					background: var(--ra-surface-2);
					border-bottom: 1px solid var(--ra-line);
				}

				.ra-viz .ra-chrome-dots {
					display: flex;
					gap: 7px;
				}

				.ra-viz .ra-chrome-dots i {
					width: 11px;
					height: 11px;
					border-radius: 50%;
					display: block;
				}

				.ra-viz .ra-chrome-dots i:nth-child(1) {
					background: #f0625a;
				}

				.ra-viz .ra-chrome-dots i:nth-child(2) {
					background: #f5bd4f;
				}

				.ra-viz .ra-chrome-dots i:nth-child(3) {
					background: #5cc663;
				}

				.ra-viz .ra-chrome-title {
					font-size: 12.5px;
					font-weight: 600;
					color: var(--ra-ink-soft);
					letter-spacing: 0.01em;
					margin-left: 6px;
				}


					/* ===========================================================================
   panel-bulk.css  —  RecruitApp.ai "Bulk Messaging" / Create Campaign visual
   SELF-CONTAINED. Hard-scoped under .rabm-root with the rabm- prefix (same
   pattern as stages / pipelines). No core file required.

   Scoping rules (per handoff):
   - explicit-property reset on every descendant; NO `all: revert`, NO blanket
     width/height:auto (those collapse inline SVG <path> geometry to zero).
   - layout-critical props (display, color, font, line-height) forced with
     !important so host !important tag rules can't win.
   - SVG sizing/fill set explicitly per icon; never currentColor.
   =========================================================================== */

				@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

				.rabm-root {
					--bm-navy: #03213d;
					--bm-navy-2: #0a2f52;
					--bm-blue: #155fc8;
					--bm-blue-bg: #e8f0fb;
					--bm-teal: #1db795;
					--bm-green: #1f8a4c;
					--bm-green-d: #186e3d;
					--bm-ink: #1a2533;
					--bm-soft: #5a6b7e;
					--bm-faint: #8a98a8;
					--bm-line: #e4e9f0;
					--bm-line-2: #eef2f7;
					--bm-surf: #ffffff;
					--bm-surf-2: #f6f8fb;
					--bm-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
					--bm-mono: 'JetBrains Mono', ui-monospace, monospace;
				}

				/* ---- scoped reset (explicit props only; SVG-safe) ---- */
				.rabm-root,
				.rabm-root *,
				.rabm-root *::before,
				.rabm-root *::after {
					box-sizing: border-box !important;
					margin: 0;
					padding: 0;
					border: 0;
					font-family: var(--bm-sans) !important;
					font-weight: 400;
					font-style: normal;
					line-height: 1.45 !important;
					color: var(--bm-ink) !important;
					letter-spacing: normal;
					text-transform: none;
					text-align: left;
					text-shadow: none;
					text-decoration: none;
					vertical-align: baseline;
					background: transparent;
					float: none;
				}

				.rabm-root b,
				.rabm-root strong {
					font-weight: 700;
				}

				.rabm-root button {
					cursor: pointer;
				}

				.rabm-root svg {
					display: block;
				}

				/* keep block layout; size set per icon */

				/* ---- card ---- */
				.rabm-root .rabm-card {
					display: block !important;
					width: 100%;
					background: var(--bm-surf) !important;
					border: 1px solid var(--bm-line) !important;
					border-radius: 16px;
					box-shadow: 0 18px 48px -20px rgba(3, 33, 61, .30), 0 2px 8px -2px rgba(3, 33, 61, .10);
					overflow: hidden;
				}

				/* ---- browser chrome ---- */
				.rabm-root .rabm-chrome {
					display: flex !important;
					align-items: center;
					gap: 8px;
					padding: 12px 16px;
					background: var(--bm-surf-2) !important;
					border-bottom: 1px solid var(--bm-line) !important;
				}

				.rabm-root .rabm-dots {
					display: flex !important;
					gap: 7px;
				}

				.rabm-root .rabm-dots i {
					width: 11px;
					height: 11px;
					border-radius: 50%;
					display: block !important;
				}

				.rabm-root .rabm-dots i:nth-child(1) {
					background: #f0625a !important;
				}

				.rabm-root .rabm-dots i:nth-child(2) {
					background: #f5bd4f !important;
				}

				.rabm-root .rabm-dots i:nth-child(3) {
					background: #5cc663 !important;
				}

				.rabm-root .rabm-chrome-title {
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--bm-soft) !important;
					margin-left: 6px;
				}

				/* ---- body ---- */
				.rabm-root .rabm-body {
					display: block !important;
					padding: 14px 16px 16px;
				}

				/* ---- head ---- */
				.rabm-root .rabm-head {
					display: flex !important;
					align-items: center;
					justify-content: space-between;
					gap: 12px;
					margin-bottom: 10px;
				}

				.rabm-root .rabm-head-l {
					display: flex !important;
					align-items: center;
					gap: 9px;
				}

				.rabm-root .rabm-head-ico {
					width: 22px !important;
					height: 22px !important;
					flex: none;
				}

				.rabm-root .rabm-head-title {
					font-size: 17px;
					font-weight: 700 !important;
					color: var(--bm-navy) !important;
					letter-spacing: -0.01em !important;
				}

				/* recipients + credits inline strip (replaces sidebar card) */
				.rabm-root .rabm-stats {
					display: flex !important;
					align-items: center;
					gap: 10px;
					background: var(--bm-blue-bg) !important;
					border: 1px solid #cfe0f6 !important;
					border-radius: 9px;
					padding: 6px 11px;
					white-space: nowrap;
				}

				.rabm-root .rabm-recip {
					font-size: 11.5px;
					font-weight: 500 !important;
					color: var(--bm-soft) !important;
				}

				.rabm-root .rabm-recip b {
					color: var(--bm-blue) !important;
					font-weight: 800 !important;
					font-size: 13px;
				}

				/* ---- audience line ---- */
				.rabm-root .rabm-audience {
					display: flex !important;
					align-items: center;
					gap: 7px;
					font-size: 12px;
					font-weight: 600 !important;
					color: var(--bm-soft) !important;
					margin-bottom: 12px;
				}

				.rabm-root .rabm-audience svg {
					width: 15px !important;
					height: 15px !important;
					flex: none;
				}

				.rabm-root .rabm-dot-sep {
					color: var(--bm-faint) !important;
					margin: 0 2px;
				}

				/* ---- campaign types ---- */
				.rabm-root .rabm-types {
					display: flex !important;
					align-items: center;
					flex-wrap: nowrap !important;
					justify-content: space-between;
					gap: 10px;
					padding: 11px 15px;
					border: 1px solid var(--bm-line) !important;
					border-radius: 10px;
					background: var(--bm-surf-2) !important;
					margin-bottom: 13px;
				}

				.rabm-root .rabm-check {
					display: inline-flex !important;
					align-items: center;
					gap: 8px;
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--bm-ink) !important;
					white-space: nowrap !important;
					flex: none;
				}

				.rabm-root .rabm-box {
					width: 17px;
					height: 17px;
					flex: none;
					border: 1.6px solid #c3ccd6 !important;
					border-radius: 5px;
					background: var(--bm-surf) !important;
					display: inline-flex !important;
					align-items: center;
					justify-content: center;
				}

				.rabm-root .rabm-box-on {
					background: var(--bm-blue) !important;
					border-color: var(--bm-blue) !important;
				}

				.rabm-root .rabm-box-on svg {
					width: 13px !important;
					height: 13px !important;
				}

				/* ---- message field ---- */
				.rabm-root .rabm-field {
					display: block !important;
					margin-bottom: 13px;
				}

				.rabm-root .rabm-label-row {
					display: flex !important;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 6px;
				}

				.rabm-root .rabm-label {
					font-size: 11px;
					font-weight: 700 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.05em !important;
					color: var(--bm-soft) !important;
				}

				.rabm-root .rabm-insert {
					display: inline-flex !important;
					align-items: center;
					gap: 5px;
					font-size: 11px;
					font-weight: 700 !important;
					color: var(--bm-blue) !important;
				}

				.rabm-root .rabm-insert svg {
					width: 13px !important;
					height: 13px !important;
				}

				.rabm-root .rabm-input {
					display: block !important;
					background: var(--bm-surf) !important;
					border: 1px solid var(--bm-line) !important;
					border-radius: 9px;
					padding: 11px 13px;
					font-size: 12.5px;
					color: var(--bm-ink) !important;
				}

				.rabm-root .rabm-input-message {
					line-height: 1.7 !important;
				}

				.rabm-root .rabm-token {
					display: inline !important;
					font-family: var(--bm-mono) !important;
					font-size: 11px;
					font-weight: 600 !important;
					color: var(--bm-blue) !important;
					background: var(--bm-blue-bg) !important;
					border: 1px solid #cfe0f6 !important;
					border-radius: 5px;
					padding: 1px 5px;
					white-space: nowrap;
				}

				.rabm-root .rabm-counter {
					font-size: 10.5px;
					color: var(--bm-faint) !important;
					margin-top: 6px;
					font-family: var(--bm-mono) !important;
				}

				/* ---- preview ---- */
				.rabm-root .rabm-preview {
					display: block !important;
					background: var(--bm-surf-2) !important;
					border: 1px solid var(--bm-line) !important;
					border-radius: 10px;
					padding: 11px 13px;
					margin-bottom: 13px;
				}

				.rabm-root .rabm-preview-title {
					display: flex !important;
					align-items: center;
					gap: 6px;
					font-size: 10px;
					font-weight: 700 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.06em !important;
					color: var(--bm-faint) !important;
					margin-bottom: 9px;
				}

				.rabm-root .rabm-preview-title svg {
					width: 13px !important;
					height: 13px !important;
				}

				.rabm-root .rabm-preview-item {
					font-size: 11.5px;
					line-height: 1.5 !important;
					color: var(--bm-soft) !important;
					padding: 7px 10px;
					background: var(--bm-surf) !important;
					border: 1px solid var(--bm-line-2) !important;
					border-radius: 8px;
				}

				.rabm-root .rabm-preview-item+.rabm-preview-item {
					margin-top: 7px;
				}

				.rabm-root .rabm-preview-item strong {
					color: var(--bm-ink) !important;
					font-weight: 700 !important;
				}

				/* ---- footer ---- */
				.rabm-root .rabm-foot {
					display: flex !important;
					align-items: center;
					justify-content: space-between;
					gap: 12px;
					flex-wrap: wrap;
					padding-top: 13px;
					border-top: 1px solid var(--bm-line) !important;
				}

				.rabm-root .rabm-foot-meta {
					display: flex !important;
					align-items: center;
					gap: 7px;
					font-size: 11.5px;
					font-weight: 500 !important;
					color: var(--bm-soft) !important;
				}

				.rabm-root .rabm-magic {
					width: 16px !important;
					height: 16px !important;
					flex: none;
				}

				.rabm-root .rabm-send {
					background: var(--bm-green) !important;
					color: #fff !important;
					font-size: 12.5px;
					font-weight: 700 !important;
					border-radius: 9px;
					padding: 10px 18px;
					box-shadow: 0 1px 0 var(--bm-green-d);
				}

				.rabm-root .rabm-send:hover {
					background: var(--bm-green-d) !important;
				}

				/* ---- narrow fallback ---- */
				@media (max-width: 540px) {
					.rabm-root .rabm-head {
						flex-wrap: wrap;
					}

					.rabm-root .rabm-foot {
						justify-content: stretch;
					}

					.rabm-root .rabm-send {
						width: 100%;
						text-align: center;
					}
				}


				/* ===========================================================================
   panel-campaign.css  —  RecruitApp.ai "Automated Campaigns" visual
   SELF-CONTAINED, hard-scoped under .racm-root (racm- prefix). No core file.

   Header restyled to the real single-event page (title + calendar date line +
   badge row + bordered stat cards). Body = the kept campaign timeline.

   Scoping per handoff: explicit-property reset (NO all:revert, NO blanket
   width/height:auto -> would zero inline SVG); layout-critical props forced
   with !important; SVG sizing/fill explicit per icon (never currentColor).
   =========================================================================== */

				@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

				.racm-root {
					--cm-navy: #03213d;
					--cm-navy-2: #0a2f52;
					--cm-blue: #155fc8;
					--cm-blue-bg: #e8f0fb;
					--cm-teal: #1db795;
					--cm-teal-bg: #e2f6f0;
					--cm-ink: #1a2533;
					--cm-soft: #5a6b7e;
					--cm-faint: #8a98a8;
					--cm-line: #e4e9f0;
					--cm-line-2: #eef2f7;
					--cm-surf: #ffffff;
					--cm-surf-2: #f6f8fb;
					--cm-peach-bg: #fdeee4;
					--cm-peach-tx: #c2603e;
					--cm-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
					--cm-mono: 'JetBrains Mono', ui-monospace, monospace;
				}

				/* ---- scoped reset (explicit props only; SVG-safe) ---- */
				.racm-root,
				.racm-root *,
				.racm-root *::before,
				.racm-root *::after {
					box-sizing: border-box !important;
					margin: 0;
					padding: 0;
					border: 0;
					font-family: var(--cm-sans) !important;
					font-weight: 400;
					font-style: normal;
					line-height: 1.45 !important;
					color: var(--cm-ink) !important;
					letter-spacing: normal;
					text-transform: none;
					text-align: left;
					text-shadow: none;
					text-decoration: none;
					vertical-align: baseline;
					background: transparent;
					float: none;
				}

				.racm-root b,
				.racm-root strong {
					font-weight: 700;
				}

				.racm-root svg {
					display: block;
				}

				/* ---- card ---- */
				.racm-root .racm-card {
					display: block !important;
					width: 100%;
					background: var(--cm-surf) !important;
					border: 1px solid var(--cm-line) !important;
					border-radius: 16px;
					box-shadow: 0 18px 48px -20px rgba(3, 33, 61, .30), 0 2px 8px -2px rgba(3, 33, 61, .10);
					overflow: hidden;
				}

				/* ---- browser chrome ---- */
				.racm-root .racm-chrome {
					display: flex !important;
					align-items: center;
					gap: 8px;
					padding: 12px 16px;
					background: var(--cm-surf-2) !important;
					border-bottom: 1px solid var(--cm-line) !important;
				}

				.racm-root .racm-dots {
					display: flex !important;
					gap: 7px;
				}

				.racm-root .racm-dots i {
					width: 11px;
					height: 11px;
					border-radius: 50%;
					display: block !important;
				}

				.racm-root .racm-dots i:nth-child(1) {
					background: #f0625a !important;
				}

				.racm-root .racm-dots i:nth-child(2) {
					background: #f5bd4f !important;
				}

				.racm-root .racm-dots i:nth-child(3) {
					background: #5cc663 !important;
				}

				.racm-root .racm-chrome-title {
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--cm-soft) !important;
					margin-left: 6px;
				}

				/* ---- event-page header ---- */
				.racm-root .racm-head {
					display: block !important;
					padding: 15px 17px 14px;
					border-bottom: 1px solid var(--cm-line) !important;
				}

				.racm-root .racm-head-top {
					display: flex !important;
					align-items: flex-start;
					justify-content: space-between;
					gap: 14px;
				}

				.racm-root .racm-head-l {
					min-width: 0;
				}

				.racm-root .racm-title {
					font-size: 19px;
					font-weight: 700 !important;
					color: var(--cm-navy) !important;
					letter-spacing: -0.015em !important;
					line-height: 1.2 !important;
				}

				.racm-root .racm-date {
					display: flex !important;
					align-items: center;
					gap: 7px;
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--cm-soft) !important;
					margin-top: 6px;
				}

				.racm-root .racm-date svg {
					width: 15px !important;
					height: 15px !important;
					flex: none;
				}

				/* stat cards (event-page style) */
				.racm-root .racm-stats {
					display: flex !important;
					gap: 9px;
					flex: none;
				}

				.racm-root .racm-stat {
					display: block !important;
					text-align: center !important;
					border: 1px solid var(--cm-line) !important;
					border-radius: 10px;
					padding: 7px 14px;
					background: var(--cm-surf) !important;
					min-width: 74px;
				}

				.racm-root .racm-stat-reg {
					background: var(--cm-blue-bg) !important;
					border-color: #cfe0f6 !important;
				}

				.racm-root .racm-stat-conf {
					background: var(--cm-teal-bg) !important;
					border-color: #c2ebe0 !important;
				}

				.racm-root .racm-stat-num {
					font-size: 21px;
					font-weight: 800 !important;
					line-height: 1.1 !important;
					color: var(--cm-navy) !important;
				}

				.racm-root .racm-stat-reg .racm-stat-num {
					color: var(--cm-blue) !important;
				}

				.racm-root .racm-stat-conf .racm-stat-num {
					color: #0f8a6b !important;
				}

				.racm-root .racm-stat-label {
					font-size: 9px;
					font-weight: 700 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.07em !important;
					color: var(--cm-faint) !important;
					text-align: center !important;
					margin-top: 2px;
				}

				/* badge row */
				.racm-root .racm-badges {
					display: flex !important;
					flex-wrap: wrap;
					align-items: center;
					gap: 7px;
					margin-top: 12px;
				}

				.racm-root .racm-badge {
					display: inline-flex !important;
					align-items: center;
					gap: 5px;
					font-size: 11px;
					font-weight: 600 !important;
					border-radius: 6px;
					padding: 4px 9px;
					border: 1px solid var(--cm-line) !important;
					color: var(--cm-soft) !important;
					background: var(--cm-surf) !important;
				}

				.racm-root .racm-badge svg {
					width: 12px !important;
					height: 12px !important;
				}

				.racm-root .racm-badge-event {
					color: #0f8a6b !important;
					background: var(--cm-teal-bg) !important;
					border-color: #c2ebe0 !important;
				}

				.racm-root .racm-badge-public {
					color: var(--cm-soft) !important;
				}

				.racm-root .racm-badge-pos {
					color: var(--cm-soft) !important;
					background: var(--cm-surf-2) !important;
				}

				/* ---- timeline body ---- */
				.racm-root .racm-body {
					display: block !important;
					padding: 15px 17px 16px;
				}

				.racm-root .racm-step {
					display: flex !important;
					gap: 12px;
					position: relative !important;
					padding-bottom: 15px;
				}

				/* vertical connector line behind the icons */
				.racm-root .racm-step::before {
					content: "" !important;
					position: absolute !important;
					left: 13px;
					top: 26px;
					bottom: -2px;
					width: 2px;
					background: var(--cm-line) !important;
					display: block !important;
				}

				.racm-root .racm-last {
					padding-bottom: 0;
				}

				.racm-root .racm-last::before {
					display: none !important;
				}

				.racm-root .racm-step-ico {
					width: 28px;
					height: 28px;
					flex: none;
					position: relative !important;
					z-index: 1 !important;
					border-radius: 50%;
					display: inline-flex !important;
					align-items: center;
					justify-content: center;
				}

				.racm-root .racm-done .racm-step-ico {
					background: var(--cm-blue) !important;
				}

				.racm-root .racm-done .racm-step-ico svg {
					width: 15px !important;
					height: 15px !important;
				}

				.racm-root .racm-queued .racm-step-ico {
					background: var(--cm-teal-bg) !important;
					border: 1.5px solid #bfe8dd !important;
				}

				.racm-root .racm-queued .racm-step-ico svg {
					width: 15px !important;
					height: 15px !important;
				}

				.racm-root .racm-step-main {
					padding-top: 3px;
					min-width: 0;
				}

				.racm-root .racm-step-title {
					font-size: 13.5px;
					font-weight: 700 !important;
					color: var(--cm-navy) !important;
				}

				.racm-root .racm-queued .racm-step-title {
					color: var(--cm-ink) !important;
				}

				.racm-root .racm-step-meta {
					font-size: 11.5px;
					color: var(--cm-soft) !important;
					margin-top: 2px;
				}

				.racm-root .racm-sep {
					color: var(--cm-faint) !important;
					margin: 0 3px;
				}

				/* ---- narrow fallback ---- */
				@media (max-width: 540px) {
					.racm-root .racm-head-top {
						flex-direction: column;
					}

					.racm-root .racm-stats {
						width: 100%;
					}

					.racm-root .racm-stat {
						flex: 1;
					}
				}

				/* ===========================================================================
   panel-team.css  —  RecruitApp.ai "Collaborative by design" visual
   SELF-CONTAINED, hard-scoped under .ratm-root (ratm- prefix). No core file.

   Styled as the real single-prospect view (avatar + name + position/stage
   pills + recruiter stack), the Tasks/Comm/Activity tab strip with Activity
   Log active, and the team activity feed as that tab's content.

   Scoping per handoff: explicit-property reset (NO all:revert, NO blanket
   width/height:auto -> zeroes inline SVG); layout-critical props !important;
   SVG sizing/fill explicit per icon (never currentColor).
   =========================================================================== */

				@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

				.ratm-root {
					--tm-navy: #03213d;
					--tm-blue: #155fc8;
					--tm-blue-bg: #e8f0fb;
					--tm-teal: #1db795;
					--tm-ink: #1a2533;
					--tm-soft: #5a6b7e;
					--tm-faint: #8a98a8;
					--tm-line: #e4e9f0;
					--tm-line-2: #eef2f7;
					--tm-surf: #ffffff;
					--tm-surf-2: #f6f8fb;
					--tm-peach-bg: #fdeee4;
					--tm-peach-tx: #c2603e;
					--tm-purple: #9b51c9;
					--tm-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
					--tm-mono: 'JetBrains Mono', ui-monospace, monospace;
				}

				/* ---- scoped reset (explicit props only; SVG-safe) ---- */
				.ratm-root,
				.ratm-root *,
				.ratm-root *::before,
				.ratm-root *::after {
					box-sizing: border-box !important;
					margin: 0;
					padding: 0;
					border: 0;
					font-family: var(--tm-sans) !important;
					font-weight: 400;
					font-style: normal;
					line-height: 1.45 !important;
					color: var(--tm-ink) !important;
					letter-spacing: normal;
					text-transform: none;
					text-align: left;
					text-shadow: none;
					text-decoration: none;
					vertical-align: baseline;
					background: transparent;
					float: none;
				}

				.ratm-root b,
				.ratm-root strong {
					font-weight: 700;
				}

				.ratm-root svg {
					display: block;
				}

				/* ---- card ---- */
				.ratm-root .ratm-card {
					display: block !important;
					width: 100%;
					background: var(--tm-surf) !important;
					border: 1px solid var(--tm-line) !important;
					border-radius: 16px;
					box-shadow: 0 18px 48px -20px rgba(3, 33, 61, .30), 0 2px 8px -2px rgba(3, 33, 61, .10);
					overflow: hidden;
				}

				/* ---- browser chrome ---- */
				.ratm-root .ratm-chrome {
					display: flex !important;
					align-items: center;
					gap: 8px;
					padding: 12px 16px;
					background: var(--tm-surf-2) !important;
					border-bottom: 1px solid var(--tm-line) !important;
				}

				.ratm-root .ratm-dots {
					display: flex !important;
					gap: 7px;
				}

				.ratm-root .ratm-dots i {
					width: 11px;
					height: 11px;
					border-radius: 50%;
					display: block !important;
				}

				.ratm-root .ratm-dots i:nth-child(1) {
					background: #f0625a !important;
				}

				.ratm-root .ratm-dots i:nth-child(2) {
					background: #f5bd4f !important;
				}

				.ratm-root .ratm-dots i:nth-child(3) {
					background: #5cc663 !important;
				}

				.ratm-root .ratm-chrome-title {
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--tm-soft) !important;
					margin-left: 6px;
				}

				/* ---- prospect header ---- */
				.ratm-root .ratm-head {
					display: flex !important;
					align-items: flex-start;
					justify-content: space-between;
					gap: 12px;
					padding: 15px 17px 13px;
				}

				.ratm-root .ratm-id {
					display: flex !important;
					align-items: center;
					gap: 11px;
					min-width: 0;
				}

				.ratm-root .ratm-avatar {
					width: 34px !important;
					height: 34px !important;
					flex: none;
				}

				.ratm-root .ratm-name {
					font-size: 18px;
					font-weight: 700 !important;
					color: var(--tm-navy) !important;
					letter-spacing: -0.015em !important;
					line-height: 1.2 !important;
				}

				.ratm-root .ratm-pills {
					display: flex !important;
					flex-wrap: wrap;
					gap: 6px;
					margin-top: 5px;
				}

				.ratm-root .ratm-pill {
					font-size: 10.5px;
					font-weight: 600 !important;
					border-radius: 6px;
					padding: 3px 9px;
					border: 1px solid var(--tm-line) !important;
					color: var(--tm-soft) !important;
					background: var(--tm-surf) !important;
				}

				.ratm-root .ratm-pill-plain {
					background: var(--tm-surf-2) !important;
				}

				.ratm-root .ratm-pill-stage {
					color: #7a36a8 !important;
					background: #f3e7fb !important;
					border-color: #e3cdf3 !important;
				}

				.ratm-root .ratm-head-r {
					display: flex !important;
					flex-direction: column;
					align-items: flex-end;
					gap: 9px;
					flex: none;
				}

				.ratm-root .ratm-type {
					font-size: 12px;
					font-weight: 700 !important;
					color: var(--tm-navy) !important;
					border: 1px solid #cfe0f6 !important;
					background: var(--tm-blue-bg) !important;
					border-radius: 8px;
					padding: 5px 12px;
				}

				.ratm-root .ratm-recruiters {
					display: flex !important;
				}

				.ratm-root .ratm-rec {
					width: 26px;
					height: 26px;
					border-radius: 50%;
					display: inline-flex !important;
					align-items: center;
					justify-content: center;
					font-size: 9.5px;
					font-weight: 700 !important;
					color: #fff !important;
					border: 2px solid var(--tm-surf) !important;
					margin-left: -8px;
				}

				.ratm-root .ratm-recruiters .ratm-rec:first-child {
					margin-left: 0;
				}

				.ratm-root .ratm-rec-1 {
					background: #155fc8 !important;
				}

				.ratm-root .ratm-rec-2 {
					background: #1db795 !important;
				}

				.ratm-root .ratm-rec-3 {
					background: #9b51c9 !important;
				}

				/* ---- tab strip ---- */
				.ratm-root .ratm-tabs {
					display: flex !important;
					align-items: center;
					gap: 20px;
					padding: 0 17px;
					border-bottom: 1px solid var(--tm-line) !important;
				}

				.ratm-root .ratm-tab {
					display: inline-flex !important;
					align-items: center;
					gap: 7px;
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--tm-faint) !important;
					padding: 11px 1px 10px;
					border-bottom: 2px solid transparent !important;
					white-space: nowrap;
				}

				.ratm-root .ratm-tab svg {
					width: 15px !important;
					height: 15px !important;
				}

				.ratm-root .ratm-tab-on {
					color: var(--tm-blue) !important;
					border-bottom-color: var(--tm-blue) !important;
				}

				.ratm-root .ratm-tab-count {
					font-size: 10px;
					font-weight: 700 !important;
					color: var(--tm-soft) !important;
					background: var(--tm-surf-2) !important;
					border: 1px solid var(--tm-line) !important;
					border-radius: 9px;
					padding: 1px 7px;
				}

				.ratm-root .ratm-tab-count-on {
					color: var(--tm-blue) !important;
					background: var(--tm-blue-bg) !important;
					border-color: #cfe0f6 !important;
				}

				/* ---- activity feed ---- */
				.ratm-root .ratm-feed {
					display: block !important;
					padding: 13px 17px 6px;
				}

				.ratm-root .ratm-event {
					display: flex !important;
					align-items: flex-start;
					gap: 11px;
					position: relative !important;
					padding-bottom: 15px;
				}

				.ratm-root .ratm-event::before {
					content: "" !important;
					position: absolute !important;
					left: 14px;
					top: 30px;
					bottom: -2px;
					width: 2px;
					background: var(--tm-line) !important;
					display: block !important;
				}

				.ratm-root .ratm-last {
					padding-bottom: 4px;
				}

				.ratm-root .ratm-last::before {
					display: none !important;
				}

				.ratm-root .ratm-ev-avatar {
					width: 30px;
					height: 30px;
					flex: none;
					border-radius: 50%;
					display: inline-flex !important;
					align-items: center;
					justify-content: center;
					font-size: 10px;
					font-weight: 700 !important;
					color: #fff !important;
					position: relative !important;
					z-index: 1 !important;
				}

				.ratm-root .ratm-ev-main {
					flex: 1;
					min-width: 0;
					padding-top: 1px;
				}

				.ratm-root .ratm-ev-line {
					font-size: 13px;
					color: var(--tm-ink) !important;
				}

				.ratm-root .ratm-ev-line strong {
					color: var(--tm-navy) !important;
					font-weight: 700 !important;
				}

				.ratm-root .ratm-ev-time {
					font-size: 11px;
					color: var(--tm-faint) !important;
					margin-top: 2px;
					font-family: var(--tm-mono) !important;
				}

				.ratm-root .ratm-sep {
					color: var(--tm-faint) !important;
					margin: 0 3px;
				}

				.ratm-root .ratm-ev-ch {
					width: 26px;
					height: 26px;
					flex: none;
					border-radius: 7px;
					display: inline-flex !important;
					align-items: center;
					justify-content: center;
				}

				.ratm-root .ratm-ev-ch svg {
					width: 14px !important;
					height: 14px !important;
				}

				.ratm-root .ratm-ch-sms {
					background: #e2f6f0 !important;
				}

				.ratm-root .ratm-ch-call {
					background: #e4f0fd !important;
				}

				.ratm-root .ratm-ch-email {
					background: #f3e7fb !important;
				}

				.ratm-root .ratm-ch-stage {
					background: var(--tm-surf-2) !important;
				}

				/* ---- footer ---- */
				.ratm-root .ratm-foot {
					display: flex !important;
					align-items: center;
					gap: 8px;
					padding: 12px 17px 14px;
					border-top: 1px solid var(--tm-line) !important;
					font-size: 12px;
					font-weight: 600 !important;
					color: var(--tm-soft) !important;
					background: var(--tm-surf-2) !important;
				}

				.ratm-root .ratm-foot svg {
					width: 15px !important;
					height: 15px !important;
					flex: none;
				}

				/* ---- narrow fallback ---- */
				@media (max-width: 540px) {
					.ratm-root .ratm-tabs {
						gap: 13px;
						overflow: hidden;
					}

					.ratm-root .ratm-tab {
						font-size: 11.5px;
					}
				}

@media (max-width:768px){
  html, body{
    overflow-x:hidden;
  }
  .container{
    overflow:hidden;
    max-width:100vw;
  }
  section{
    overflow:hidden;
  }
}