/**
 * Contact Bubbles Module - Admin Specific Styles
 * Chứa các style đặc thù của riêng module Contact Bubbles (Preview viewport, remove button...)
 * Các style chung (card, form, button, toggle, table...) được kế thừa tự động từ admin-global.css
 */

.via-cb-admin-wrapper {
	max-width: 1080px;
	color: var(--via-text-body, #1e293b);
	margin-top: 15px;
}

/* Viewport scoped preview */
#via-cb-preview-viewport {
	background: #ffffff;
	background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);
	background-size: 16px 16px;
	border: 1px solid #cbd5e1;
	border-radius: var(--via-radius-sm, 8px);
	height: 300px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02);
}

/* Preview wrapper scoped inside viewport */
#via-cb-preview-viewport .via-cb-wrapper {
	position: absolute !important;
	bottom: 20px !important;
	z-index: 50 !important;
	font-family: inherit;
}

#via-cb-preview-viewport .via-cb-wrapper:not(.pos-right) {
	left: 20px !important;
	right: auto !important;
}

#via-cb-preview-viewport .via-cb-wrapper.pos-right {
	left: auto !important;
	right: 20px !important;
}

#via-cb-preview-viewport .via-cb-carousel-container {
	width: 250px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
	margin-bottom: 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

#via-cb-preview-viewport .via-cb-wrapper.is-open .via-cb-carousel-container {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
}

#via-cb-preview-viewport .via-cb-toggle {
	user-select: none;
}

/* Delete / Remove Action Button in Consultants Table */
.via-cb-remove-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: #fef2f2;
	color: #ef4444;
	border: 1px solid #fecaca;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
}

.via-cb-remove-btn:hover {
	background: #fee2e2;
	color: #dc2626;
	border-color: #fca5a5;
}