/* ---------- TOGGLE BUTTON ---------- */
#ol-chat-toggle {
	position: fixed;
	right: 1rem;
	bottom: 1rem;

  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.992%2016.342a2%202%200%200%201%20.094%201.167l-1.065%203.29a1%201%200%200%200%201.236%201.168l3.413-.998a2%202%200%200%201%201.099.092%2010%2010%200%201%200-4.777-4.719%27%2F%3E%3C%2Fsvg%3E");
	background-position: center;
	background-size: 50%;
	background-repeat: no-repeat;

	background-color: black;
	border-radius: 50%;
	width: 56px;
	height: 56px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

	cursor: pointer;
  transition: all 0.2s ease;
  transform: scale(1);
}

#ol-chat-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

#ol-chat-toggle.left  { right: auto; left: 1rem; }
#ol-chat-toggle.right { left: auto; right: 1rem; }
#ol-chat-toggle.center { left: 50%; transform: translateX(-50%); }


/* ---------- POPUP BASE ---------- */
#ol-chat-popup {
	background-color: #FFF;
	border: 1px solid black;
	border-radius: 1rem;
	position: fixed;

	bottom: 1rem;
	right: -100%;
	color: black;

	width: 50vw;
	height: 50vh;

	display: flex;
	flex-direction: column;

	transition:
		right 500ms ease-in-out,
		left 500ms ease-in-out,
		bottom 500ms ease-in-out,
		transform 500ms ease-in-out;
}

/* ---------- LEFT MODE ---------- */
#ol-chat-popup.left,
#ol-chat-popup.left.closed {
	right: auto;
	left: -100%;
}

#ol-chat-popup.left.opened {
	left: 1rem;
}

/* ---------- RIGHT MODE ---------- */
#ol-chat-popup.right,
#ol-chat-popup.right.closed {
	left: auto;
	right: -100%;
}

#ol-chat-popup.right.opened {
	right: 1rem;
}

/* ---------- CENTER (BOTTOM SLIDE-UP) MODE ---------- */
#ol-chat-popup.center,
#ol-chat-popup.center.closed {
	right: auto;
	left: 50%;

	bottom: -100%;
	transform: translateX(-50%);
}

#ol-chat-popup.center.opened {
	bottom: 1rem;
	transform: translateX(-50%);
}


/* ---------- INTERNAL ELEMENTS ---------- */
#ol-chat-popup .error {
	color: #fb2c36;
	padding: 0 0.5rem 0.5rem;
	text-align: center;
}

#ol-chat-popup .chat-embed-container {
	flex: 1;
	padding: 0 0.5rem 0.5rem;
	display: flex;
	flex-direction: column;
}

#ol-chat-popup .chat-embed-container iframe {
	flex: 1;
}

#ol-chat-popup-close {
	border: none;
	padding: 0.5rem;
	font-size: 1.5rem;
	background: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 150ms ease-in-out;
}

#ol-chat-popup-close:hover {
	opacity: 1;
}


/* ---------- MOBILE FULLSCREEN OVERRIDE ---------- */
@media (max-width: 576px) {
	#ol-chat-popup {
		width: 100vw !important;
		height: 100dvh !important;

		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;

		margin: 0;
		border: none;
		border-radius: 0;

		/* hidden/closed by default */
		transform: translateY(100%);

		/* replace position slide with transform slide */
		transition: transform 300ms ease-in-out !important;
	}

	#ol-chat-popup.closed {
		transform: translateY(100%);
	}

	#ol-chat-popup.opened {
		transform: translateY(0);
	}
}