/**
 * AltGenius: block editor panel and Media Library notification bar (SLAI-12).
 *
 * These screens live outside the plugin's admin page, so the few design
 * tokens they need are set on their own roots. Every class is prefixed.
 */

/* ---- Block editor panel ---- */
.atlasai-agpanel__help,
.atlasai-agpanel__status,
.atlasai-agpanel__current {
	margin: 4px 0;
	font-size: 12px;
	line-height: 1.5;
	color: #43524f;
}

.atlasai-agpanel__status {
	font-style: italic;
}

.atlasai-agpanel__item {
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #d6dedd;
}

.atlasai-agpanel__item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.atlasai-agpanel__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 120px;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 8px;
}

.atlasai-agpanel__edit {
	margin-top: 8px;
}

.atlasai-agpanel__edit .components-button + .components-button {
	margin-inline-start: 8px;
}

.atlasai-agpanel__item > .components-button {
	margin-top: 4px;
}

/* ---- Media modal button (class name kept for existing custom CSS) ---- */
.atlas-ai-generate-alt-btn {
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ---- Media Library notification bar ---- */
.atlasai-agbar {
	--atlasai-agbar-tone: #0d6b63;
	position: fixed;
	top: 32px;
	left: 0;
	right: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #fff;
	color: #14201f;
	border-bottom: 2px solid var(--atlasai-agbar-tone);
	box-shadow: 0 2px 8px rgba(20, 32, 31, 0.12);
	font-size: 13px;
	line-height: 1.4;
	transform: translateY(-100%);
	transition: transform 0.3s ease;
}

.atlasai-agbar[hidden] {
	display: none;
}

.atlasai-agbar--open {
	transform: translateY(0);
}

.atlasai-agbar[data-status="done"] {
	--atlasai-agbar-tone: #1f8a3d;
}

.atlasai-agbar[data-status="error"] {
	--atlasai-agbar-tone: #cf2d24;
}

.atlasai-agbar__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 960px;
	margin: 0 auto;
}

.atlasai-agbar__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--atlasai-agbar-tone);
}

.atlasai-agbar svg {
	width: 20px;
	height: 20px;
}

.atlasai-agbar__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: 2px;
}

.atlasai-agbar__message {
	font-weight: 600;
}

.atlasai-agbar__detail {
	font-size: 12px;
	color: #43524f;
}

.atlasai-agbar__close {
	display: inline-flex;
	padding: 4px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #5c6c69;
	cursor: pointer;
}

.atlasai-agbar__close:hover {
	color: #14201f;
}

.atlasai-agbar__close:focus-visible {
	outline: 2px solid #0d6b63;
	outline-offset: 2px;
}

.atlasai-agbar__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: var(--atlasai-agbar-tone);
	transition: width 0.3s ease;
}

@media screen and (max-width: 782px) {

	.atlasai-agbar {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.atlasai-agbar,
	.atlasai-agbar__progress {
		transition: none;
	}
}