/* Section ⋯ Options Button — single icon button in the section title row */

.ii-section-options-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: var(--ii-radius-sm);
	border: 1px solid transparent;
	background: transparent;
	color: var(--ii-text-primary);
	cursor: pointer;
	outline: none;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;

	/* Push to far right of the flex title row */
	margin-left: auto;
}

.ii-section-options-btn:hover {
	border-color: var(--ii-border, rgba(0, 0, 0, 0.08));
	color: var(--ii-text-secondary, #6b7280);
}

.ii-section-options-btn.is-popper-open {
	background: var(--ii-bg-active, #f3f4f6);
	border-color: var(--ii-border, rgba(0, 0, 0, 0.08));
	color: var(--ii-text-primary, #111827);
}

.ii-section-options-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Header Bulk Toggle Button — enters/exits global bulk select mode */

.ii-bulk-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--ii-radius-md);
	border: 1px solid transparent;
	background: transparent;
	color: var(--ii-text-tertiary, #9ca3af);
	cursor: pointer;
	outline: none;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.ii-bulk-toggle-btn:hover {
	background: rgba(239, 68, 68, 0.06);
	color: var(--ii-danger-text, #dc2626);
}

.ii-bulk-toggle-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
	outline: none;
}

/* Active = bulk select mode is on */
.ii-bulk-toggle-btn.is-active {
	background: rgba(239, 68, 68, 0.09);
	border-color: rgba(239, 68, 68, 0.28);
	color: var(--ii-danger-text, #dc2626);
}

.ii-bulk-toggle-btn.is-active:hover {
	background: rgba(239, 68, 68, 0.14);
}

.dark .ii-bulk-toggle-btn:hover {
	background: rgba(239, 68, 68, 0.1);
	color: var(--ii-danger-text, #f87171);
}

.dark .ii-bulk-toggle-btn.is-active {
	background: rgba(239, 68, 68, 0.13);
	border-color: rgba(239, 68, 68, 0.34);
	color: var(--ii-danger-text, #f87171);
}

.dark .ii-bulk-toggle-btn.is-active:hover {
	background: rgba(239, 68, 68, 0.18);
}

/* Cards become individually clickable (cursor + hover feedback) */
.is-delete-mode .ii-collection-image {
	cursor: pointer;
	transition:
		border-color 0.14s ease,
		box-shadow 0.14s ease,
		transform 0.12s ease;
}

.is-delete-mode .ii-collection-image:hover {
	border-color: rgba(239, 68, 68, 0.35);
	box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2) inset;
}

/* Show checkbox in delete mode - make it always visible */
.is-delete-mode .ii-collection-image .ii-ci-checkbox input[type='checkbox'] {
	opacity: 1;
	pointer-events: none;
}

/* Block per-card options + view buttons while in delete mode */
.is-delete-mode .ii-asset-options-btn,
.is-delete-mode .ii-collection-image .ii-asset-view-btn {
	pointer-events: none;
	opacity: 0;
	cursor: default;
}

/* Delete-selected card state */

.ii-collection-image.ii-del-selected {
	border-color: rgba(239, 68, 68, 0.6);
	box-shadow:
		0 0 0 1px rgba(239, 68, 68, 0.35) inset,
		0 2px 8px rgba(239, 68, 68, 0.1);
	transform: scale(0.97);
}

/* Tint the checkbox accent red */
.ii-collection-image.ii-del-selected .ii-ci-checkbox input[type='checkbox'] {
	background-color: #ef4444;
	border-color: transparent;
}

/* Bulk Action Bar: a selection tray that takes the composer's place. It is
   mounted inside #iiInputContainer, so it borrows that element's width and
   min-height:100% makes it cover the input row underneath. */

.ii-bulk-action-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 100%;
	z-index: 20;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;

	padding: 12px;
	border: 1px solid var(--ii-danger-border);
	border-radius: var(--ii-radius-lgx);
	background: var(--ii-bulk-bar-bg);
	box-shadow: var(--ii-bulk-bar-shadow);

	opacity: 0;
	transform: translateY(12px) scale(0.985);
	transform-origin: center bottom;
	pointer-events: none;
	transition:
		opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ii-bulk-action-bar.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* A fullscreen composer is tall enough that matching it would give a mostly
   empty tray, so it only covers what it needs to. */
.ii-input-wrapper.is-fullscreen .ii-bulk-action-bar {
	min-height: 0;
}

/* No composer on this route: float it at the bottom of the viewport instead. */
body > .ii-bulk-action-bar {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: 16px;
	width: min(860px, calc(100% - 32px));
	min-height: 0;
	z-index: 300;
	transform: translate(-50%, 12px) scale(0.985);
}

body > .ii-bulk-action-bar.is-visible {
	transform: translate(-50%, 0) scale(1);
}

/* Exits bulk mode. Same treatment as .ii-exit-edit-btn, parked in the corner. */
.ii-bulk-close-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	line-height: 1;
	border: none;
	border-radius: var(--ii-radius-rounded, 999px);
	background: transparent;
	color: var(--ii-text-secondary, #6b7280);
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}

.ii-bulk-close-btn:hover {
	background: var(--ii-bg-active);
	color: var(--ii-text-primary);
}

.ii-bulk-close-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Selected cards, styled as the composer's asset chips. The right margin is
   the close button's corner: the row scrolls, so padding would slide under it. */
.ii-bulk-bar-chips {
	display: flex;
	align-items: center;
	gap: 8px;
	/* The extra bottom padding is the scrollbar's lane; the negative margins
	   cancel both so the row still occupies only its chips' height. */
	padding: 10px 2px 12px;
	margin: -10px 44px -12px 0;
	overflow-x: auto;
	/* Not visible: next to overflow-x it computes to auto, and the chips'
	   corner buttons are enough to trigger a vertical bar the padding hides. */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--ii-bg-active) transparent;
}

.ii-bulk-bar-chips::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.ii-bulk-bar-chips::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

.ii-bulk-bar-chips::-webkit-scrollbar-track {
	background: transparent;
}

.ii-bulk-bar-chips::-webkit-scrollbar-thumb {
	background: var(--ii-bg-active);
	border-radius: 3px;
	transition: background 0.2s ease;
}

.ii-bulk-bar-chips::-webkit-scrollbar-thumb:hover {
	background: var(--ii-text-tertiary);
}

.ii-bulk-bar-chips:empty {
	display: none;
}

/* Nothing here is draggable, unlike the composer row these chips borrow from */
.ii-bulk-bar-chips .ii-asset-chip,
.ii-bulk-bar-chips .ii-asset-chip:active {
	cursor: default;
}

.ii-bulk-bar-empty {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 0 44px 0 2px;
	font-size: 0.8rem;
	color: var(--ii-text-tertiary, #9ca3af);
}

.ii-bulk-action-bar.has-selection .ii-bulk-bar-empty {
	display: none;
}

.ii-bulk-bar-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}

/* Left side: count badge + "selected" label */
.ii-bulk-bar-left {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
}

.ii-bulk-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 11px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--ii-danger-text);
	background: var(--ii-danger-badge-bg);
	border: 1px solid var(--ii-danger-badge-border);
	transition:
		background 0.15s ease,
		color 0.15s ease;
}

.ii-bulk-count-badge.is-bumped {
	animation: iiBulkCountBump 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iiBulkCountBump {
	0% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

.ii-bulk-bar-label {
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--ii-text-secondary, #6b7280);
	white-space: nowrap;
}

/* Right side: Cancel + Select All + Delete */
.ii-bulk-bar-right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.ii-bulk-select-all-btn {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 13px;
	border-radius: var(--ii-radius-md, 10px);
	font-size: 0.78rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	outline: none;
	background: transparent;
	border: 1px solid var(--ii-border, rgba(0, 0, 0, 0.1));
	color: var(--ii-text-secondary, #6b7280);
	transition:
		color 0.15s ease,
		background 0.15s ease,
		border-color 0.15s ease;
}

.ii-bulk-select-all-btn:hover {
	background: var(--ii-bg-hover, #f3f4f6);
	border-color: rgba(0, 0, 0, 0.15);
	color: var(--ii-text-primary, #111827);
}

.ii-bulk-select-all-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Delete button */
.ii-bulk-delete-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 15px;
	border-radius: var(--ii-radius-md, 10px);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	outline: none;
	border: 1px solid var(--ii-danger-solid-border);
	color: var(--ii-danger-solid-text);
	background: var(--ii-danger-solid);
	box-shadow: 0 2px 10px rgba(239, 68, 68, 0.22);
	transition:
		color 0.15s ease,
		background 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.1s ease;
}

.ii-bulk-delete-btn:hover:not(:disabled) {
	filter: brightness(1.07);
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.34);
}

.ii-bulk-delete-btn:active:not(:disabled) {
	transform: scale(0.96);
}

.ii-bulk-delete-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35);
}

.ii-bulk-delete-btn:disabled {
	color: var(--ii-danger-text);
	background: var(--ii-danger-bg);
	border-color: var(--ii-danger-border);
	box-shadow: none;
	opacity: 0.55;
	cursor: not-allowed;
}

.ii-bulk-delete-btn svg {
	flex-shrink: 0;
}

/* Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
	.ii-bulk-action-bar,
	.ii-bulk-action-bar.is-visible {
		transition: opacity 100ms ease;
		transform: none;
	}

	body > .ii-bulk-action-bar,
	body > .ii-bulk-action-bar.is-visible {
		transform: translateX(-50%);
	}

	.ii-bulk-count-badge.is-bumped {
		animation: none;
	}

	.ii-collection-image.ii-del-selected {
		transform: none;
	}

	.ii-section-options-btn,
	.ii-bulk-toggle-btn,
	.ii-bulk-close-btn,
	.ii-bulk-select-all-btn,
	.ii-bulk-delete-btn {
		transition: none;
	}
}