.meeting-card {
	padding: 12px 16px;
	border: 1px solid #e4e7ed;
	border-radius: 8px;
	background-color: #fff;
	transition: all 0.3s;

	&:hover {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	&--scheduled {
		border-left: 4px solid #409eff;
	}

	&--ongoing {
		border-left: 4px solid #67c23a;
	}

	&--ended {
		border-left: 4px solid #909399;
		background-color: #f5f7fa;
	}

	.meeting-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;

		.meeting-card-title {
			font-size: 16px;
			font-weight: 600;
			color: #303133;
			flex: 1;
		}

		.meeting-card-status {
			.status-badge {
				display: inline-block;
				padding: 2px 8px;
				border-radius: 4px;
				font-size: 12px;
				font-weight: 500;
			}

			.status-scheduled {
				background-color: #ecf5ff;
				color: #409eff;
			}

			.status-ongoing {
				background-color: #f0f9ff;
				color: #67c23a;
			}

			.status-ended {
				background-color: #f4f4f5;
				color: #909399;
			}
		}
	}

	.meeting-card-time {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin-bottom: 12px;
		font-size: 14px;
		color: #606266;

		div {
			line-height: 1.5;
		}
	}

	.meeting-card-content {
		margin-bottom: 12px;

		.meeting-card-desc {
			font-size: 14px;
			color: #909399;
			line-height: 1.5;
		}
	}

	.meeting-card-action {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 12px;
		border-top: 1px solid #ebeef5;

		.meeting-card-countdown {
			font-size: 14px;
			color: #409eff;
			font-weight: 500;
		}
	}
}
