/* Activity tray — global bottom-right background-job indicator.
   Mounted once in the admin shell (see Job\Widget\ActivityTray + activityTray.js).
   Neutral admin surface; the one signature moment is the green completion
   sweep on a card before it fades. Class prefix: .at- */

.at-tray {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 900;            /* above page content, below modal dialogs */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	width: 320px;
	max-width: calc(100vw - 32px);
	font-size: 12px;
	pointer-events: none;    /* container is click-through; cards opt back in */
}

.at-stack {
	display: flex;
	flex-direction: column;
	/* No flex `gap` — gap can't animate, so a collapsing card would leave an
	   8px phantom space until removal and the row below would snap up. Spacing
	   lives on each card's margin-bottom instead, which transitions to 0 as the
	   card folds, so the stack scrolls up smoothly. */
}

/* --at-brand mirrors the platform brand blue (--brand-blue #1C647D); the PDF
   stylesheet that declares --brand-* isn't loaded in the admin shell, so the
   value lives here. The tile's running accent uses it. */
.at-tray { --at-brand: #1C647D; }

.at-card {
	pointer-events: auto;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-left: 3px solid var(--at-accent, #1C647D);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	padding: 8px 10px;
	margin-bottom: 8px;      /* transitionable stack spacing (see .at-stack) */
	cursor: pointer;
	overflow: hidden;
	/* Kept close to the real card height (~76px) so the collapse-to-0 maps to the
	   visible height — a looser cap (e.g. 120px) spends the first third of the
	   transition invisibly shrinking empty space, then snaps, which read as an
	   abrupt drop when several tiles cleared at once. */
	max-height: 96px;
	animation: at-slide-up 0.45s ease;
	transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.5s ease,
		padding 0.5s ease, margin 0.5s ease;
}

.at-card.-queued { --at-accent: #9aa0a6; }
.at-card.-done   { --at-accent: #66bb6a; }   /* matches the import-status "done" green */
.at-card.-failed { --at-accent: #ef5350; }   /* matches the import-status "fail" red */

/* terminal fade-out before removal — drift UP and fold away so the card reads
   as scrolling off the top while the stack rises into its place. */
.at-card.-fade {
	opacity: 0;
	transform: translateY(-10px);
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
	box-shadow: none;
}

/* Completed (green) tiles instead drop away — fade out and slide DOWN — so a
   finished task reads as falling off the bottom rather than scrolling up. A
   touch longer + ease-in so a stack of them glides out gracefully, not snaps. */
.at-card.-done.-fade {
	transform: translateY(18px);
	transition: opacity 0.55s ease-in, transform 0.55s ease-in, max-height 0.55s ease-in,
		padding 0.55s ease-in, margin 0.55s ease-in;
}

.at-card-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.at-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--at-accent, #1C647D);
}

/* running spinner — a dot tracing a figure-8 between two faint rings,
   tinted with the card accent (the data-status "iss-spinner" look). */
.at-spin8 {
	flex: 0 0 auto;
	width: 28px;
	height: 14px;
	color: var(--at-accent, #1C647D);
}

.at-label {
	flex: 1 1 auto;
	min-width: 0;            /* let the label ellipsize instead of shoving the chip/arrow out of the flex row */
	font-weight: 600;
	color: #202124;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* cross-channel chip on the title row: which channel the work is running in, and
   who triggered it. Only shown for tiles whose job is in a channel other than the
   one being viewed (g.crossChannel) — same-channel tiles stay chip-free. */
.at-chip {
	flex: 0 0 auto;
	max-width: 48%;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 9px;
	background: rgba(28, 100, 125, 0.10);
	color: var(--at-brand, #1C647D);
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* clickable variant: the chip switches into that channel (auto-login) */
a.at-chip.-link {
	text-decoration: none;
	cursor: pointer;
}
a.at-chip.-link:hover {
	background: rgba(28, 100, 125, 0.18);
	text-decoration: underline;
}

.at-link {
	flex: 0 0 auto;
	color: #5f6368;
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
}
.at-link:hover { color: #202124; }

/* explicit dismiss control on settled (done/failed) cards — distinct from the
   jump-out arrow so tapping the body opens the log rather than losing the card */
.at-x {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-left: 2px;
	padding: 0;
	border: none;
	background: transparent;
	color: #9aa0a6;
	font-size: 16px;
	line-height: 15px;
	text-align: center;
	cursor: pointer;
	border-radius: 50%;
}
.at-x:hover { color: #202124; background: rgba(0, 0, 0, 0.07); }

/* failure summary tile (2+ failures) — reads as one actionable review prompt */
.at-card.-summary .at-label { color: #c62828; }

.at-status {
	color: #5f6368;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.at-bar {
	height: 4px;
	background: #eee;
	border-radius: 2px;
	margin-top: 7px;
	overflow: hidden;
}
.at-bar-fill {
	height: 100%;
	width: 0;
	background: var(--at-accent, #1C647D);
	/* Ease batch progress over one poll interval, linear (no ramp), so the bar
	   glides — including backwards when more work is queued mid-run — and lands
	   just as the next poll arrives (one tick behind, by design). */
	transition: width 3s linear;
}
/* URGENT tiles snap (see snaps()): the bar tracks the screen, not a slow ease. */
.at-card.-snap .at-bar-fill { transition: width 0.2s linear; }

/* sub-row under the title: the friendly object ref on the left, the running
   spinner / status dot tucked in just after it. */
.at-subrow {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	min-height: 14px;   /* hold the row's height when only the dot is present */
}

/* friendly object reference (e.g. "BOL: ABC123") — shown only when the working
   job declares one. Tinted brand blue; shrinks/ellipsizes so the spinner stays
   right beside it. */
.at-ref {
	flex: 0 1 auto;
	min-width: 0;
	color: var(--at-brand, #1C647D);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* per-type group tile: a stable headline + batch bar + eased counters */
.at-meta {
	display: flex;
	align-items: baseline;
	margin-top: 5px;
	color: #5f6368;
	font-variant-numeric: tabular-nums;   /* digits don't jitter as they tick */
}
.at-meta-gap { flex: 1 1 auto; }
.at-done { color: #2e7d32; font-weight: 600; }
.at-card.-done .at-done { color: #2e7d32; }

.at-more {
	pointer-events: auto;
	align-self: flex-end;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 3px 10px;
	font-size: 11px;
	color: #5f6368;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.at-more:hover { color: #202124; }

@keyframes at-slide-up {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.at-card { animation: none; transition: opacity 0.2s ease; }
	.at-bar-fill { transition: none; }
}