/* GBF Action Bar (frontend)
   Fixed, bottom-pinned bar that floats above all content.
*/

.gbf-action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--gbf-ab-z, 99999);
	pointer-events: none;
	background: var(--gbf-ab-bar-bg, rgba(0,0,0,0.65)) !important; /* v1.0.6: force visible */
	overflow: visible; /* allow hover to grow outside */
	height: var(--gbf-ab-bar-height, 72px) !important; /* v1.0.6: lock bar height (no movement) */
}

.gbf-action-bar__inner {
	max-width: var(--gbf-ab-max-width, 1100px);
	margin: 0 auto;
	height: var(--gbf-ab-bar-height, 72px);
	padding: 0 24px 0;
	display: flex;
	align-items: flex-end;
	justify-content: var(--gbf-ab-justify, center);
	gap: var(--gbf-ab-gap, 7px);
	overflow: visible;
	pointer-events: none;
}

.gbf-action-bar__tab {
	pointer-events: auto;
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;

	min-width: var(--gbf-ab-tab-minw, 260px);

	padding: 0;
	margin: 0;
	border: 0;
	background: transparent !important;
	box-shadow: none !important;

	text-decoration: none !important;
	box-sizing: border-box;
	user-select: none;
	cursor: pointer;

	position: relative;
}

.gbf-action-bar__tab-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	width: 100%;
	height: var(--gbf-ab-tab-height, 64px);

	padding: 0 26px;

	background: var(--gbf-ab-tab-bg, #D8B05B);
	color: var(--gbf-ab-tab-color, #FFFFFF);

	border: var(--gbf-ab-tab-border, 1px solid rgba(255,255,255,0));
	border-radius: 0 !important; /* v1.0.5: remove radius completely */

	/* Typography */
	font-family: var(--gbf-ab-tab-font-family, inherit);
	font-size: var(--gbf-ab-tab-font-size, 18px);
	font-weight: var(--gbf-ab-tab-font-weight, 700);
	letter-spacing: var(--gbf-ab-tab-letter-spacing, 0.02em);
	text-transform: var(--gbf-ab-tab-text-transform, uppercase);

	line-height: 1;
	white-space: nowrap;

	/* Hover animation: height grows upward only */
	transform-origin: bottom center;
	box-shadow: none;

	transition:
		height var(--gbf-ab-hover-transition, 180ms ease),
		box-shadow var(--gbf-ab-hover-transition, 180ms ease);
	will-change: height, box-shadow;
}

.gbf-action-bar__tab:hover .gbf-action-bar__tab-label,
.gbf-action-bar__tab:focus-visible .gbf-action-bar__tab-label {
	height: calc(var(--gbf-ab-tab-height, 64px) + var(--gbf-ab-hover-rise, 6px));
	box-shadow: var(--gbf-ab-hover-shadow, 0 14px 24px rgba(0,0,0,0.22));
}

.gbf-action-bar__tab:focus-visible .gbf-action-bar__tab-label {
	outline: 3px solid rgba(255,255,255,0.65);
	outline-offset: 3px;
}

.gbf-action-bar__tab-chevron,
.gbf-action-bar__tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	opacity: 0.95;
}

.gbf-action-bar__tab-chevron svg,
.gbf-action-bar__tab-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Responsive */
@media (max-width: 980px) {
	.gbf-action-bar__inner {
	max-width: var(--gbf-ab-max-width, 1100px);
	margin: 0 auto;
	height: var(--gbf-ab-bar-height, 72px);
	padding: 0 24px 0;
	display: flex;
	align-items: flex-end;
	justify-content: var(--gbf-ab-justify, center);
	gap: var(--gbf-ab-gap, 7px);
	overflow: visible;
	pointer-events: none;
}

	.gbf-action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--gbf-ab-z, 99999);
	pointer-events: none;
	background: var(--gbf-ab-bar-bg, rgba(0,0,0,0.65)) !important; /* v1.0.6: force visible */
	overflow: visible; /* allow hover to grow outside */
	height: var(--gbf-ab-bar-height, 72px) !important; /* v1.0.6: lock bar height (no movement) */
}

	.gbf-action-bar__tab {
		min-width: min(320px, 90vw) !important;
	}
}

@media (max-width: 520px) {
	.gbf-action-bar__tab-label {
		height: 58px;
		font-size: 16px;
		padding: 0 18px;
	}
}


/* v1.0.6: Host for the real Knowledge Base launcher moved in from the KB Sidebar plugin */
.gbf-action-bar__kb-host{
	pointer-events: auto;
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	min-width: 320px;
}

/* Make the moved KB element behave like a tab tile without breaking its JS click behavior */
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved{
	position: static !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	margin: 0 !important;
}

/* If the launcher is an <a> or <button>, style it like our tab label */
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button{
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	min-width: 320px !important;
	height: var(--gbf-ab-tab-height, 64px) !important;
	padding: 0 26px !important;
	background: #4B86C6 !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255,255,255,0) !important;
	border-radius: 0 !important;
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: height var(--gbf-ab-hover-transition, 180ms ease), box-shadow var(--gbf-ab-hover-transition, 180ms ease) !important;
	transform-origin: bottom center !important;
}

/* Hover growth upward only, without affecting bar */
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-moved a,
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-moved button{
	height: calc(var(--gbf-ab-tab-height, 64px) + var(--gbf-ab-hover-rise, 6px)) !important;
	box-shadow: var(--gbf-ab-hover-shadow, 0 14px 24px rgba(0,0,0,0.22)) !important;
}